SVG是什么?

• SVG代表可伸缩的矢量图形
• SVG用来定义网络图形
• W3C推荐使用SVG

HTML<svg>元素

HTML的<svg>元素(HTML5提出的)是SVG图形的容器.

SVG有几种方法来绘制路径:盒子,圆形,文字和图片.

SVG 圆

SVG 矩形

SVG 圆角矩形

SVG 星星

SVG Logo

SVG和Canvas之间的区别

SVG是一门语言用来绘制2D图形,用XML代码写.

Canvas绘制2D图像,用脚本(JavaScript)绘制.

SVG是基于XML的,换句话说每个元素在SVG DOM里都可以找到.你可以给任何一个元素添加JavaScript事件.

在SVG里,每个已绘制的形状都被记为一个对象.如果SVG对象的属性改变了,浏览器会自动再次渲染形状.

Canvas是以像素来绘制的.在canvas里,一旦图像被绘制了,浏览器将会忘记.如果图像里的某个对象位置需要改变,整个图像都需要重新绘制,包括整个图像的所有对象.

Canvas和SVG之间的比较

下面的表格显示了一些Canvas和SVG之间的重要差异:

学习更多关于SVG,请阅读我们的SVG教程.