6

Is there a technical (dis)advantage to including SVG-code in a HTML-file versus embedding it with an <img> tag?

I'm not asking about personal preference or opinion, but factual differences on the technical level.

Browser compatibility would be an example. Caniuse.com tells me there is virtually no difference in that respect (SVG as img vs inline SVG code). But maybe there are other factors that I'm not aware of?

SVG as part of the HTML code:

<html>
...
<body>
    ...
    <svg version="1.1" ... >
        ...
    </svg>
    ...
</body>
</html>

SVG embedded as image:

<html>
...
<body>
    ...
    <img src="image.svg" ... >
    ...
</body>
</html>
  • 3
    On the one hand you can't use SVG fragment identifiers unless the file is external. On the other hand you can't actively change an SVG if it's not internal. Just two examples from the top of my head. – Shikkediel Mar 20 '21 at 10:16
  • What happens when there's a change to the image formats used? In the first, you get to go write css again, since you no longer have SVG elements for pictures. In the second, you just change the extension of the image source. But then, you've generated 2 requests instead of one - for everyone. Was the site likely to change? No? Then you've done more work to make potential future maintenance easier, at the expense of an extra request. – enhzflep Mar 20 '21 at 10:16
  • I believe when an svg uses external files like fonts or bitmaps it doesn't work when used as an for security reasons. On the other hand it's easier to resize when used as using css, from what I remember. – Janneman Mar 20 '21 at 10:22
  • Does this answer your question? [Inline SVG vs SVG File Performance](https://stackoverflow.com/questions/23210126/inline-svg-vs-svg-file-performance) – Ibrahim Ali Jan 27 '22 at 01:07

0 Answers0