how to insert svg via tag?

Question

how to insert svg via tag?

I try to insert svg in this way: <img src="/assets/menu/menubutton.svg"> but nothing works (the assets file is in the root, everything else is also true). perhaps I have an error in the svg file itself, what should it contain?

The code inside the svg file looks like this:

    <svg width="60" height="60">
<line x1="20" y1="30" x2="50" y2="30" stroke="black" stroke-width="5" stroke-linecap="round"/>
<line x1="20" y1="40" x2="50" y2="40" stroke="black" stroke-width="5" stroke-linecap="round"/>
<line x1="20" y1="50" x2="50" y2="50" stroke="black" stroke-width="5" stroke-linecap="round"/>
</svg>

1

html svg img

Author: Panfiloff, 2019-11-23

Source

1 answers

score 1 · Answer 1

As @Stranger in the Q commented, you need to add namespace svg

xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

The second parameter is required if you will use <use> and other tags that link to the source for ID So it's better to get used to writing both attributes at once, so that you don't have to worry about looking for an SVG error later.

  <svg width="60" height="60"  xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
<line x1="20" y1="30" x2="50" y2="30" stroke="black" stroke-width="5" stroke-linecap="round"/>
<line x1="20" y1="40" x2="50" y2="40" stroke="black" stroke-width="5" stroke-linecap="round"/>
<line x1="20" y1="50" x2="50" y2="50" stroke="black" stroke-width="5" stroke-linecap="round"/>
</svg>

I saved this code in a separate file menubutton.svg and uploaded it to the server.

Next, I call it as you wanted using <img>

<img src="https://svg-art.ru/files/menubutton.svg" />