当前位置主页 > 资料库 > 前端教程 > 如何在网页中使用SVG

如何在网页中使用SVG

2015-01-06

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

通过<img />标签

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

<img src="svg/twitter-icon.svg" alt="Twitter" style="width: 300px; height: 300px;">                                
                            

Twitter

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

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

浏览器支持

浏览器对SVG技术的支持-img

通过CSS

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

header { background: url(assets/svg/columns.svg); }                                
                            
浏览器支持

浏览器对SVG技术的支持-css

直接使用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>                                
                            
浏览器支持

浏览器对SVG技术的支持-svg-tag

通过<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浏览器。

浏览器支持

浏览器对SVG技术的支持-object

通过@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技术的支持-font-face

还有其它一些使用SVG的方法,例如:CSS路径动画(可以参考:html5 svg线条动态绘制文字轮廓边框动画)和内容过滤器等等,将在以后的文章中一一讲解。

Previous:
上一篇:HTML5 SVG简介
Next:
下一篇:如何在网页中制作响应式的SVG图像
返回顶部