SVG矢量图形快速入门

什么是SVG？

基本结构

绘制基本形状

核心与样式

什么是SVG？

SVG是一种基于XML的矢量图形格式。与JPEG、PNG等由像素点组成的位图不同，SVG使用数学公式来描述图形。这带来了几个核心优势：

无限缩放不失真：无论放大多少倍，边缘都保持清晰锐利，非常适合高清屏和响应式设计。
文件体积小：对于图标、Logo等简单图形，SVG文件通常比位图小得多。
可编程与交互：SVG是DOM的一部分，可以用CSS设置样式，用JavaScript控制行为和添加动画。
利于SEO：作为文本文件，搜索引擎可以读取和索引其中的文字内容。

基本结构

一个最简单的SVG文件结构如下：

复制代码

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 所有的图形代码都写在这里 -->
</svg>

<svg>：根元素，定义了整个画布。
width / height：定义画布的宽度和高度。
xmlns：XML命名空间，声明这是一个SVG文档，通常必不可少。

绘制基本形状

SVG提供了一系列预定义的标签，让你可以轻松绘制常见图形。

1. 矩形 <rect>

复制代码

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="60" fill="tomato" stroke="navy" stroke-width="3" rx="10" />
</svg>

x, y: 矩形左上角的坐标。
width, height: 矩形的宽和高。
fill: 填充颜色。
stroke: 描边（边框）颜色。
stroke-width: 描边宽度。
rx: 圆角半径，让矩形边角变圆滑。

2. 圆形 <circle>

复制代码

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="60" r="50" fill="lightseagreen" stroke="#333" stroke-width="2"/>
</svg>

cx, cy: 圆心的坐标。
r: 圆的半径。

3. 椭圆 <ellipse>

复制代码

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="60" rx="80" ry="40" fill="gold" stroke="#333"/>
</svg>

cx, cy: 椭圆中心的坐标。
rx, ry: 椭圆在水平和垂直方向的半径。

4. 线条 <line>

复制代码

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="10" x2="100" y2="90" stroke="black" stroke-width="3" />
</svg>

x1, y1: 线条起点的坐标。
x2, y2: 线条终点的坐标。

5. 多边形 <polygon>

复制代码

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 40,180 190,60 10,60 160,180" fill="lime" stroke="black" stroke-width="2"/>
</svg>

points: 一系列由空格或逗号分隔的坐标点，用于定义多边形的顶点。

核心与样式

强大的路径 `<path>`

<path> 是SVG中最强大、最核心的元素，它可以绘制任何复杂的图形，如图标、Logo、插画等。它通过 d 属性中的一系列命令来定义路径。

复制代码

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 绘制一个简单的房子形状 -->
  <path d="M50 150 L100 50 L150 150 Z" fill="none" stroke="black" stroke-width="3"/>
</svg>

d 属性中的常用命令：

M (Move to): 移动画笔到指定坐标，不画线。
L (Line to): 从当前位置画一条直线到指定坐标。
H / V: 画水平/垂直线。
C (Curve): 三次贝塞尔曲线，用于绘制平滑曲线。
Q (Quadratic): 二次贝塞尔曲线。
A (Arc): 椭圆弧。
Z (Close path): 闭合路径，从当前点画一条直线回到路径的起点。

建议：<path> 的命令比较复杂，初学者可以使用在线可视化编辑器（如 SVG Path Editor）来辅助学习和生成路径代码。

使用CSS美化SVG

SVG的样式可以像HTML一样用CSS来控制，这使得样式管理非常灵活。

内联样式 ：直接在元素上写 style 属性。

复制代码

<rect x="10" y="10" width="100" height="100" style="fill: red; stroke: blue;" />

内部样式表 ：在 <svg> 内部使用 <style> 标签。

复制代码

<svg>
  <style>
    .my-rect { fill: red; stroke: blue; }
  </style>
  <rect x="10" y="10" width="100" height="100" class="my-rect" />
</svg>

外部样式表 ：通过 <link> 标签引入外部CSS文件。

常用CSS属性：

fill: 填充色
stroke: 描边色
stroke-width: 描边宽度
stroke-dasharray: 创建虚线效果
opacity: 透明度

动画与交互

让图形动起来

SVG动画主要有三种方式：SMIL、CSS动画和JavaScript动画。

1. SMIL动画 (SVG原生动画) 这是SVG内置的动画方式，直接在SVG元素内部定义。

复制代码

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="100" r="40" fill="green">
    <!-- 动画：让圆的x坐标从50移动到150，持续2秒 -->
    <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

attributeName: 要动画化的属性名（如 cx, fill, r）。
from / to: 动画的起始值和结束值。
dur: 动画持续时间。
repeatCount: 重复次数，indefinite 表示无限循环。

2. CSS动画 对于位置、缩放、旋转、颜色等属性的动画，使用CSS @keyframes 通常性能更好，也更易于控制。

复制代码

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
    @keyframes move {
      from { transform: translateX(0); }
      to { transform: translateX(100px); }
    }
    .my-circle { animation: move 2s infinite; }
  </style>
  <circle class="my-circle" cx="50" cy="100" r="40" fill="green" />
</svg>

添加交互

因为SVG是DOM元素，所以可以直接添加JavaScript事件监听器。

复制代码

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="yellow" stroke="black" id="myCircle" />
</svg>

<script>
  const circle = document.getElementById('myCircle');
  // 点击圆形时改变填充色
  circle.addEventListener('click', () => {
    circle.style.fill = 'red';
  });
  // 鼠标悬停时放大
  circle.addEventListener('mouseover', () => {
    circle.style.transform = 'scale(1.1)';
  });
</script>

通过这种方式，你可以实现点击、悬停、拖拽等丰富的交互效果。

高级特性与工程实践

滤镜 `<filter>`

SVG滤镜可以创建模糊、阴影、发光等复杂的视觉效果。

复制代码

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义一个模糊滤镜 -->
    <filter id="blurFilter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <!-- 应用滤镜 -->
  <rect x="20" y="20" width="160" height="160" fill="blue" filter="url(#blurFilter)" />
</svg>

<defs>: 用于定义可复用的元素，如滤镜、渐变等。
<filter>: 定义一个滤镜。
feGaussianBlur: 高斯模糊滤镜原语。

响应式SVG

让SVG在不同尺寸的屏幕上都能完美显示，关键在于 viewBox 属性。

复制代码

<!-- viewBox="min-x min-y width height" -->
<svg viewBox="0 0 200 200" width="100%" height="auto">
  <circle cx="100" cy="100" r="80" fill="orange" />
</svg>

viewBox 定义了SVG内容的坐标系。结合 width="100%"，SVG会根据容器宽度自动缩放，同时保持内部图形的比例。

在真实项目中，我们通常不会手写所有SVG代码，而是会用到一些工具和工作流：

设计工具 ：使用 Figma 或 Inkscape (免费) 进行设计，然后导出为SVG文件。
代码编辑器 ：使用 VS Code ，并安装如 SVG Preview 这样的插件，可以实时预览代码效果。
优化工具 ：设计工具导出的SVG代码通常包含很多冗余信息。使用 SVGO (命令行工具) 或其在线版 SVGOMG 来压缩和优化SVG文件，减小体积。
图标管理 ：在大型项目中，可以使用 Iconify 等图标库来统一管理和使用SVG图标。

SVG矢量图形快速入门

什么是SVG？

基本结构

绘制基本形状

核心与样式

强大的路径 <path>

使用CSS美化SVG

动画与交互

让图形动起来

添加交互

高级特性与工程实践

滤镜 <filter>

响应式SVG

强大的路径 `<path>`

滤镜 `<filter>`