SVG 矢量图形

martin_zhan

已于 2023-05-27 14:55:38 修改

阅读量1.6k

点赞数

分类专栏： javascript 文章标签： svg 矢量图 js折线图前端数据展示雷达图

于 2013-11-14 01:12:54 首次发布

本文链接：https://blog.youkuaiyun.com/saga194910/article/details/16106749

版权

javascript 专栏收录该内容

15 篇文章

订阅专栏

Svg: Scalable Vector Graphics

可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

特性及优点

1 用来定义用于网络的基于矢量的图形

2 使用 XML 格式定义图形

3 图像在放大或改变尺寸的情况下其图形质量不会有所损失

4 是万维网联盟的标准

5 与诸如 DOM和 XSL 之类的W3C标准是一个整体

6 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。

7 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）

8 可以与 Java 技术一起运行

9 是开放的标准

10 文件是纯粹的 XML

11 具有交互性和动态性

12 完全支持DOM

列了那么多基本可以忽视的，最实用的是用在展示大数据方面（折线图、k线图、雷达图等）

图片的数字化将图片存储为数据有两种方案。其一为位图，也被称为光栅图。即是以自然的光学的眼光将图片看成在平面上密集排布的点的集合。每个点发出的光有独立的频率和强度，反映在视觉上，就是颜色和亮度。这些信息有不同的编码方案，在互联网上最常见的就是RGB。根据需要，编码后的信息可以有不同的位(bit)数——位深。位数越高，颜色越清晰，对比度越高；占用的空间也越大。另一项决定位图的精细度的是其中点的数量。一个位图文件就是所有构成其的点的数据的集合，它的大小自然就等于点数乘以位深。位图格式是一个庞大的家族，包括常见的JPEG/JPG, GIF, TIFF, PNG, BMP。

第二种方案为矢量图。它用抽象的视角看待图形，记录其中展示的模式而不是各个点的原始数据。它将图片看成各个“对象”的组合，用曲线记录对象的轮廓，用某种颜色的模式描述对象内部的图案（如用梯度描述渐变色）。比如一张留影，被看成各个人物和背景中各种景物的组合。这种更高级的视角，正是人类看世界时在意识里的反映。矢量图格式有CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF,SWF, VML等等。

矢量图中简单的几何图形，只需要几个特征数值，就可以确定。比如三角形，只需要确定三个顶点的坐标。圆只需要确定圆心的坐标和半径。描述它的函数已知的曲线也只需要几个参数就能够确定。如正弦曲线、各种螺线等等。如果用位图记录这些几何图案，则需要包含组成线条的各个像素的数据。除了大大节省空间，矢量图还具有完美的伸缩性。因为记录的是图形的特征，图形的尺寸任意变化时，都只是做着相似变换，不会出现模糊和失真。相反位图的图片放大到超出原有大小时，各个像素点之间出现空缺，即使用某种算法填充，也会出现模糊锯齿等现象，不如矢量图精确。因而矢量图很适合用于记录诸如符号、图标等简单的图形。而位图则适合于没有明显规律的、颜色丰富细腻的图片。