{ freetool24 }
Image Tools

开发者 SVG 指南：随处可用的可缩放图形

了解 SVG 的工作原理、如何优化 SVG 文件以适配 Web、内联与外部引用的使用模式，以及如何使用 CSS 和 JavaScript 为 SVG 添加动画和交互效果。

7分钟阅读

屏幕上色彩丰富的矢量插画

SVG（可缩放矢量图形）是唯一一种被浏览器原生支持、以结构化、可样式化、可脚本化的 XML 形式呈现的图像格式。同一个 SVG 文件，无论是在 1× 普通显示器、4K 屏幕，还是印刷广告牌上，logo 都能保持清晰锐利。掌握 SVG，能让你成为更出色的前端开发者。

SVG 与众不同之处

光栅格式（JPEG、PNG、WebP）以像素网格存储图像，放大后会模糊。SVG 则以数学描述的方式存储图形形状：

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#3b82f6" />
  <text x="50" y="55" text-anchor="middle" fill="white" font-size="14">Hello</text>
</svg>

这段代码会渲染出一个带有"Hello"文字的蓝色圆形——无论多大尺寸，始终清晰锐利。

适合使用 SVG 的场景：

  • Logo 和图标（必须在任何尺寸下保持清晰）
  • 插画和图表
  • 数据可视化图表（D3.js 输出 SVG）
  • 动画和交互图形
  • UI 图标（远优于图标字体）

不适合使用 SVG 的场景：

  • 照片和复杂的写实图像（请使用 JPEG/WebP）
  • 截图（请使用 PNG）
  • SVG 节点数量达到数千个时（性能会比 Canvas 更差）

SVG 核心元素

形状

<!-- 矩形 -->
<rect x="10" y="10" width="80" height="60" rx="8" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2"/>

<!-- 圆形 -->
<circle cx="50" cy="50" r="30" fill="#3b82f6"/>

<!-- 椭圆 -->
<ellipse cx="50" cy="50" rx="40" ry="20" fill="#10b981"/>

<!-- 直线 -->
<line x1="0" y1="0" x2="100" y2="100" stroke="#1e293b" stroke-width="2"/>

<!-- 多边形 -->
<polygon points="50,10 90,90 10,90" fill="#f59e0b"/>

<!-- 折线（开放形状） -->
<polyline points="10,80 30,20 50,60 70,30 90,70" fill="none" stroke="#ef4444" stroke-width="3"/>

路径——万能形状

<path> 元素可以通过一套包含移动、直线、曲线和弧线命令的微型语言来描述任意形状：

<path d="M 10 80 Q 50 10 90 80" fill="none" stroke="#8b5cf6" stroke-width="3"/>

路径命令：

  • M x,y — 移动到（抬笔）
  • L x,y — 画直线到
  • H x — 水平线
  • V y — 垂直线
  • Q cx,cy x,y — 二次贝塞尔曲线
  • C cx1,cy1 cx2,cy2 x,y — 三次贝塞尔曲线
  • A rx,ry rot large-arc sweep x,y — 弧线
  • Z — 闭合路径

路径通常不需要手写——设计工具会自动导出。但能读懂路径对调试和优化很有帮助。

viewBox：响应式 SVG 的关键

viewBox 属性是实现响应式 SVG 的核心：

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 内容绘制在 200×100 的坐标空间内 -->
</svg>

如果元素上没有设置 width/height，SVG 会像响应式图片一样填满其容器。在 CSS 中设置 width: 100%，它就能完美缩放。

.logo svg {
  width: 100%;
  height: auto;
}

在 Web 上使用 SVG 的三种方式

1. 外部文件（<img>）

<img src="logo.svg" alt="Company logo" width="200" height="80">

✅ 简单、可缓存、兼容性好
❌ 无法用 CSS 样式化，无法脚本操作

2. CSS 背景图

.icon {
  background-image: url('icon.svg');
  background-size: contain;
  width: 24px;
  height: 24px;
}

✅ 适合装饰性图标
❌ 无法对 SVG 内部元素应用 CSS 样式，无障碍性差

3. 内联 SVG（功能最强大）

<button>
  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
    <path d="M5 4l7 6-7 6" fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
  下一步
</button>

✅ 完整 CSS 控制、可脚本操作、使用 currentColor 继承文字颜色
❌ 无法缓存，会增大 HTML 体积

对于 UI 组件中的图标，内联 SVG 是最佳选择。雪碧图方案（使用带有 <symbol> 元素和 <use> 引用的单个 <svg>）可以在保留可样式化优势的同时实现缓存。

用 CSS 为 SVG 添加样式

内联 SVG 与普通 HTML 元素一样可以响应 CSS：

.icon {
  width: 24px;
  height: 24px;
  color: #3b82f6; /* 控制 currentColor */
}

.icon:hover {
  color: #1d4ed8;
}

在 SVG 中，使用 currentColor 替代硬编码颜色：

<path fill="currentColor" d="..."/>
<path stroke="currentColor" d="..."/>

这样图标颜色完全由 CSS 控制——暗色模式、悬停状态和主题切换都能轻松实现。

为 SVG 添加 CSS 动画

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

<svg viewBox="0 0 24 24">
  <circle class="spinner" cx="12" cy="12" r="10"
    fill="none" stroke="#3b82f6" stroke-width="2"
    stroke-dasharray="31.4" stroke-dashoffset="10"/>
</svg>

stroke-dasharray 和 stroke-dashoffset 是 SVG 最强大的动画属性——它们能实现路径自绘动画效果。

优化 SVG 文件

设计工具导出的 SVG 通常包含不必要的元数据、注释和编辑器 ID。一个典型的导出 SVG 可能有 15 KB，经过优化后可以缩减到 3 KB。

可以移除的内容：

  • <?xml version="1.0"?> 声明（内联时不需要）
  • xmlns:xlink、xmlns:dc、Adobe/Inkscape 元数据命名空间
  • 仅供编辑器使用的 id 属性
  • 注释和空白字符
  • 多余的分组元素 <g>
  • 默认属性值（fill="black"、opacity="1"）

SVGO 等工具可以自动完成这些操作。如果你需要为不支持 SVG 的平台准备光栅版本，可以使用我们的 SVG to PNG 转换工具将其转换为 PNG。

无障碍访问

用于传达实际内容的 SVG 需要提供无障碍描述：

<svg role="img" aria-labelledby="title desc">
  <title id="title">收入图表</title>
  <desc id="desc">柱状图展示了月度收入从 2026 年 1 月的 1 万美元增长至 6 月的 4.5 万美元</desc>
  <!-- 图表内容 -->
</svg>

装饰性 SVG（紧邻带文字标签的按钮旁的图标）应对屏幕阅读器隐藏：

<svg aria-hidden="true" focusable="false">...</svg>

快速参考：常用 SVG 属性

属性 说明
viewBox="x y w h" 定义坐标系
fill 形状填充颜色（none、十六进制、currentColor）
stroke 描边颜色
stroke-width 描边粗细
stroke-linecap 线端样式：butt、round、square
stroke-linejoin 转角样式：miter、round、bevel
opacity 元素透明度（0–1）
transform translate()、rotate()、scale()、skew()
clip-path 将内容裁剪至指定形状
filter 应用 SVG 滤镜（模糊、阴影等）

SVG 是 Web 开发中最被低估的工具之一。一旦理解了坐标系和样式模型，你就能构建出在任何尺寸下都完美呈现、并能动态响应用户交互的图标、插画、图表和动画。

返回所有文章浏览工具