SVG 以点、线、路径、填充描述图形，无论放大到多大都不会模糊，这是它和 canvas 位图的本质区别。rect、circle、ellipse、line、polygon、path 是基础图形元素，path 的 d 属性配合贝塞尔曲线命令几乎能画出任何形状。可以直接写进 HTML，也能用 img 引用或 JS 动态生成。
因为 SVG 的每个元素都是真实 DOM 节点，所以能绑定事件、用 CSS 改样式、被搜索引擎读取，做可交互图表与图标系统非常合适。常用技巧：use 引用 symbol 复用图标、viewBox 配合 preserveAspectRatio 控制缩放、stroke-dasharray 与 stroke-dashoffset 做路径描边动画。
<style> .ic { width: 90px; height: 90px; } .ic circle { fill: none; stroke: #4a9eff; stroke-width: 6; } .ic path { fill: none; stroke: #e78a3e; stroke-width: 5; stroke-dasharray: 220; stroke-dashoffset: 220; animation: draw 2.4s ease forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } </style> <svg class="ic" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="42"></circle> <path d="M28 52 L44 68 L74 36"></path> </svg> <div>矢量对勾：放大任意倍数都清晰</div>