I would like to know how to use svg file and use it as tag. For example, I have a svg file like

<svg version="1.1" xmlns="" width="512" height="512" viewBox="0 0 512 512">
<title></title>
<g id="ioon-ignore">
</g>
<path d="M144 288h-32v224h32c8.8 0 16-7.2 16-16v-192c0-8.8-7.2-16-16-16z"></path>
</svg>

I am trying to require it with javascript (node, electron) and render in html tag.

// For examle,
<svg src="./mySvg.svg" />

I don't want to use <img> tag or etc.

I would like to know how to use svg file and use it as tag. For example, I have a svg file like

<svg version="1.1" xmlns="http://www.w3/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<title></title>
<g id="ioon-ignore">
</g>
<path d="M144 288h-32v224h32c8.8 0 16-7.2 16-16v-192c0-8.8-7.2-16-16-16z"></path>
</svg>

I am trying to require it with javascript (node, electron) and render in html tag.

// For examle,
<svg src="./mySvg.svg" />

I don't want to use <img> tag or etc.

• javascript
• html
• svg

• maybe put a rect tag inside svg tag and give it a background img using css? – Tianhao Zhou Commented Aug 6, 2017 at 3:22
• What's the reason for not wanting to use <img>? That's the proper way of doing it. While Paul's answer below works, <img> would be the proper way of doing it. – Thomas W Commented Aug 6, 2017 at 5:38

1 Answer 1

If you are excluding using <img> (HTML) or <image> (SVG), and presumably <object> as well, then the only other option is <use>:

<svg width="512" height="512" viewBox="0 0 512 512">
  <use xlink:href="#ioon-ignore"/>
</svg>