前置知识: HTML5

SVG 概述与环境配置

5 minBeginner2026/7/18

SVG 发展历程、核心特性、与 Canvas/位图对比、嵌入方式与开发环境。

1. SVG 是什么

SVG（Scalable Vector Graphics，可缩放矢量图形）是基于 XML 的矢量图像格式，由 W3C 组织制定并维护。与位图（PNG/JPG）不同，SVG 用数学公式描述图形，在任意缩放级别下都能保持锐利清晰，且文件体积通常更小。

1.1 核心特性

特性说明
矢量描述基于路径、坐标与几何命令，缩放不失真
基于 XML文本格式，可读、可编辑、可被搜索引擎索引
DOM 可编程每个 SVG 元素都是真实 DOM 节点，支持事件绑定与样式化
CSS 友好支持 fill、stroke 等大量 CSS 属性，可与 CSS 动画无缝集成
可访问性原生支持 <title>、<desc> 与 ARIA 属性
动画能力内建 SMIL 动画，也可通过 CSS/JavaScript 驱动

1.2 发展历程

时间事件
1998VML（Microsoft）与 PGML（Adobe/Sun）提交 W3C
2001SVG 1.0 规范正式发布
2003SVG 1.1 发布，引入模块化
2011SVG Tiny 1.2 成为推荐标准
2018SVG 2 候选推荐，融合 HTML5 与 CSS 新特性
至今现代浏览器全面支持 SVG 2 核心子集

2. SVG 与 Canvas 的对比

SVG 与 Canvas 是 Web 平台两大绘图技术，选型需根据场景决定。

维度SVGCanvas
描述方式矢量（保留模式）位图（立即模式）
DOM 节点每个图形都是 DOM 元素单一 canvas 元素
事件绑定可直接绑定到子元素需自行做命中检测
缩放表现无损缩放放大后锯齿明显
性能特征元素多时性能下降元素数量影响小
动画SMIL / CSS / DOM 操作requestAnimationFrame 重绘
文本可访问性原生支持需额外处理
适用场景图标、图表、UI 装饰、数据可视化游戏、图像处理、复杂粒子

选型建议：

  • 图形数量少（< 1000）、需要交互或可访问性 → SVG
  • 图形数量大、需要像素级操作、实时渲染 → Canvas
  • 数据可视化（折线图、柱状图）→ 两者皆可，SVG 更易调试

3. SVG 的嵌入方式

SVG 有四种主流嵌入方式，各自的能力与限制不同。

3.1 内联 SVG（推荐）

直接将 <svg> 写在 HTML 中，享有完整的 CSS 与 JavaScript 能力。

<!DOCTYPE html>
<html>
  <body>
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" fill="#4f5bd5" />
    </svg>
  </body>
</html>

3.2 <img> 标签引用

<img src="logo.svg" alt="Logo" width="200" height="100" />

限制：无法用外部 CSS 样式化内部元素，无法执行内部 JavaScript。

3.3 CSS 背景图

.hero {
  background-image: url('pattern.svg');
  background-size: cover;
}

限制：同 <img>，且无法交互。

3.4 <object> 或 <iframe> 嵌入

<object data="diagram.svg" type="image/svg+xml" width="800" height="600"></object>

独立文档上下文，内部脚本与样式独立运行，但与主页面通信需 postMessage。

3.5 四种方式能力对比

能力inlineimgCSS 背景object
外部 CSS 样式化是否否否
JavaScript 交互是否否仅内部
事件绑定是否否仅内部
可访问性强中弱中
缓存友好否是是是

4. 开发环境

4.1 编辑器与插件

  • VS Code：内置 SVG 预览，推荐安装 SVG 插件获得语法高亮与格式化
  • Figma / Illustrator / Inkscape：可视化设计工具，可导出 SVG 代码
  • SVGO CLI：压缩优化 SVG 文件体积

4.2 浏览器开发者工具

Chrome / Firefox 的 Elements 面板可直接编辑 SVG 属性并实时预览，是调试 SVG 的首选方式。

4.3 验证与优化工具

# 安装 SVGO 优化工具
npm install -g svgo

# 优化单个文件（移除冗余属性、合并路径、压缩体积）
svgo input.svg -o output.svg

# 批量优化目录
svgo -f input-dir -o output-dir

5. 第一个 SVG 示例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>第一个 SVG</title>
  </head>
  <body>
    <svg width="240" height="120" viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg">
      <!-- 渐变定义 -->
      <defs>
        <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#4f5bd5" />
          <stop offset="100%" stop-color="#00b894" />
        </linearGradient>
      </defs>
      <!-- 矩形 -->
      <rect x="20" y="20" width="200" height="80" rx="12" fill="url(#grad)" />
      <!-- 文本 -->
      <text x="120" y="65" text-anchor="middle" fill="#fff" font-size="20" font-family="sans-serif">
        Hello SVG
      </text>
    </svg>
  </body>
</html>

要点：

  • xmlns 命名空间在独立 SVG 文件中必需，内联在 HTML 中可省略
  • <defs> 存放可复用定义，不会直接渲染
  • url(#id) 引用 defs 中的渐变、滤镜等资源

6. 学习路径建议

阶段主题目标
入门语法、坐标系、基本图形、路径能手写常见图形
进阶文本、渐变、变换、滤镜、蒙版能还原视觉稿
高级动画、JavaScript、性能、图标系统能构建生产级可视化

下一篇将从 <svg> 根元素与文档结构开始，逐步展开 SVG 的核心语法。