SVG 基本语法（保姆级教程）

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

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

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

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

前言

随着网页设计和交互需求的多样化，可缩放矢量图形（SVG）逐渐成为前端开发的重要工具。它不仅支持复杂的图形设计，还能与 HTML、CSS 和 JavaScript 无缝结合，实现动态效果。对于编程初学者和中级开发者来说，掌握 SVG 基本语法是迈向交互式视觉设计的第一步。本文将通过循序渐进的讲解，结合实际案例，帮助读者理解 SVG 的核心概念与应用场景。

SVG 的基础结构

什么是 SVG？

SVG 是一种基于 XML 的矢量图形语言，通过数学公式描述图形元素，而非像素点。这意味着 SVG 图形在缩放时不会失真，特别适合图标、图表和响应式设计。可以将 SVG 比作“数字乐高”——通过组合基础元素（如矩形、圆形、路径等），构建出复杂的视觉效果。

SVG 的基本框架

每个 SVG 文件或 HTML 中的 SVG 元素都以 <svg> 标签包裹。其核心结构如下：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">  
  <!-- 图形元素（如矩形、圆形等） -->  
</svg>  

• width 和 height 定义视窗大小，单位可以是像素（px）或百分比（%）。
• xmlns 是 XML 命名空间，必须包含以确保浏览器正确解析 SVG。

类比说明：
SVG 的视窗就像一张画布，<svg> 标签定义画布的尺寸和边界。开发者在画布内放置图形元素，如同在纸上绘制草图。

SVG 的核心形状元素

SVG 提供了多种基础形状元素，每个元素都有独特的属性和用法。以下是常见形状的语法与示例：

矩形（<rect>）

矩形是最简单的 SVG 形状之一。通过 x、y、width、height 属性定义位置和尺寸：

<rect x="20" y="20" width="100" height="50" fill="blue" stroke="black" stroke-width="2" />  

• x 和 y 表示矩形左上角相对于 SVG 视窗的坐标。
• fill 控制填充颜色，stroke 和 stroke-width 定义边框样式。

示例效果：
一个蓝色填充、黑色边框的矩形，左上角位于 (20, 20)，宽 100px，高 50px。

圆形（<circle>）

圆形通过 cx、cy 和 r 属性定义：

<circle cx="70" cy="70" r="50" fill="yellow" stroke="red" stroke-width="3" />  

• cx 和 cy 是圆心坐标，r 是半径。

椭圆（<ellipse>）

椭圆与圆形类似，但允许独立设置长轴和短轴：

<ellipse cx="150" cy="150" rx="80" ry="30" fill="green" />  

• rx 和 ry 分别是 x 轴和 y 轴的半径。

路径（<path>）：SVG 的终极表达工具

路径（<path>）是 SVG 最灵活的元素，通过 d 属性定义复杂的曲线和多边形。d 属性中的指令（如 M、L、C）对应绘图动作：

基本路径语法示例

<path  
  d="M 20 20 L 100 20 L 60 60 Z"  
  fill="none"  
  stroke="purple"  
  stroke-width="2"  
/>  

• M 表示移动到坐标（Move to）。
• L 表示绘制直线到指定坐标（Line to）。
• Z 表示闭合路径（Close path）。

类比说明：
路径指令如同“绘画机器人的指令集”，每个字母对应一个动作。例如，M 20 20 是“移动到画布上的 (20,20) 点”，L 100 20 是“向右画一条直线到 (100,20)”。

常用路径命令

样式与动画：让 SVG 活起来

内联样式与 CSS 结合

SVG 元素支持内联样式和 CSS 类，便于统一管理样式。例如：

<svg>  
  <style>  
    .highlight {  
      fill: red;  
      transition: fill 0.5s ease;  
    }  
  </style>  
  <rect class="highlight" x="10" y="10" width="50" height="50" />  
</svg>  

通过 CSS 过渡（transition），可以为图形添加平滑的视觉变化。

SVG 动画：SMIL 与 CSS 动画

SVG 支持两种动画方式：

1. SMIL 动画（基于 SVG 的原生动画标签）：

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

2. CSS 动画（更现代且兼容性更好）：

   @keyframes move {  
     0% { transform: translateX(0); }  
     100% { transform: translateX(100px); }  
   }  
   .animate-circle {  
     animation: move 2s infinite linear;  
   }  
   

   <circle class="animate-circle" cx="50" cy="50" r="30" />  
   

坐标系统与变换：控制图形位置与变形

SVG 的坐标系

SVG 默认坐标系原点（0,0）位于左上角，x 轴向右延伸，y 轴向下延伸。开发者可通过 viewBox 属性定义逻辑坐标系，实现响应式布局：

<svg width="300" height="300" viewBox="0 0 100 100">  
  <!-- 图形元素在此逻辑坐标系中绘制 -->  
</svg>  

viewBox 的四个参数为：min-x、min-y、width、height，通过它可缩放和裁剪图形。

变换（Transform）

通过 transform 属性，可以旋转、缩放或平移元素：

<rect  
  x="50" y="50" width="40" height="40"  
  transform="rotate(45 50 50) scale(1.2)"  
  fill="orange"  
/>  

• rotate(45 50 50) 表示以 (50,50) 为中心旋转 45 度。
• scale(1.2) 表示将元素放大 1.2 倍。

实际案例：绘制一个太阳

通过组合圆形和路径，我们可以绘制一个简单的太阳：

<svg width="200" height="200" viewBox="0 0 200 200">  
  <!-- 太阳主体（圆形） -->  
  <circle cx="100" cy="100" r="80" fill="#FFD700" />  
  <!-- 光芒（路径） -->  
  <path  
    d="M 100 180 L 100 150 L 130 150 L 100 120 L 70 150 Z"  
    fill="#FFD700"  
    transform="rotate(0 100 100) scale(1.5)"  
  />  
  <!-- 复制并旋转光芒 -->  
  <use xlink:href="#sun-ray" transform="rotate(45 100 100)" />  
  <use xlink:href="#sun-ray" transform="rotate(90 100 100)" />  
  <!-- 其他旋转角度的光芒（略） -->  
</svg>  

通过 <use> 元素和 xlink:href 复用路径，结合旋转，快速生成多个对称的光芒。

结论

SVG 基本语法为开发者提供了强大的图形表达能力，从简单的形状到复杂的动画，都能通过组合元素与属性实现。掌握 <svg> 的基础结构、核心形状元素、路径指令以及样式动画技巧后，读者可以尝试构建图标库、动态图表或交互式图形。随着实践的深入，进一步探索 SVG 的高级特性（如滤镜、剪裁路径）将打开更多可能性。记住，SVG 的核心逻辑在于“用代码绘制图形”，这种思维模式将帮助你将抽象概念转化为具体的视觉效果。

推荐阅读：

• 深入理解 viewBox 的响应式设计原理
• 使用 JavaScript 动态生成 SVG 图形
• SVG 与 CSS 变量的结合实践

通过持续练习与探索，SVG 将成为你前端工具箱中不可或缺的利器。