svg再html中页面,如何在网页中使用SVG

上一篇文章《HTML5 SVG简介》中，我们介绍了SVG的基本知识。在这篇文章中，我们将介绍在网页中使用SVG的各种方法，以及这些方法的浏览器持。

通过标签

这可能是最简单的使用SVG的方法，而且是开发者最熟悉的方法。SVG文件能够像位图一样通过标签在网页上使用。

上图是在标签中使用SVG文件的结果。注意，图像的大小也可以通过SVG文件来修改。同样可以像其它元素一样在SVG图像上使用CSS样式。

菏泽医技术唯一的缺点是：SVG图像可能包含动画，但链接里面的文件和任何脚本和交互的SVG代码部分将被忽略。

浏览器支持

通过CSS

可以通过CSS来有效的使用SVG：像位图一样，SVG文件能够通过background-image实现来渲染。

header { background: url(assets/svg/columns.svg); }

浏览器支持

直接使用SVG标签

HTML5支持直接在页面中写SVG文件。这种方式保留了SVG的特性，只要你愿意放弃一些向后兼容浏览器的问题，这是目前最好的调用SVG的方式。特德书写代码类似下面的代码：

HTML5 page with SVG Content

This is the markup of an ordinary HTML5 page.

浏览器支持

通过、和标签

当浏览器不支持SVG或使用受限制时，使用这些方法是最好的选择。

Warning for older browsers, or alternative content

Warning for older browsers, or alternative content

上面显示了所有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线条动态绘制文字轮廓边框动画)和内容过滤器等等，将在以后的文章中一一讲解。