上一篇文章《HTML5 SVG简介》中，我们介绍了SVG的基本知识。在这篇文章中，我们将介绍在网页中使用SVG的各种方法，以及这些方法的浏览器持。
通过<img />标签
这可能是最简单的使用SVG的方法，而且是开发者最熟悉的方法。SVG文件能够像位图一样通过<img />标签在网页上使用。
<img src="svg/twitter-icon.svg" alt="Twitter" style="width: 300px; height: 300px;">
上图是在<img />标签中使用SVG文件的结果。注意，图像的大小也可以通过SVG文件来修改。同样可以像其它元素一样在SVG图像上使用CSS样式。
菏泽医技术唯一的缺点是：SVG图像可能包含动画，但链接里面的文件和任何脚本和交互的SVG代码部分将被忽略。
浏览器支持
通过CSS
可以通过CSS来有效的使用SVG：像位图一样，SVG文件能够通过background-image实现来渲染。
header { background: url(assets/svg/columns.svg); }
浏览器支持
直接使用SVG标签
HTML5支持直接在页面中写SVG文件。这种方式保留了SVG的特性，只要你愿意放弃一些向后兼容浏览器的问题，这是目前最好的调用SVG的方式。特德书写代码类似下面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 page with SVG Content</title>
</head>
<body>
<p>This is the markup of an ordinary HTML5 page.</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400px">
<path fill="#5DD7FC" d="M0.5… "/> <!--SVG document-->
</svg>
</body>
</html>
浏览器支持
通过<object>、<iframe>和<embed>标签
当浏览器不支持SVG或使用受限制时，使用这些方法是最好的选择。
<object type="image/svg+xml" data="twitter-icon.svg">
Warning for older browsers, or alternative content
</object>
<embed type="image/svg+xml" src="twitter-icon.svg" pluginspage="http://www.adobe.com/svg/viewer/install/" />
<iframe src="twitter-icon.svg">
Warning for older browsers, or alternative content
</iframe>
上面显示了所有SVG的特性，它们能很好的兼容IE浏览器。
浏览器支持
通过@font-face作为字体使用
大多数字体都是矢量图形，SVG可以通过CSS来作为文字嵌入到网页中，从而替代.woft、.otf 和 .eof 格式的文字。代码像下面这样：
@font-face {
font-family: GabbaGrabba; url('gabbagabba.otf’) format('opentype’),
url('gabbagabba.svg#gabba’) format('svg’);
}
因为它们缺乏真正的字体控制如字距和有限的浏览器支持，应该在使用SVG文字时给它们一个回退的方法。
浏览器支持
还有其它一些使用SVG的方法，例如：CSS路径动画（可以参考：html5 svg线条动态绘制文字轮廓边框动画）和内容过滤器等等，将在以后的文章中一一讲解。
