内联SVG包含<；样式>元素将影响全局文档样式，就像任何其他附加样式表一样。
正如保罗·费尔南多
请参阅此示例，同时影响HTML元素：
<svg xmlns="http://www.w3.org/2000/svg" width=100 viewBox="0 0 15 10">
<path class="iconMain" d="M7.5 9l-6.5-4.2l0.5-0.9l6 4l6-4l0.5 0.9zm6.5-7.1l-0.5-0.9l-6 4l-6-4l-0.5 0.9l6.5 4.2z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width=100 viewBox="0 0 15 10">
<defs>
<style>
.iconMain {
fill: #9cbacf;
}
p{
color: red
}
body{
background: #ccc
}
h1{
color:green
}
</style>
</defs>
<path class="iconMain"
d="M7.5 9l-6.5-4.2l0.5-0.9l6 4l6-4l0.5 0.9zm6.5-7.1l-0.5-0.9l-6 4l-6-4l-0.5 0.9l6.5 4.2z" />
</svg>
<h1>New Heading</h1>
<p>New paragraph</p>
Use case 1: icons
常见做法：保持图标图形尽可能中性，以便于设置样式，如更改每个实例的填充/笔划颜色。
你可以从流行的图标库中获得灵感，如fontAwesome、羽毛图标、材质图标等。
主要概念：将您的图标组织为<；符号>元素并通过<；使用>元素。
svg{
width:1em;
border:1px solid #ccc;
}
<svg viewBox="0 0 15 10">
<use href="#angle-double-down" fill="red"/>
</svg>
<svg viewBox="0 0 15 10">
<use href="#angle-double-down" fill="green"/>
</svg>
<svg viewBox="0 0 15 10">
<use href="#angle-double-down" fill="purple"/>
</svg>
<!-- hidden svg icon asset -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 10" style="position:absolute; height:0; width:0;">
<symbol id="angle-double-down">
<path d="M7.5 9l-6.5-4.2l0.5-0.9l6 4l6-4l0.5 0.9zm6.5-7.1l-0.5-0.9l-6 4l-6-4l-0.5 0.9l6.5 4.2z" />
</symbol>
</svg>
在某种程度上，您还可以使用外部<；使用>引用，如
<svg viewBox="0 0 15 10">
<use href="icons.svg#angle-double-down" fill="green"/>
</svg>
然而，在渐变、遮罩剪辑路径等方面存在一些限制或问题。（相关”SVG忽略渐变样式“）。
Use case 2: complex SVG graphics with predefined colors
例如，当您显示复杂的矢量插图时，并不总是需要操纵SVG样式。
In this case – just use an <img> element referencing a SVG file.
This file can also contain style rules but it won t override any global HTML element styles.
<img src="data:image/svg+xml,%3Csvg xmlns= http://www.w3.org/2000/svg width= 100 viewBox= 0 0 15 10 %3E%3Cdefs%3E%3Cstyle%3E .iconMain %7B fill: %239cbacf; %7D body %7B background: red; %7D %3C/style%3E%3C/defs%3E%3Cpath class= iconMain d= M7.5,9,1,4.78789l.46713-.91645L7.5,7.85543l6.03287-3.984L14,4.78789ZM14,1.91646,13.53287,1,7.5,4.98349,1.46713,1,1,1.91646l6.5,4.2121Z /%3E%3C/svg%3E" />
否则，使用本机web组件可能是一个很好的选择，如此处：”如何更改svg元素的颜色？”
