11、数据可视化之 SVG 与 D3 形状生成指南

数据可视化之 SVG 与 D3 形状生成指南

1. SVG 简介

Scalable Vector Graphics（SVG）是万维网联盟（W3C）制定的成熟标准，用于在网页和移动平台上创建用户交互图形。它与 HTML 类似，能与 CSS 和 JavaScript 等技术在现代浏览器中和谐共存，是许多 Web 应用的核心组成部分。如今，SVG 在从数字地图到数据可视化等各个领域都有广泛应用。

1.1 SVG 的优势

• 基于矢量 ：SVG 图像基于矢量而非像素。基于像素的图像由位图组成，通过 x 和 y 坐标填充颜色色素；而基于矢量的 SVG 图像由一组使用简单相对公式描述的几何形状组成，并填充特定纹理。这种方式更适合数据可视化，因为用 SVG 中的线条、条形和圆形来可视化数据比在位图中操作颜色色素要简单得多。
• 可扩展性 ：SVG 图形由相对公式描述的几何形状组成，因此可以在不同大小和缩放级别下进行渲染，而不会损失精度。相比之下，基于位图的图像在调整为高分辨率时会出现像素化问题，即单个像素变得可见，而 SVG 则没有这个缺点。

1.2 SVG 的其他优点

优点	描述
可读性	基于 XML，是一种人类可读的标记语言
开放标准