HTML5 行内可伸缩图像(Inline SVG)
HTML5支持内联SVG.
什么是SVG?
- SVG代表可缩放矢量图形
- SVG是用来定义基于的网络矢量的图形
- SVG定义了XML格式的图形
- SVG图形放大或大小时不失去任何质量
- 每一个元素和属性在SVG文件可以动画
- SVG是W3C推荐的
SVG的优势
使用SVG的优势超过其它格式的图片(如JPEG 和 GIF):
- SVG图片可以通过任何文本编辑器创建和编辑
- SVG图像可以搜索,索引,修改,压缩
- SVG图像是可伸缩的
- SVG图像可以打印任何分辨率用高质量任何分辨率的图片
- SVG可缩放(图片缩放不会影响图片质量)
浏览器支持
IE9+, 火狐, 欧鹏, 谷歌, 和苹果浏览器都支持SVG.
直接在HTML页面中嵌入SVG
在HTML5中, 你可以直接在HTML页面中嵌入SVG元素:
例子
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="200">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
<html>
<body>
<svg width="300" height="200">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
亲自试一试 »
结果:
SVG和Canvas的不同
SVG是用XML描述二维图形的语言.
Canvas绘制2D图像和动画(使用JavaScript).
SVG是基于XML, 意味着在SVG DOM中的每个元素都是有效的.你可以引用JavaScript事件处理每个元素.
在SVG中, 每个绘制的图形都被作为对象. 如果SVG属性对象改变，浏览器会自动重新生成图形.
Canvas通过像素生成像素图形. 在canvas中, 一旦绘制了图像，会被浏览器忘记. 如果位置改变了，整个场景需要重置, 包括任何对象可能被覆盖的图形.
Canvas和SVG比较
下表展示了Canvas和SVG不同
| Canvas | SVG |
|---|---|
|
|
