数据URI中嵌入式SVG的值是什么?要使用的标记是什么? [英] What is the value of an embedded SVG in a data URI and what is the tag to use?
问题描述
如果我有此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如果我想将SVG标记嵌入到数据URI中，那么我会将那个SVG标记转换为base64并将其设置为图像标记的来源?
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==" />
值PD94bWwgdmVyc2lvbj0iMS4wIiBlbmN...是否为:
<svg xmlns="http://www.w3.org/2000/svg">
<text x="10" y="50" font-size="30" class="svgClass2" id="svgText2">My SVG</text>
</svg>
那是正确的吗?
其他可能的问题:
它仍然是作为img进行交互的吗?
上课仍然适用吗?
该ID仍然适用吗?
它的大小是否小于数据URI base64?
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.
参考:
https://stackoverflow.com/a/882783/441016 -图像标记中的数据URI
https://stackoverflow.com/a/882783/441016 - Data URI in image tag
https://vecta.io/blog/best-way-to -embed-svg -这里没有显示示例，但是人们谈论数据URI的评论
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
推荐答案
在讨论第一个答案之后，这里是如何将SVG转换为base64，以便您可以将其嵌入<img>标记内.
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.
是的，您只需要将以下结构传递给base64编码器:
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>
这只是一个伪示例，当然请使用自定义的width，height和viewBox并填写图形标记.如果您想稍微压缩一下，可以先减少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.
- 获取您的svg，例如此♡.
- 使用此转换器获取base64文本: https://base64.guru/converter/编码/图像/svg
- 选择立即生成
img标记或手动执行的选项:<img src="data:image/svg+xml;charset=utf-8;base64,obtain-plain-base64-string">.
- Get your svg, for example this ♡.
- Use this converter to get the base64 text: https://base64.guru/converter/encode/image/svg
- Select the option to generate an
imgtag 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.
如果您对以编程方式转换为base64感兴趣，那么您一定会找到适合您所选择的语言/框架的资源.
If you are interested in programmatic conversion to base64, you will for sure find resources for the language/framework of your choice.
这篇关于数据URI中嵌入式SVG的值是什么?要使用的标记是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
