如何解释.svg矢量图像的内部

我很好奇矢量图像（特别是.svg）是如何工作的

当我在记事本中打开.svg矢量图像时，我可以看到组成图像的XML数据（我举了一个示例供快速参考）

---

我知道前几个标记是元数据，下面的标记分别对应不同的行，但我不理解每个标记中的class、d和transform元素的实际含义，SVG

元素的

d

属性包含绘制线的说明。我认为它是SVG中最复杂的属性，但MDN在一篇非常容易理解的文章中对此进行了解释：简而言之，它告诉解释器连接点

x0，y0

，

x1，y1

，

x2，y2

。。。使用直线/曲线/圆弧或仅从一个点跳到嵌套

许多形状都可以用非常简单的方法定义，可以手工编写，也可以通过查看源代码来解释：比如

、

、

或

---

transform

属性更改元素的位置/大小/旋转，而无需重新计算源代码中的每个点，

class

用于样式设置，因此您可以独立于形状定义定义定义外观（颜色、线条厚度、填充）。

忽略类和变换，肉在th

d

属性中：谢谢，这正是我要找的。无论我搜索了多少，我只能找到向量图像工作原理的高级描述。如果你把这个作为一个答案，我可以标记为接受。