【入门】一篇短文读懂SVG

SVG是啥？

简单地说，SVG就是一种图片格式，是可缩放矢量图形（Scalable Vector Graphics）的缩写。电脑的图片格式往大了说，大概分成两个阵营：

• 位图（Bitmap）：我们平时接触到的图片大部分是位图，它就像在一张白纸上描点一样，图像由密密麻麻的小点构成，单位面积内的点堆得越多，图像越清晰。JPEG、PNG、GIF、BMP这些常见图片格式，包括数码相机、扫描仪等等设备产生的图片，通通属于位图家族。位图的优点是无论图像是什么类型，只要点阵足够密集，它总能很好地还原，位图的缺点是图像的质量与点阵密切相关，一旦把图片放大，图像边缘总会出现锯齿，另外，位图的图象数据量一般都比较大。

• 矢量图（Vector Graphics）：所谓矢量图，就是使用直线和曲线来描述的图形，这种作图方式就像真实世界人类按照图纸作图一样，比如这样一段描述：“从坐标（1，1）开始画一条直线到（20，20）”，“从坐标（100，95）处，画一个直径为6的同心圆”，等等。矢量图的重点是对于图形的描述（即图纸），只要按照图纸去执行，就产生了图像。矢量图的优点是与像素无关，放大后图片质量不会受损，又因为它记载的只是图像的“图纸”，所以它的数据量小。它的缺点是难以对真实的世界进行表达，比如一张实景照片，你很难用一张 “图纸” 去描述和还原。矢量图的常见格式不如位图那么多，但应用范围还是很广的，曾经的Flash，还有一些更为专业领域如AutoCAD、AI、CoreDraw等都是建立在矢量图基础上的系统。

SVG有啥用？

• 因为本质上矢量图是一张“图纸”，属于文本文件，因此数据量小，用在网页能提高加载速度。
• SVG是可伸缩的，而且放大也不会出现锯齿，特别适合用来做网页的ICON之类
• SVG是可以动态变化的，比如可以在不同场景下改变某一幅SVG图片的背景色，等等。

SVG入门

要精通SVG还是需要花费一定苦功的，本文化繁为简，略去大部分概念，只讲其中最基础的几个点，希望能起到抛砖引玉，让诸位看官能敲开SVG的大门。

首先要明白，SVG就是一张图，它可以通过像类似

下面就采用

• 首先是制作一张SVG矢量图，可以通过这个网站创建一些简单的图片：
  https://c.runoob.com/more/svgeditor/
  画好之后，选择【视图】【代码】生成SVG代码。另外，也可以通过【文件】【保存】将图形保存为一个独立的SVG文件。

• 随便找个文本编辑器，可以看到刚才那幅爱心图的代码：

<code>
 
 
  <title>background/<title>
  <rect>
  
   <rect>
  
 
 
  <title>Layer 1/<title>
  <path>
 
/<code>

• 在上面这些代码中，就本例而言，真正最关键的是<path>这一行，d是data的意思，也就是构成整个爱心轮廓的矢量数据（即图纸）。为了方便起见，本例中删除了一些与本例不相关的代码，经过整理的代码如下，将它保存，或者嵌入任何支持HTML5的浏览器中即可运行：/<path>

<code>
 

  
  <rect>
  <path>
 
/<code>

• 这段代码实现的效果很简单：当鼠标移动到爱心上面时，变成红心，挪开时变成黑心，仅此而已，但在整个切换过程中，我们并没有采用两幅图，也没有任何多余的JS代码，纯粹是靠修改SVG本身的属性来完成的，这和处理位图的方法存在着本质的区别。

1. <rect>是矩形框，它在本例的作用是产生一个白色的背景。/<rect>
2. <path>是矢量路径，它构成了爱心的轮廓。/<path>
3. 是元素分组，它将背景和爱心归为一组，当鼠标悬浮的时候爱心将整体变成红色，如果没有这个分组，则鼠标悬浮在爱心的“中空位置”时，不会触发hover效果。
4. #mysvg:hover { fill: red; }，这个就不赘述了，它属于CSS伪类的常规使用方法。

閱讀更多 編程雜家談 的文章

關鍵字: 短文 电脑 读懂