异常教程

SVG 参考手册（千字长文）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：为什么需要学习 SVG？

可缩放矢量图形（Scalable Vector Graphics，SVG）是一种基于 XML 的二维图形标记语言，广泛应用于网页设计、图标系统、数据可视化和交互式动画等领域。与位图图像（如 JPEG、PNG）不同，SVG 图形由数学公式定义，因此可以无限缩放而不失真，同时文件体积更小，加载速度更快。对于编程初学者和中级开发者而言，掌握 SVG 是构建现代 Web 应用的必备技能。本文将以“SVG 参考手册”为核心，从基础语法到高级技巧，结合实际案例，帮助读者快速上手并深入理解 SVG 的核心概念。

一、SVG 基础语法：搭建图形的“乐高积木”

1.1 SVG 的基本结构

每个 SVG 图形由一个 <svg> 根元素包裹，其核心属性包括 width、height 和 viewBox：

<svg width="200" height="200" viewBox="0 0 100 100">  
  <!-- 图形元素放在这里 -->  
</svg>
  • viewBox 的魔法：通过 viewBox 可以定义 SVG 的逻辑坐标系统，例如 viewBox="0 0 100 100" 表示画布的逻辑宽度和高度为 100 单位。即使实际 width 和 height 设为 200，图形也会按比例缩放，避免像素模糊。

1.2 常用图形元素

SVG 提供了多种基本形状元素，如同“乐高积木”般灵活组合：

元素描述示例代码
<rect>矩形<rect x="10" y="10" width="80" height="80" fill="blue" />
<circle>圆形<circle cx="50" cy="50" r="40" fill="red" />
<ellipse>椭圆形<ellipse cx="50" cy="50" rx="40" ry="20" fill="green" />
<line>直线<line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2" />

小贴士：fill 控制形状内部颜色，stroke 控制边框颜色，stroke-width 定义边框粗细。

二、路径（Path）：SVG 的灵魂武器

2.1 路径命令：像画笔一样“写”图形

路径 <path> 是 SVG 最强大的元素，通过 d 属性的指令组合，可以绘制任意形状。常用指令包括：

  • M (moveto)：移动画笔到指定坐标，例如 M 10 10。
  • L (lineto)：画直线到目标点，例如 L 50 50。
  • C (curveto)：绘制三次贝塞尔曲线，需要三个坐标：控制点和终点。
  • Z (closepath)：闭合路径，自动连接终点和起点。

示例代码：

<svg>  
  <path d="M 10 10 L 50 50 L 90 10 Z" fill="yellow" stroke="black" />  
</svg>

这段代码绘制了一个由三个点组成的三角形。

2.2 贝塞尔曲线：曲线的数学之美

贝塞尔曲线是路径中复杂形状的核心。例如，用 C 命令绘制心形：

<svg>  
  <path d="  
    M 50 30  
    C 60 10, 75 10, 85 30  
    C 100 50, 100 80, 85 100  
    C 75 120, 50 120, 35 100  
    C 20 80, 20 50, 35 30  
    Z  
  " fill="pink" />  
</svg>

通过调整控制点坐标，可以自由调整曲线的弧度，如同在纸上用铅笔勾勒形状。

三、颜色与渐变：为图形注入生命力

3.1 基础颜色与透明度

SVG 支持所有 CSS 颜色格式，包括十六进制、RGB、HSL 等，并可通过 opacity 属性设置透明度：

<rect x="10" y="10" width="100" height="100" fill="#ff0000" opacity="0.5" />

此代码绘制一个半透明的红色矩形。

3.2 渐变（Gradient）：从平涂到渐变的魔法

通过 <linearGradient> 和 <radialGradient>，可以创建线性或径向渐变：

<svg>  
  <defs>  
    <linearGradient id="myGradient">  
      <stop offset="0%" stop-color="red" />  
      <stop offset="100%" stop-color="yellow" />  
    </linearGradient>  
  </defs>  
  <circle cx="50" cy="50" r="40" fill="url(#myGradient)" />  
</svg>

<defs> 定义渐变模板，通过 url(#id) 引用，类似 CSS 的类选择器。

四、动画与交互：让 SVG“活”起来

4.1 CSS 动画：简单的旋转效果

通过 CSS 的 @keyframes，可以为 SVG 元素添加动画：

<svg>  
  <circle  
    cx="50" cy="50" r="40"  
    style="  
      animation: spin 2s linear infinite;  
    "  
  />  
</svg>  

<style>  
@keyframes spin {  
  0% { transform: rotate(0deg); }  
  100% { transform: rotate(360deg); }  
}  
</style>

此代码让圆形无限旋转。

4.2 SMIL 动画：SVG 内置的动画语言（已逐渐淘汰）

虽然现代 Web 开发推荐使用 CSS 或 JavaScript，但 SVG 的 SMIL 语法仍可用于简单动画：

<svg>  
  <circle cx="50" cy="50" r="40" fill="blue">  
    <animate  
      attributeName="cx"  
      from="50" to="150"  
      dur="2s"  
      repeatCount="indefinite"  
    />  
  </circle>  
</svg>

这段代码让圆形从中间水平移动到右侧。

五、实战案例：构建可交互的 SVG 图标系统

5.1 图标组件化：使用 <symbol> 和 <use>

通过 <symbol> 定义可复用的图标，再用 <use> 引用：

<svg style="display: none;">  
  <symbol id="star" viewBox="0 0 24 24">  
    <path d="M 12 2 L 16.708 8.09 L 20 9.51 L 14.586 14.908 L 15.554 22 L 12 18.272 L 8.446 22 L 9.414 14.908 L 4 9.51 L 7.292 8.09 Z" />  
  </symbol>  
</svg>  

<!-- 使用图标 -->  
<svg><use href="#star" width="32" height="32" /></svg>

这样可以避免重复代码，方便全局样式修改。

5.2 响应式 SVG：适配不同屏幕

通过 viewBox 和 CSS 媒体查询，让 SVG 自适应不同设备：

<svg viewBox="0 0 100 100" class="responsive-svg">  
  <!-- 图形内容 -->  
</svg>  

<style>  
.responsive-svg {  
  width: 100%;  
  height: auto;  
}  
@media (max-width: 600px) {  
  .responsive-svg {  
    width: 50%;  
  }  
}  
</style>

六、性能优化与工具推荐

6.1 减少冗余代码：SVG 优化技巧

  • 合并路径：使用矢量图形软件（如 Adobe Illustrator）导出时合并路径。
  • 简化坐标：避免不必要的小数点，例如 M 10 10 比 M 10.0 10.0 更简洁。
  • 使用 <symbol> 和 <defs>：减少重复代码。

6.2 工具推荐

  • 在线编辑器：SVG-edit
  • 代码压缩工具：SVGO
  • 库与框架：D3.js（数据可视化）、Snap.svg（简化 SVG 操作）

结论：掌握 SVG 的关键路径

通过本文，我们从 SVG 的基础语法、路径绘制、颜色渐变、动画交互到实战案例，系统梳理了其核心知识点。对于编程初学者，建议从简单形状开始，逐步尝试路径和动画；中级开发者则可以探索性能优化和高级交互。记住，SVG 的核心在于“数学表达图形”——它既是程序员的工具，也是设计师的画布。

无论是构建响应式图标系统，还是设计动态数据可视化，掌握 SVG 将为你的 Web 开发之路增添更多可能性。现在，不妨打开代码编辑器，亲手画出你的第一个 SVG 图形吧！

最新发布

查看更多文章