内联SVG：直接在HTML中嵌入矢量图以提升渲染与可控性
Direct embedding 的最大优势在于你可以像操作普通的HTML元素一样对矢量图进行样式和脚本控制，从而实现高度的定制化与交互性，且无需额外的网络请求来加载资源。加载性能的关键点在于减少请求，但会增加HTML体积，因此需要权衡使用场景。
将SVG直接内嵌到页面中，可以借助 CSS 和 JavaScript 进行实时修改，例如改变颜色、线宽、填充等属性，并且为无障碍友好提供 aria-label、、<desc>等辅助信息</strong>，提升可访问性。</p>
<pre><code class='language-html'><!-- 内联示例：直接在HTML中定义一个简单的圆形图标 -->
<svg width="48" height="48" viewBox="0 0 48 48" role="img" aria-label="圆形图标"><title>圆形图标
在设计系统中，内联SVG应配合可重复使用的符号结构，以便维护一致性和可访问性，并通过CSS变量动态切换主题色。
通过![]()
标签加载SVG：简洁且可缓存的方案
以缓存为核心的加载策略
使用 <img> 标签加载外部 SVG，可以让浏览器对该资源进行独立缓存，减少重复请求，尤其在多页面应用中尤为有效。外部资源的缓存命中率通常高于内联，并且可以通过 CDN 提升跨区域加载性能。
当将 SVG 放在单独的文件时，开发者可以独立地对该资源进行版本控制、压缩与缓存策略优化，从而提升整体加载速度和缓存命中率。
需要注意的是，某些浏览器对通过 src 引用的片段（如 #icon-search）的支持程度不同，因此在实现时应提供回退方案，确保在不支持的环境下也能正确显示。
通过
