-前端数据可视化方案-SVG（一）.pdf

数据可视化SVG

刘军liujun

目录1邂逅SVG和初体验

content

2网格和坐标系

3视口和视图框

4绘制形状和路径

5绘制文字和图片

6SVG分组和复用

7填充和边框

coderwhy邂逅SVG

◼什么是SVG？维基百科介绍：

SVG全称为（ScalableVectorGraphics），即可缩放矢量图形。（矢量定义：既有大小又有方向的量。在物理学中称作矢

量，如一个带箭头线段：长度表示大小，箭头表示方向；在数学中称作向量。在计算机中，矢量图可无限放大而不变形）

SVG是一种基于XML格式的矢量图，主要用于定义二维图形，支持交互和动画。

SVG规范是万维网联盟(W3C)自1998年以来开发的标准。

SVG图像可在不损失质量的情况下按比例缩放，并支持压缩。

基于XML的SVG可轻松的用文本编辑器或矢量图形编辑器创建和编辑，并可以直接在浏览器显示。

◼SVG对浏览器的兼容性：

coderwhySVG历史

◼SVG1.x版本

SVG是W3CSVG工作组于1998年开始开发，而SVG1.0于2001年9月4日成为W3C推荐的标准。

SVG1.1于2003年1月14日成为W3C推荐的标准。该版本增加了模块化规范的内容。除此之外，1.1和1.0几乎没有区别。

SVGTiny1.2于2008年12月22日成为W3C推荐标准，主要是为性能低的小设备生成图形，但是后来被SVG2所弃用了。

SVG1.1第二版于2011年8月16日发布，这次只是更新了勘误表和说明，并没有增加新功能。

◼SVG2.0版本（推荐）

SVG2.0于2016年9月15日成为W3C候选推荐标准，最新草案于2020年5月26日发布。

SVG2.xChangeFromSVG1.x(/TR/SVG/changes.html)，比如：

✓RemovedthebaseProfileandversionattributesfromthe‘svg’element.

✓Addedtheabilitytouseautoforthewidthandheightattributeson‘image’.

✓Added‘lang’attributeon‘desc’and‘title’elements.

✓Removedthe‘xlink:type’,‘xlink:role’,‘xlink:arcrole’,‘xlink:show’and‘xlink:actuate’attributes.

✓Deprecatedthe‘xlink:href’attributeinfavorofusing‘href’withoutanamespace.

coderwhySVG优点

◼扩展好：矢量图像在浏览器中放大缩小不会失真，可被许多设备和浏览器中使用。而光栅图像（PNG、JPG）放大缩小会失真。

矢量图像是基于矢量的点、线、形状和数学公式来构建的图形，该图形是没有像素的，放大缩小是不会失真的。

光栅图像是由像素点构建的图像——微小的彩色方块，大量像素点可以形成高