SVG是可编程、可响应、可语义化的DOM图形层，支持CSS样式、JS控制和无障碍属性；内联SVG最可控，需设viewBox实现响应式，避免外部引用导致样式与交互失效。
SVG在Web组件中不是简单“贴图”，而是可编程、可响应、可语义化的图形层。核心在于它能融入DOM树，接受CSS样式、JavaScript控制和无障碍属性，从而成为真正意义上的“活组件”。
内联SVG：最可控的组件集成方式
将SVG代码直接写入HTML标签内（如<svg>...</svg>），使其成为DOM的一部分。这种方式支持：
- CSS直接选中并样式化内部元素（例如
svg circle { fill: var(--primary); }） - JavaScript获取并操作具体形状（
document.querySelector('svg path')） - 添加
aria-label或<title>提升可访问性 - 响应式缩放依赖
viewBox而非固定宽高，适配容器变化
SVG作为自定义元素：封装交互逻辑
结合Web Components（如class extends HTMLElement），可创建带行为的SVG组件，例如：
-
<status-indicator value="error"></status-indicator>渲染对应颜色和图标 -
<progress-ring value="65"></progress-ring>动态计算<circle>的stroke-dasharray - 组件内部监听
attributeChangedCallback，响应props变更并重绘
SVG与CSS/JS协同的实用模式
不依赖框架也能实现高复用图形逻辑：
- 用CSS自定义属性（
--icon-size,--icon-color）驱动内联SVG的width、fill等 - 利用
<use>引用<defs>中的图形模板，实现图标复用与主题切换 - 对
<path>添加transition或用SMIL（基础动画）+ CSS@keyframes组合动效 - 为关键路径添加
data-id或role="button"，便于事件委托和测试定位
避免常见陷阱的实践要点
SVG组件易出问题的环节往往不在绘图本身：
- 外部引用SVG（
<img src="icon.svg">）无法被CSS样式穿透，也不响应JS事件 - 未设
viewBox的SVG会丢失比例，缩放时变形；建议统一使用viewBox="0 0 w h"并省略width/height - 从设计工具导出的SVG常含冗余
id、style和命名空间，上线前应精简（可用SVGO） - IE11已退出支持，但若需兼容旧环境，
<object>比<img>更利于脚本通信
