在本教程中，我们将讨论如何将SVG图像添加到你的网页中。与位图图像不同，SVG是XML标记，它描述了形状、线条和填充物，所以文档可以用多种方式使用。
在这个系列中，我们已经讨论了什么是SVG，为什么你应该考虑它们以及基本的矢量图。
在某些时候，你会想把你精心制作的SVG直接嵌入到一个网页中。至少有六种方法可以实现这一目标--但所有的方法都有优点和缺点。
1.直接将SVG XML内联到你的HTML页面中
SVG图片可以作为一个代码岛直接添加到你的HTML页面中，使用外部的<svg> 标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Embedded SVG</title>
</head>
<body>
<h1>Embedded SVG</h1>
<!-- SVG code -->
<svg width="300px" height="300px"
xmlns="https://www.w3.org/2000/svg">
<text x="10" y="50" font-size="30">My SVG</text>
</svg>
</body>
</html>
这种方法在所有的现代浏览器中都适用。SVG成为页面DOM的一部分，因此可以用CSS或JavaScript来操作它，也许可以添加动画或对点击事件做出反应。(注意，任何嵌入SVG本身的JavaScript都会被屏蔽）。
主要的缺点是，SVG必须被嵌入到每个需要它的页面中，而且可能需要重复使用可重复使用的图标。这增加了页面的重量，虽然HTML可以被缓存，但SVG的代码不能*（很容易）*在其他地方重复使用。
解决重复图片问题的一个办法是在每个页面上创建一个隐藏的SVG块（使用CSSdisplay: none ）。这可以选择包含多个使用id 的图片。
<svg xmlns="https://www.w3.org/2000/svg" style="display: none;">
<defs>
<symbol id="box" viewBox="0 0 32 32">
<title>box</title>
<rect width="32" height="32" fill="#00c" />
</symbol>
<symbol id="circle" viewBox="0 0 32 32">
<title>circle</title>
<circle cx="16" cy="16" r="16" fill="#c00" />
</symbol>
<defs>
</svg>
然后，单个项目可以使用SVGuse 元素进行任意次数的使用。
<svg width="20" height="20">
<use xlink:href="#box" />
</svg>
<svg width="30" height="30">
<use xlink:href="#box" />
</svg>
<svg width="40" height="40">
<use xlink:href="#circle" />
</svg>
原始图像仍然可以使用CSS进行样式设计，尽管不可能对<use> 本身应用额外的样式。
2.使用一个<img> 标签
SVG可以像其他图片一样被添加到你的网页中。
<img src="image.svg" alt="my image" />
如果你需要，可以添加通常的width 、height 、alt 和其他<img> 属性。
浏览器会像对待其他图片一样对待SVG。出于安全考虑，任何脚本、外部样式表、链接和其他SVG的交互性都将被禁用。
如果在一个单一的SVG中定义了多个图像，可以使用一个目标锚--比如myimage.svg#circle --但是这在旧的浏览器中是不可行的。
3.应用一个CSS背景图像
SVG可以被用作任何元素的CSS背景。
#myelement {
background-image: url('./image.svg');
}
采用UTF8编码的内联数据URI对于较小的、经常使用的、不太可能经常变化的SVG来说可能也很实用（并使整个样式表失效）。
.myelement {
background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 300 300"><circle cx="150" cy="150" r="100" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>');
}
像<img> 标签一样，当你使用这种方法时，脚本、链接和其他类型的交互性被禁用。
