我想显示一个SVG图片。我想使用CSS直接修改SVG，因此需要使用<svg>标签。但是，我没有SVG源代码-我所拥有的只是将SVG编码为base64字符串。在我的HTML页面中，带有图片标签的内容如下所示：
<img alt="" src="data:image/svg+xml;base64,lotsofunreadablestuff...">
如何创建svg使用相同的base64字符串显示相同图像的标签？到目前为止，我发现的每个线程和文档似乎都假设我<use xlink:href=...></use>在SVG中使用了标签，或者在标签中包含了原始SVG <svg>，但都不适合我的情况。
我想做这样的事情：
<svg>
<magicalSourceTag>
data:image/svg+xml;base64,lotsofunreadablestuff...
</magicalSourceTag>
</svg>
您只能将CSS应用于同一文档中的SVG。这意味着您要么必须将SVG内联到HTML中，要么将CSS嵌入到SVG代码本身中。
现在，为了内联SVG，这取决于您拥有什么。
对于此答案，我将使用以下数据URL，该数据URL转换为（应该是）照相机图标：
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgdmlld0JveD0iMCAtMTAgMTAwIDg1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGRlZnM+CiAgICAgICAgPGNsaXBQYXRoIGlkPSJjbGlwIj4KICAgICAgICAgICAgPHBhdGggZD0iTTAsMCBMMTAwLDAgTDEwMCw3NSBMMCw3NSBMMCwwCiAgICAgICAgICAgICAgICAgICAgIE01MCwxNSBBMjAsMjAgMCAxLDAgNTAsNjAgQTIwLDIwIDAgMSwwIDUwLDE1CiAgICAgICAgICAgICAgICAgICAgIE01MCwyNSBBMTIuNSwxMi41IDAgMSwxIDUwLDUwIEExMi41LDEyLjUgMCAxLDEgNTAsMjUiLz4KICAgICAgICA8L2NsaXBQYXRoPgogICAgPC9kZWZzPgogICAgPHJlY3QgeD0iMzAiIHk9Ii0xMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjIwIiByeD0iMTAiIHJ5PSIxMCIvPgogICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSI3NSIgcng9IjE1IiByeT0iMTUiIGNsaXAtcGF0aD0idXJsKCNjbGlwKSIvPgo8L3N2Zz4K
如果您有要使用的硬编码数据URL，则可以使用那里的任何base64解码器对其进行解码。只需将blob粘贴base64,到解码器中，它便会返回原始XML，然后您可以将其嵌入HTML中。
如果您从上方使用数据URL，请在Google的第一个结果中查找“ base64解码”，然后将其粘贴到该位置base64,，您将获得：
<?xml version="1.0"?>
<svg viewBox="0 -10 100 85" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip">
<path d="M0,0 L100,0 L100,75 L0,75 L0,0
M50,15 A20,20 0 1,0 50,60 A20,20 0 1,0 50,15
M50,25 A12.5,12.5 0 1,1 50,50 A12.5,12.5 0 1,1 50,25"/>
</clipPath>
</defs>
<rect x="30" y="-10" width="40" height="20" rx="10" ry="10"/>
<rect x="0" y="0" width="100" height="75" rx="15" ry="15" clip-path="url(#clip)"/>
</svg>
您应该先删除<?xml version="1.0"?>标记，然后再将其内联到HTML中，以使其100％符合标准，但这就是您要做的，剩下的如果粘贴到HTML中就可以正常工作。
但是，如果数据URL不固定，则需要您的应用程序进行解码和内联。
同样，有两种方法可以做到这一点：
我会考虑在服务器端内联最干净的方式来处理动态数据。
从理论上讲，任何编程语言都可以做到这一点，只要它具有base64解码器和XML解析器，它就不会太复杂。
由于您没有说出正在使用的服务器端语言（如果有），因此我将以PHP为例，并使用DOM扩展，该扩展默认情况下处于启用状态。
首先，您需要从数据URL中获取XML。您可以file_get_contents为此使用（ab）：
$xml = file_get_contents($dataURL);
接下来，您需要将该XML解析为DOM文档：
$dom = new DOMDocument();
$dom->loadXML($xml);
然后，您只想导出根节点（不带<?xml标签），以便可以将其内联到HTML中。您可以通过将$dom->saveXML根节点作为第一个参数来调用来实现，即：
$svg = $dom->saveXML($dom->documentElement);
[ 在线演示 ]
当然，这具有需要首先运行服务器端应用程序（而不是Web服务器）的缺点。
如果您需要或想要在浏览器中执行此操作，则实际上只有一个选项：JavaScript。
与PHP相似file_get_contents，您可以（ab）使用JavaScript XMLHttpRequest从URL“加载”数据：
var xhr = new XMLHttpRequest();
xhr.open('GET', dataURL);
xhr.addEventListener('load', function(ev)
{
var xml = ev.target.response;
// All following code here
});
xhr.send(null);
等同于PHP的DOM库，JavaScript具有DOMParser，您可以将其用于将整个字符串解析为DOM文档：
var dom = new DOMParser();
var svg = dom.parseFromString(xml, 'image/svg+xml');
最后，您可以svg.rootElement在DOM树中的任意位置附加根元素（例如），例如
document.body.appendChild(svg.rootElement);
演示：
var dataURL = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgdmlld0JveD0iMCAtMTAgMTAwIDg1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGRlZnM+CiAgICAgICAgPGNsaXBQYXRoIGlkPSJjbGlwIj4KICAgICAgICAgICAgPHBhdGggZD0iTTAsMCBMMTAwLDAgTDEwMCw3NSBMMCw3NSBMMCwwCiAgICAgICAgICAgICAgICAgICAgIE01MCwxNSBBMjAsMjAgMCAxLDAgNTAsNjAgQTIwLDIwIDAgMSwwIDUwLDE1CiAgICAgICAgICAgICAgICAgICAgIE01MCwyNSBBMTIuNSwxMi41IDAgMSwxIDUwLDUwIEExMi41LDEyLjUgMCAxLDEgNTAsMjUiLz4KICAgICAgICA8L2NsaXBQYXRoPgogICAgPC9kZWZzPgogICAgPHJlY3QgeD0iMzAiIHk9Ii0xMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjIwIiByeD0iMTAiIHJ5PSIxMCIvPgogICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSI3NSIgcng9IjE1IiByeT0iMTUiIGNsaXAtcGF0aD0idXJsKCNjbGlwKSIvPgo8L3N2Zz4K';
var xhr = new XMLHttpRequest();
xhr.open('GET', dataURL);
xhr.addEventListener('load', function(ev)
{
var xml = ev.target.response;
var dom = new DOMParser();
var svg = dom.parseFromString(xml, 'image/svg+xml');
document.body.appendChild(svg.rootElement);
});
xhr.send(null);