Web 开发者的高级 SVG 技术

掌握了 SVG 基础知识后，是时候探索可以将图形提升到新高度的高级技术了。

使用 SVG Sprites 提升性能#

与其加载多个 SVG 文件，不如将它们合并到一个雪碧图中：

<svg style="display: none;">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
  </symbol>
  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
  </symbol>
</svg>
 
<!-- 使用图标 -->
<svg class="icon">
  <use href="#icon-home"/>
</svg>

使用 CSS 为 SVG 添加动画#

使用 CSS 对 SVG 属性进行动画处理：

.animated-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s forwards;
}
 
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

使用 SVG 滤镜创建视觉效果#

使用 SVG 滤镜创建令人惊艳的效果：

<svg>
  <defs>
    <filter id="glow">
      <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <circle cx="50" cy="50" r="30" filter="url(#glow)"/>
</svg>

使用 viewBox 实现响应式 SVG#

在保持纵横比的同时使 SVG 具有响应性：

<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <!-- 内容 -->
</svg>

内联 SVG 与外部文件#

内联 SVG 的优势#

无需 HTTP 请求
可以使用 CSS 样式化
可以使用 JavaScript 动画
更适合关键图形

外部 SVG 的优势#

浏览器缓存
可跨页面重用
HTML 更简洁
更适合非关键图形

性能最佳实践#

最小化路径复杂度 - 更少的点 = 更快的渲染
对重复元素使用 <use> - 减少 DOM 大小
使用 SVGO 优化 - 删除不必要的数据
考虑懒加载 - 用于首屏之下的 SVG
使用 CSS 变换 - 硬件加速

可访问性注意事项#

使您的 SVG 具有可访问性：

<svg role="img" aria-labelledby="title desc">
  <title id="title">公司徽标</title>
  <desc id="desc">带有白色文本的蓝色圆圈</desc>
  <!-- 内容 -->
</svg>

JavaScript 集成#

使用 JavaScript 操作 SVG：

const circle = document.querySelector('circle');
circle.setAttribute('r', 50);
circle.style.fill = 'red';
 
// 使用 GSAP 或其他库进行动画
gsap.to(circle, {
  attr: { r: 100 },
  duration: 1
});

结论#

SVG 是一种功能强大的格式，拥有无限可能。通过掌握这些高级技术，您可以为 Web 创建高性能、可访问且视觉效果惊艳的图形。

继续实验，别忘了使用 Tiny SVG 优化您的 SVG 文件！