Javascript SVG转换<；g>；标记到一个<；图像>；包含base64 PNG URI的标记（阅读更多）

我遇到了一个有趣的问题（我希望！） 我注意到有两种“类型”的SVG

首先，我们有传统的SVG文件，带有和标记，例如：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 841.89 1190.55" style="enable-background:new 0 0 841.89 1190.55;" xml:space="preserve">
     <g id="Background">
        <rect id="Color1" class="st3" width="840.94" height="1190.55"/>
        <g id="Texture" class="st4">
            <path class="st5" d="M843.67,410.13c-73.29 ...

可以将DOM中带有标记的内联SVG转换为图像数据url。你只需要把它变成这样：

imageTag.src = 'data:image/svg+xml,' + window.escape(svgTag.outerHTML);

imageTag版本不能在SVG中嵌入外部链接。它还需要SVG标记上的宽度和高度属性，否则在某些浏览器中不会显示。您也可以将此图像绘制到画布上，以光栅化图像，但正如注释所述，如果缩放，只会使图像更难看

如果要将其转换为SVG文件，应将其作为第一行添加，然后添加svgTag的outerHTML

<?xml version="1.0" encoding="UTF-8"?>



您可以使用.svg扩展名保存文件
我不确定这是否能准确回答您的问题，但您可以这样做：

<image id="something" href='data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" .../>' />



当编码设置为
data:image/SVG+xml时，您可以将原始SVG作为字符串嵌入href；utf8

这将在
标记中呈现SVG，但在Base64中不呈现SVG（我无法使其工作，但可能有一种方法）

来源：
你为什么要这样做？需要嵌入光栅图像以。。。好。。。嵌入光栅图像。光栅化svg肯定会降低当前矢量图形的质量，并可能增加其大小（以字节为单位），即松散策略。如果您希望将当前矢量图像嵌入为存储在
加载的数据URL中的矢量图像，那么您将保持质量，但会白白浪费大量磁盘空间，并且使解码器做更多的工作，因为它必须维护更多的图像上下文…是的，我已经考虑过了，如果我错了，请纠正我。我做了一些实验，看起来大型矢量化svg向客户端提供服务更快，但客户端加载需要很长时间。虽然光栅“假”svg需要更长的时间来服务，但加载速度更快。话虽如此，在我的实验中，服务光栅“伪”svg似乎提供了更好的用户体验。在我的实验中，我使用了7MB矢量化svg文件。我还想让用户编辑图像，我得出结论，在处理矢量化svg时，在
中通过鼠标拖动移动组要比在光栅“伪”svg慢得多。是的，在画布上渲染光栅图像要比矢量图像快得多，但为什么要将其包装在svg中？在这种情况下，只需直接提供光栅。是的，我可能会做类似的事情，但是，我们得到的图像默认是传统的SVG，因此我们的第一步是将嵌入式SVG组转换为光栅图像，我们随后将提供这些图像。
<image id="something" href='data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" .../>' />