你只能将CSS应用于同一文档中的SVG。这意味着您要么将SVG内联到HTML中，要么将CSS嵌入到SVG代码中。
现在，为了内联SVG，取决于您拥有什么。
对于此答案，我将使用以下数据URL，它转换为（应该是）相机图标：
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgdmlld0JveD0iMCAtMTAgMTAwIDg1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGRlZnM+CiAgICAgICAgPGNsaXBQYXRoIGlkPSJjbGlwIj4KICAgICAgICAgICAgPHBhdGggZD0iTTAsMCBMMTAwLDAgTDEwMCw3NSBMMCw3NSBMMCwwCiAgICAgICAgICAgICAgICAgICAgIE01MCwxNSBBMjAsMjAgMCAxLDAgNTAsNjAgQTIwLDIwIDAgMSwwIDUwLDE1CiAgICAgICAgICAgICAgICAgICAgIE01MCwyNSBBMTIuNSwxMi41IDAgMSwxIDUwLDUwIEExMi41LDEyLjUgMCAxLDEgNTAsMjUiLz4KICAgICAgICA8L2NsaXBQYXRoPgogICAgPC9kZWZzPgogICAgPHJlY3QgeD0iMzAiIHk9Ii0xMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjIwIiByeD0iMTAiIHJ5PSIxMCIvPgogICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSI3NSIgcng9IjE1IiByeT0iMTUiIGNsaXAtcGF0aD0idXJsKCNjbGlwKSIvPgo8L3N2Zz4K
1. 静态数据
如果您有一个硬编码的数据 URL，想要使用它，您可以使用任何base64解码器进行解码。只需将blob粘贴到base64,后面的解码器中，它应该会返回原始的XML数据，然后您可以将其嵌入到HTML中。
如果您使用上面的data URL，请查找 "\"base64 decode\"的第一个Google结果" 并将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嵌入到HTML中之前删除
<?xml version="1.0"?>标签以达到100％符合标准，但是如果将其粘贴到HTML中，则其余部分应该可以正常工作。
2. 动态数据
如果数据 URL 不是固定的，您需要让应用程序进行解码和内联。
同样有两种方法可以实现：
2.1 服务器端
我认为服务器端内联是处理动态数据最清晰的方法。
理论上任何编程语言都可以做到这一点，只要它有一个 base64 解码器和一个 XML 解析器，就不应该太复杂。
由于您没有说明使用哪种（如果有）服务器端语言，我将以 PHP 为例，并利用默认启用和可用的 DOM 扩展。
首先，您需要从数据 URL 中获取 XML。您可以（滥用）file_get_contents 来实现：
$xml = file_get_contents($dataURL);
接下来，您需要将XML解析为DOM文档：
$dom = new DOMDocument();
$dom->loadXML($xml);
接下来，您需要仅导出根节点（不包括<?xml标签），以便将其内联到HTML中。您可以通过使用根节点作为第一个参数调用$dom->saveXML来实现：
$svg = $dom->saveXML($dom->documentElement);
[在线演示]
这当然有一个缺点，就是需要在服务器端运行应用程序（除了Web服务器）。
2.2 客户端
如果您需要或想要在浏览器中执行此操作，那么实际上只有一种选择：JavaScript。
与PHP的file_get_contents类似，您可以（滥用）JavaScript的XMLHttpRequest从URL“加载”数据：
var xhr = new XMLHttpRequest();
xhr.open('GET', dataURL);
xhr.addEventListener('load', function(ev)
{
var xml = ev.target.response;
});
xhr.send(null);
相当于 PHP 的
DOM 库，JavaScript 有
DOMParser，您可以使用它将整个字符串解析为 DOM 文档：
var dom = new DOMParser();
var svg = dom.parseFromString(xml, 'image/svg+xml');
最后，您可以在DOM树中任何位置附加根元素（即
svg.rootElement），例如：
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);
data:image/svg+xml<- 这对我来说看起来不像位图 - Siguza