SVG

hermanncain 2020-05-09

SVG

思考:位图和矢量图的区别?css canvas和svg又有什么区别?

位图的质量是根据分辨率判定的,分辨率越大,图像画面越清晰;矢量图没有分辨率的概念。位图放大后会越来越不清晰,像马赛克一样;矢量图则不会。

canvas类似于位图,放大后会不清晰,依赖于分辨率。可以引入jpg,png这类格式的图片,大量的大型网络游戏也是用的canvas画布绘制,以及统计图表等;但SVG则不依赖于分辨率,放大后也不会不清晰,适用于一些做图标,地图。

预定义形状

  • 矩形rect

  • 圆形circle

  • 椭圆elipse

  • 线line

  • 折线polyline

  • 多边形polygon

  • 路径path

相关推荐