《SVG精髓》学习笔记 | 彩图实例

《SVG精髓》第2版学习笔记

---

第1章 入门指南

SVG，即可缩放矢量图形 ( Scalable Vector Graphics )，是一种XML 应用，可以以一种简洁、可移植的形式表示图形信息。

 

1.1 图形系统

栅格图形( raster graphics ) 和矢量图形( vector graphics )。

 

1.1.1 栅格图形

在栅格图形系统中，图像被表示为图片元素或者像素的长方形数组。每个像素用其RGB颜色值或者颜色表内的索引表示。这一系列像素也称为位图（bitmap）, 通常以某种压缩格式存储。由于大多数现代显示设备也是栅格设备，显示图像时仅需要一个阅读器将位图压缩并将它传输到屏幕上。

 

1.1.2 矢量图形

在矢量图形系统中吗，图像被描述为一系列几何形状。矢量图形阅读器接受在指定坐标集上绘制形状的指令，而不是接受一系列已经计算好的像素。

 

1.1.3 栅格图形的用途

照片

 

1.1.4 矢量图形的用途

1. 计算机辅助绘图（Computer Assisted Drafting, CAD）程序，因为精确地测量和放大绘图以便查看细节非常重要。
2. 设计用于高分辨率打印图像的程序，例如Adobe Illustrator。
3. Adobe PostScript 打印和成像语言，打印的每一个字符都用直线和曲线来描述。
4. 基于矢量图形的Macromedia Flash 系统，用来设计动画、演示和网站。

由于大多数这类文件都编码为二进制格式或打包好的比特流，所以有一些工作很难做，比如让浏览器或者其他用户代理解析内嵌的文本，或者让服务器基于外部数据动态创建矢量图形文件。大多数矢量图形的内部规则都是专用的，浏览，创建这些图形的代码很难获得。

 

 

1.2 可缩放

可以缩放而不损失图像质量

PPI （pixels per inch）每英寸的像素点数量。

当显示程序放大栅格图像时，它必须以某种方式扩大每个像素。要想将图像放大至四倍，最简单的方式就是让每个像素放大为原来的四倍。

尽管可以使用边缘检测和反锯齿这类技术优化放大后的图像，但是这些技术很耗时。此外，由于栅格图像中的所有像素都是未知的，因此并不能保证相关算法能正确检测到边缘的形状。

另一方面，将适量图形放大为原来的四倍时，只需图像显示程序将形状的所有坐标都乘以4，然后用显示设备的完整分辨率重新绘制他们即可。

 

1.3 SVG的作用

1998年，万维网联盟成立了一个工作小组，负责开发作为XML应用的矢量图形表示方法。SVG是XML程序，所以图像的有关信息将存储为纯文本，而且它还具有XML 的开放性、可移植性以及交互性。

CAD 和图形设计程序通常使用特定的二进制格式存储绘图信息。当它们拥有导入和导出SVG格式图形的能力后，这类应用程序就有了一个通用的标准格式来交换信息。

由于SVG 就是一个XML 应用，因此它能与其他XML 处理程序结合使用。例如，数学教科书可以使用 XSL 来对说明性文本进行格式化对象，使用MathML 描述方程，以及使用SVG为方程生成图表。

SVG 工作组制订的规范是一个万维网联盟官方推荐规范。诸如Adobe Illustrator 和 Inkscape 这类应用程序都可以导入和导出SVG格式的绘图。在web中，许多浏览器都原生支持SVG，而且SVG 具有很多与HTML中CSS样式相同的变换和动画能力。由于SVG 文件就是XML，因此其中的文本可以被使用任何能够解析XML 的用户代理（指浏览网页或其他文件的设备或软件）读取显示。

 

1.4 创建一个SVG图像

以标准的XML处理指令和DOCTYPE声明开始。根元素