javascripthtmlsvg

How do you import svg file with svg tag?

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.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<title></title>
<g id="icomoon-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.

Solution

  • 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="#icomoon-ignore"/>
</svg>