What Is The Value Of An Embedded Svg In A Data Uri And What Is The Tag To Use?

If I have this SVG:

Solution 1:

Following the discussion for the first answer, here is how to convert an SVG to base64 so that you can embed it inside of an <img> tag.

Yes, you just need to pipe the following structure to a base64 encoder:

<?xml version="1.0" encoding="utf-8"?><svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="537"height="474"viewBox="-3 6 358 316">
...
</svg>

This is just a pseudo-example, of course use your custom width, height and viewBox and fill in the graphics markup. If you want to compress it a bit, you can minify the svg code upfront.

Quick manual solution

1. Get your svg, for example this ♡.
2. Use this converter to get the base64 text: https://base64.guru/converter/encode/image/svg
3. Select the option to generate an img tag right away or do it manually: <img src="data:image/svg+xml;charset=utf-8;base64,obtained-plain-base64-string">.

You can see the converted ♡ in this fiddle.

Automated solution

If you are interested in programmatic conversion to base64, you will for sure find resources for the language/framework of your choice.

Solution 2:

And I want to embed it

Not sure what you mean, it already is embeded in the page in your first example.

then I would convert that string to base64 and set it as the source of an image tag?

you could, but I don't see any possible benefit.

Is it still interactive?

No. SVGs in img tags lose interactivity.

Do classes still apply?

If they're applied from the page, no.

Does the ID still apply?

IDs in the SVG won't be visible from elsewhere in the page, if that's what you mean.

Is it smaller in size as base64?

No, it will be 33% larger.

Share