Display SVG file on web page

Question

I have SVG files for certain images that need to show in my single page application (build with Laravel and RiotJS). I tried several ways to display it on the page but it only shows a broken image on the web page. Then I extract the SVG code (starts with <svg xmlns="http://www.w3.org/2000/svg" ....) and put it on the database and retrieve it. It works. But I think it's not the best way to do something like that since I have hundreds of SVGs and this approach will overload my database storage quickly. I tried the following ways,

Using img tag

<img src="path/to/mylocal/image.svg" >

Using object tag and embed tag

<object data="path/to/mylocal/image.svg" type="image/svg+xml"></object>

using object and embed tag renders the SVG but leaves a vertical scroll bar.

Edit:- Please note that, I'm getting the string that containing from the database and display it on web page using JQuery like this,

In HTML

<div id="myContainer"></div>

In JQuery

$('#myContainer').html(stringGetFromTheDatabase);

Any kind of help is appreciated. Thanks

Answer 1

You try the below code,

<img src="myfolder/my.svg" alt="alt text" height="87px" width="100px" />

and my.svg should like

<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M20,0H4V2H20V0M4,24H20V22H4V24M20,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6A2,2 0 0,0 20,4M12,6.75A2.25,2.25 0 0,1 14.25,9A2.25,2.25 0 0,1 12,11.25A2.25,2.25 0 0,1 9.75,9A2.25,2.25 0 0,1 12,6.75M17,17H7V15.5C7,13.83 10.33,13 12,13C13.67,13 17,13.83 17,15.5V17Z" /></svg>

it should work.

Answer 2

As I see, Sandeep Sudhakaran's answer didn't help you. But that answer is right. Try to check whether you published the storage directory with Laravel artisan command (created symbolic link):

php artisan storage:link

If you already published it before, try to put any .jpg or .png image to your directory (path/to/mylocal/ in your example) and add the image to your page as you did with .svg one.

Then load the page and check whether the image is shown correctly. If you still have the same problem, then check the path to image, probably it's not correct, and if you correct it, your .svg image will be shown correctly either.

If image do not appear, put an image to the public directory and change the path to image in your html just to /my-image-name.jpg, that must work.

Hope the problem will be solved!))