svg是可编程、语义化、响应式的图形系统：图标通过/与css变量实现动态组件；数据可视化直接映射dom与数据；响应式插画依赖viewbox与媒体查询逻辑重排；交互动效利用dom事件与filter重构图形行为。
SVG在Web设计中不是简单替换PNG的“高清图”，而是一套可编程、可语义化、可响应的图形系统。它的创意价值，来自把图形当作代码来思考——形状是标签，颜色是属性，动画是逻辑，交互是事件。
图标系统：从静态贴图到动态语义组件
传统图标用多张PNG适配不同尺寸和状态，SVG只需一个文件就能覆盖所有场景。关键在于结构化组织：用<symbol></symbol>定义图标库，用<use></use>按需调用；再配合CSS变量控制fill、stroke、size，实现主题切换、状态反馈（如悬停变色、选中加粗）。比如一个“播放”图标，可通过修改stroke-dasharray和stroke-dashoffset属性，一键转为加载动画。
数据可视化：图形即数据映射器
SVG天然适合将数据结构直接转化为视觉元素。每个<circle></circle>可绑定data-id、data-value等自定义属性；<path></path>的d属性能由JavaScript动态生成折线或区域路径；配合transform和clipPath，轻松实现坐标轴缩放、图例联动、高亮聚焦。不需要额外框架，几行DOM操作就能完成基础图表的增删改查。
响应式插画：用视口与路径做空间协商
真正适配多端的插画，不是靠“等比缩放”，而是靠“逻辑重排”。通过viewBox设定原始坐标系，用preserveAspectRatio控制裁剪/对齐方式；再结合CSS媒体查询，对不同断点下的<g></g>组设置display、transform或opacity。例如移动端隐藏装饰性元素，桌面端展开细节层——图形结构不变，呈现逻辑随容器变化。
交互动效：把鼠标变成绘图笔
SVG元素是真实DOM节点，支持原生事件监听。点击触发<animate></animate>或GSAP补间；鼠标移动实时更新<path></path>的贝塞尔控制点；滚动时用IntersectionObserver驱动渐变填充或路径描边。更进一步，用<filter></filter>叠加模糊、光照、混合模式，让二维图形产生深度感——这些都不是“加动效”，而是重新定义图形的行为边界。
