# SVG

# SVG 是什么

SVG 或可缩放矢量图形是一种相对较新的万维网联盟 (W3C) 标准,被许多公司和组织用于创建和显示矢量图形材料。

SVG 是一种 XML 语言,它允许使用 JavaScript 在万维网上下文之内或之外动态创建内容。

从事互联网工作的基本都知道图片可以分为矢量图和位图,一般的我们可以认为Canvas对应位图,而SVG则对应矢量图

SVG全称可缩放矢量图形,是一种用于描述二维的矢量图像,基于 XML,本质上 SVG 相对于图像,就好比 HTML 相对于普通文本。

# SVG 历史

1999 年 2 月,万维网联盟发布了 SVG 的第一个公开草案 1。在前几年,人们对矢量图形的使用越来越感兴趣。Adobe Systems Inc. 在 1980 年代开发的 PostScript 页面描述语言为基于打印的社区提供了一种描述图像的方式,可以重新缩放以适应显示设备(通常是打印机)的分辨率。很自然地寻求一种类似的基于矢量的方法来进行基于 Web 的演示。

1998 年,Microsoft 引入了一种基于 XML 的语言,即矢量标记语言 ( VML )。它包含许多相同类型的功能,尽管很少有程序员采用 VML 作为表达媒介,而且 Microsoft 似乎已经放弃了 VML 的开发。

到 1999 年底,SVG 的开发工作正式开始。在两年内,出现了六个后续工作草案。IBM 和 Corel 各自发布了导出 SVG 的软件。IBM 发布了 SVG 查看器,一些软件计划发布了适用于各种操作系统的 SVG 绘图包。从那时起,支持和认可不断增加。

# SVG 的优点

与浏览器环境中使用的常规位图图形(例如 JPEG、GIF 和 PNG)相比,SVG 具有一些优势,原因如下:

  • 这些文件通常比位图小得多,因此下载速度更快。
  • 可以缩放图形以适应不同的显示设备,而不会出现与放大位图相关的像素化。
  • 图形是在浏览器中构建的,减少了通常与 Web 图像相关的服务器负载和网络响应时间。也就是说,一个典型的小公式描述从服务器发送到客户端。然后客户端根据它接收到的公式重建图像。
  • 最终用户可以与图形交互并更改图形,而无需进行复杂且昂贵的客户端-服务器通信。
  • 它为 SMIL(同步媒体集成语言)提供本机支持,这意味着动画,例如,支持更模拟的计时概念,从而将程序员从通常用于基于 JavaScript 的动画中的定时循环中解放出来。
  • 它响应 JavaScript:在 HTML 环境中使用的相同脚本语言。这意味着这两种类型的文档可以相互交流、共享信息和修改。

# 简要示例

不同的浏览器对 SVG 有不同的缩放机制,但是如果放大,访问者会注意到,与位图图形不同,线条在放大时不会变得颗粒状。

<svg height="100">
  <line x1="0" y1="100" x2="100" y2="0" stroke-width="2" stroke="black" />
</svg>
<svg height="200">
  <rect x="0" y="50" width="200" height="150" fill="#FFFF00" stroke="blue" stroke-width="5" />
</svg>
<svg height="100">
  <text x="15" y="45" font-size="40" fill="red">some text</text>
</svg>
some text

其他对象的定义类似,可以一个接一个地附加到显示窗口中,最近定义的元素出现在先前定义的形状之前或之上。

<svg height="200">
  <rect x="0" y="50" width="200" height="100" fill="#FFFF00" />
  <ellipse cx="100" cy="100" rx="100" ry="50" fill="red" />
</svg>

SVG 最灵活的原始对象之一是路径。<path> 使用一系列直线、样条(三次或二次)和椭圆弧来定义任意复杂的曲线,这些曲线结合了平滑或锯齿状的过渡。

<svg>
  <path d="M 100 0 L 200 100" stroke="black" stroke-width="12" />
  <line x1="100" y1="100" x2="200" y2="0" stroke-width="2" stroke="black" />
</svg>

路径的“C”部分描述了三次样条——路径从 (20, 40) 开始并朝向 (100, -30),基于处的切线起点。然后曲线向右下向 (180, 90),但最终目的地为 (20, 160)

<svg height="200">
  <path d="M 20 40 C 100 -30 180 90 20 160 L 120 160" stroke="black" fill="none" stroke-width="5" />
</svg>

# 学习资料

SVG Primer - W3.org (opens new window)
SVG 教程 - MDN (opens new window)
SVG 图像入门教程 - 阮一峰的网络日志 (opens new window)
SVG 动画精髓 - Segmentfault (opens new window)