0

If I have this SVG: 

<body> 
   <svg xmlns="http://www.w3.org/2000/svg">
       <text x="10" y="50" font-size="30" class="svgClass2" id="svgText2">My SVG</text>
   </svg> 
</body>

IIUC If I want to embed that SVG markup to a data URI then I would convert that SVG markup to base64 and set it as the source of an image tag? 

<img src="data:image/svg+xml,charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmN==" />

Is the value PD94bWwgdmVyc2lvbj0iMS4wIiBlbmN... this: 

   <svg xmlns="http://www.w3.org/2000/svg">
       <text x="10" y="50" font-size="30" class="svgClass2" id="svgText2">My SVG</text>
   </svg>

Is that correct?

Additional Questions if possible:
Is it still interactive as an img? Do classes still apply? Does the ID still apply? Is it smaller in size as data URI base64?

Note: There is a specific use case where this will be used. I am aware of some of the pros and cons.

References:

https://stackoverflow.com/a/882783/441016 - Data URI in image tag

https://vecta.io/blog/best-way-to-embed-svg - this does not show examples but the comments people talk about data URI

https://www.w3schools.com/html/html5_svg.asp

1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231
  • I'm not getting what your asking. The top one is already embeded as the SVG isn't getting loaded from an external source. The text is getting drawn from the tag. The xmlns is just a ruleset? I think, but it doesn't actually load anything. From my understanding. – Monofuse May 08 '20 at 20:29
  • I'm talking about embedding as a data URI. Question updated. – 1.21 gigawatts May 08 '20 at 20:34
  • At this question here, https://stackoverflow.com/a/882783/441016, a guy is using to display SVG. How did he get to that? Did he put the entire SVG markup into a base64 encoder and then paste that value into an image tag? – 1.21 gigawatts May 08 '20 at 20:42

2 Answers2

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"?>
<svg xmlns="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.

Community
  • 1
  • 1
Isolin
  • 845
  • 7
  • 20
0

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.

hobbs
  • 223,387
  • 19
  • 210
  • 288
  • I assume by _embedding_ he is referring to the following: https://vecta.io/blog/best-way-to-embed-svg. Most of the answers are already there. `` is isolated from the rest of the site and non-interactive. – Isolin May 08 '20 at 20:31
  • More details on the base64 length here: https://stackoverflow.com/questions/13378815/base64-length-calculation – Isolin May 08 '20 at 20:33
  • I'm asking how to convert SVG markup (and what part) into data URI as base64. Question updated. – 1.21 gigawatts May 08 '20 at 20:39