26、SVG 样式设计全解析

SVG 样式设计全解析

1. SVG 格式简介

Scalable Vector Graphics（SVG）是一种用于定义基于矢量图形的 XML 格式，它是 W3C 的众多项目之一，自 1999 年就已开始。不过，SVG 的普及面临一些挑战，主要原因是人们对矢量图形不如对位图熟悉。很多人了解像 Adobe Photoshop 这样的图形处理软件，但深入研究 Adobe Illustrator 或其他矢量图形编辑工具的人较少。

位图图像以二维颜色值矩阵的形式存储，当方形颜色值（像素）足够小，人眼就会误以为看到了图像。而矢量图像的存储方式截然不同，它由一系列对象组成，这些对象可以是常见形状（如矩形和椭圆），也可以是由多个点和曲线值定义的复杂线条。这些对象又由顶点或其他基本形状描述符构成，存储的是这些顶点或形状描述符，而非像素矩阵。

与位图相比，SVG 有诸多显著优势，这些优势体现在图形创建和运行应用中的使用两方面：
- 图形创建方面 ：
- 可扩展性 ：以矢量格式创建和存储的图形具有可扩展性，无论存储时的大小如何，都能按需生成任意大小的位图，同一矢量图像可用于打印邮票或路边广告牌。
- 易于修改 ：组成复合图像的各个组件对象可单独存在并修改。例如，打开摩托车的矢量图像，可单独选择并修改前照灯的形状，这在位图图像中很难实现。
- 便于使用素材 ：使用基于矢量的库存图像通常更容易，因为可以进行修改以匹配项目的配色方案。
- 运行应用使用方面 ：