数据可视化基础——SVG 简介
可缩放矢量图形 Scalable Vector Graphics，SVG 是一个由万维网联盟 W3C 自 1999 年开始开发的基于文本的开放标准，是一种基于 XML 的标记语言，用于描述二维的矢量图形，它能渲染三种类型的图形对象：矢量图形、位图、文本，并和 CSS、DOM、JavaScript 等其他网络标准无缝衔接。
???? 所有的现代浏览器都支持SVG，但支持的版本可能不同，在 Can I use 上有一份比较详细的支持 SVG 的浏览器列表。很多图形处理软件提供可视化交互界面操作 .svg 格式的文件，如 Inkscape 和 Adobe Illustrator。
一个简单的 SVG 文档由 <svg> 根元素和基本的形状元素构成，在前端开发中一些简单的图形也可以手动编写 <svg> 标记来实现。
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- more tags here --> </svg> 复制代码
???? SVG 基于 XML 的标记语言，因此区分大小写，而且 SVG 里的属性值必须用引号引起来，就算是数值也必须这样做
???? 每一个 SVG 元素都应该声明命名空间 xmlns，以解决不同 XML 方言（SVG 是 XML 一种「方言」）混合使用产生的问题。以上示例 xmlns 属性意味着这个 <svg> 标签和它的子节点都属于 http://www.w3.org/2000/svg 这个 SVG 命名空间。命名空间仅仅只是一些字符串，因为 URIs 的唯一性从而被广泛使用，但它的本意并不是要「链接」到某个地址。
坐标定位
SVG 绘制图形时需要使用坐标系统/网格系统：
以页面的左上角为
(0,0)坐标点，坐标以像素为单位x 轴正方向是向右
y 轴正方向是向下。
viewport 和 viewBox
viewport 视口是一个表示当前可见的计算机图形区域的概念。在 Web 浏览器术语中通常与浏览器窗口相同，但不包括浏览器的 UI（如菜单栏等），视口外的内容在被滚动进来前都是不可见的。在 SVG 概念中，它相当于
<svg>元素的大小viewBox 是
<svg>标签的一个属性，包含四个参数（以空格或逗号分隔）<svg viewBox="min-x min-y width height">指定一个容器（宽和高）以显示图形元素，相当于规定了在<svg>元素中哪些部分是可视的，即设置了一个缩放和平移的初始状态设定不同的
viewBox属性值可以实现类似于缩放或平移的效果。修改容器的min-x和min-y可以实现整体「移动」容器内元素的效果；修改容器width和height可以实现整体「缩放」容器内元素的效果。???? 在
<svg>标签内的元素的坐标和宽度如果使用数值（而不带单位）时，就会以viewBox属性设定的值作为相对定位和相对单位。min-x和min-y指定了容器的左上角的坐标，即定义了父元素的坐标系统（设置了平移的初始状态）width和height指定容器的宽和高（设置了缩放的初始状态）
<svg width="200" height="200" viewBox="0 0 100 100"> 复制代码
这里定义的画布尺寸是 200*200px。但是 viewBox 属性定义了画布上可以显示的区域：从 (0,0) 点开始，100*100 的区域。这个区域会放到 200*200 的画布上显示，于是就形成了放大两倍的效果。
<!-- svg 元素大小相同 --> <svg style="width: 200px; height:200px; border:5px blue solid" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <!-- 较大的 viewBox，这样在容器内的圆的半径长度 4 是以 30 为基准进行解析，在该容器中图像就显得小 --> <circle cx="50%" cy="50%" r="4" fill="orange"/> </svg> <svg style="width: 200px; height:200px; border:5px blue solid" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- 较小的 viewBox，这样在容器内的圆的半径长度 4 是以 10 为基准进行解析，在该容器中图像就显得大 --> <circle cx="50%" cy="50%" r="4" fill="orange"/> </svg> 复制代码
???? 在 codepen 查看代码效果
???? viewBox 和 viewport 可能不一致，但有时候希望通过强制缩放，让 viewBox 铺满 viewport，可以使用属性 preserveAspectRatio 将图形拉伸占据整个视口，该属性设置拉伸过程中的长宽比例，以保持图形不变形
作者：Benbinbin
链接：https://juejin.cn/post/7025415537110810632