21xrx.com
登录
  

HTML5 SVG矢量图形

SVG是什么?

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

HTML<svg>元素

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

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

SVG 圆

SVG 矩形

SVG 圆角矩形

SVG 星星

SVG Logo

SVG Sorry, your browser does not support inline SVG.

SVG和Canvas之间的区别

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

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

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

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

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

Canvas和SVG之间的比较

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

CanvasSVG
  • 依赖分辨率
  • 不支持事件处理
  • 弱的文字渲染能力
  • 你可以保存结果图片为.png或.jpg
  • 比较适合图像密集的游戏
  • 依赖分辨率
  • 支持事件处理
  • 最适合应用里的大面积渲染(Google地图)
  • 如果图像很复杂会渲染的很慢(图像的所有对象都是一个DOM对象)
  • 不适合游戏应用

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

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复
21技术    www.21xrx.com 备案号:蜀ICP备17043188号-2