约翰.邓恩曾经说过，没有人是孤岛，同样SVG也不是孤立存在的。当然，你可以将SVG看做是在Web浏览器或者SVG阅读器里面的一个独立文件，但是在另外的一些情况下，我们希望将图形集中在一个比较大的文档当中，其中包含文本，表单，或者其他使用SVG无法容易显示的内容。本篇文章描述了将SVG集成到HTML以及其他类型文档中的方式。
我们在上篇文章中绘制了一个小猫咪，现在我们分别将这个小猫咪以4种不同的方式插入到HTML页面，结果看起来几乎相同。但是每一种方法都有他的优点和局限性。
1. 将SVG作为图像
SVG是一种图像格式，因此可以使用与其他图像类型相同的方式将他包含在HTML页面中，具体可以采用两种方法：
- 将图像包含在HTML标记的img标签之内（当图像是页面的组成部分的时候，推荐使用这种方式）
- 或者将图像作为另外一个元素的CSS属性样式引入（当图像用来装饰的时候，推荐使用这种方式引入）
将SVG文件作为图像包含进来时，无论使用哪种方法，都具有一定的局限性。图像渲染（也就是SVG代码被转换成栅格图像作为显示）的时候与主页面是分离的，而且无法在两者之间进行通信。主页面上面的样式对于SVG是无效的。而且两者之间无法通信。主页面上面的样式对于SVG是无效的。所以如果你的图像包含文本或者其他要定义的相对于字体大小的长度值。那么你可能需要在SVG代码内部定义一个默认字体大小，此外，运行在主页面上面的脚本也无法感知或者修改SVG的文档结构。
在SVG作为图像引入到页面上面去的时候，大部分WEB浏览器都不会加载SVG自己引用的文件。包括其他图像文件，外部脚本，甚至是WEB字体文件。根据浏览器以及用户的安全设置不同，SVG文件内部定义的脚本也可能不会执行。URL片段也可能被忽略。在支持SVG图像的浏览器中。图像中的动画是支持的。
2.在<img>元素中包含SVG
HTML在<img>元素内部定义了一个空间，表示浏览器应该将图像绘制到这个空间里面去。要使用的图像文件指定在src（source）属性内。在img元素内包含SVG图像非常简单。只需要设置src指向WEB浏览器上SVG文件的位置就可以了。当然。你还应该使用alt或者title属性给出图像描述文本。以方便用户在不能看到图像的时候还是可以知道他代表什么。比如：
<img src="cat.svg" title="cat imgage" alt="stick FIgure of a cat" />
虽然大多数WEB浏览器现在都支持SVG作为图像，但是一些老式的浏览器却不知道该如何渲染文件。会显示一个破碎的文件图标（或者什么也不显示）。还有一些浏览器可能需要确定你的WEB服务器为以SVG结尾的文件声明了正确的媒体类型头
图像的高度和宽度可以使用标签属性或者CSS属性（优先考虑）设置，其他的CSS属性控制WEB页面内图像的位置。如果不指定img标签的尺寸。就会使用图像文件固有的尺寸，如果只指定高度（宽度），高度（宽度）就会安装比例进行缩放，以使得宽高比与图像文件固有的尺寸匹配。
对于栅格图像来说，它固有的尺寸就是他的像素尺寸。对于SVG来说，则更加的复杂。如果文件中的根元素<svg>带有VIewBox属性。那么将使用VIewBox计算宽高比。图像也会被缩放到以匹配指定的尺寸。如果Svg带有ViewBox而没有尺寸。那么viewBox的height和width就会作为像素尺长度。
如果说img元素和svg图像都没有任何关于图像尺寸的信息。浏览器应该为默认嵌入的内容应用默认的HTML尺寸。通常是150像素高，130像素宽。但是最好不要依赖默认尺寸。
3.在CSS中包含SVG
许多CSS样式属性都接受一个指向图像文件的URL作为属性值。最常用的就是background-image属性。它会应用样式元素的文本内容后面绘制这个图像（或者说多个叠加的图像）
默认情况下，背景图像会按照固定的尺寸进行绘制。并且会在垂直和水平两个方向上进行重复。以填满该元素。如果没有固定尺寸，SVG会被缩放到元素宽度和高度的100%，这个尺寸可以使用background-size属性显示的设置。重复模式和图像位置可以使用background-repeat和background-position设置。
div.background-cat {
background-img: url('cat.svg');
background-size: 100% 100%;
}
当多个小图标和标识符使用栅格图像的时候，通常会将所有的图像放在一个图像文件的网格之内。然后使用background-size和background-position来为每个元素设置对应的图像。这样浏览器就只需要下载一个图像文件。从而让网页显示得更快。这种组合图像文件被称为CSS精灵。这一个命名寓意着CSS精灵让事情变得更加的简单。但是我们应该尽量避免使得精灵文件太大。
除了用作背景图像之外，在CSS中SVG文件还能被用作list-image（用于创建装饰性项目列表）或者border-image（用于创建花哨的边框）。
