SVG：从入门到实战的详细教程

最新推荐文章于 2025-08-28 18:36:58 发布

原创最新推荐文章于 2025-08-28 18:36:58 发布 · 1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#信息可视化

一、SVG 简介

（一）定义

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的标记语言，用于描述二维矢量图形。与传统的位图图像（如 JPEG、PNG）不同，SVG 图像是矢量图，由数学公式定义，因此可以无限放大而不失真。

（二）特点

可缩放性：SVG 图像可以在不失真的情况下无限放大或缩小，适合各种分辨率的显示设备。
文件大小小：SVG 文件通常比位图文件小，加载速度更快。
文本独立：SVG 图像中的文字独立于图像，保留可编辑和可搜索的状态。
交互性和动态性：SVG 支持用户交互，可以响应事件并允许动态修改图形。
样式控制：可以通过 CSS 控制 SVG 元素的样式，使设计更加灵活。
动画支持：SVG 支持内置的动画功能，无需额外插件。
搜索引擎优化：SVG 文件是 XML 格式，文本内容对搜索引擎是可读的，有助于 SEO。

二、SVG 的应用场景

（一）网页设计

SVG 适合用于网页中的图标、按钮、图表等元素，因为其矢量特性可以确保在不同分辨率下保持清晰。

（二）响应式设计

SVG 的可缩放性使其成为响应式设计的理想选择，能够适应不同设备和屏幕尺寸。

（三）数据可视化

SVG 可以与 JavaScript 结合，用于创建动态的数据可视化图表。

（四）图标和插画

SVG 格式适用于创建图标和插画，因为其文件大小小且可编辑。

三、SVG 的基础语法

（一）创建 SVG 元素

SVG 元素可以直接嵌入 HTML 中，或者通过 <img> 标签引入。以下是一个简单的 SVG 示例：

HTML复制

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

这个代码会在页面上绘制一个黄色填充、绿色边框的圆形。

（二）定义图形

SVG 提供了多种图形元素，如 <rect>（矩形）、<circle>（圆形）、<line>（线条）等。

（三）样式和动画

SVG 支持 CSS 样式和 SMIL 动画。例如，可以为 SVG 元素添加渐变效果：

HTML复制

<svg width="100" height="100">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="100" height="100" fill="url(#grad1)" />
</svg>

这个代码会创建一个从黄色渐变到红色的矩形。