SVG 教程


SVG 意为可缩放矢量图形(Scalable Vector Graphics)。

SVG 是一种用于描述二维图形的 XML 标记语言,与位图图像不同,SVG图像以文本形式存储,并且可以缩放到任意大小而不会失真,因为它们基于数学描述而不是像素。

SVG 图形是可伸缩的,无需分辨率依赖,这意味着它们可以在不失真的情况下被放大或缩小。

SVG 广泛应用于网页设计、图标制作、数据可视化和其他图形相关的领域。


SVG 的主要特点

  • 矢量图形:SVG 使用基于路径的矢量图形,这意味着图形可以无限放大而不失真。
  • 可伸缩性:SVG 文件可以在不同的分辨率下保持清晰,适合用于响应式设计。
  • 互动性:SVG 可以与 JavaScript 结合,实现动画和交互效果。
  • 集成性:SVG 可以直接嵌入 HTML5 中,无需使用外部文件。
  • 兼容性:大多数现代浏览器都支持 SVG。

SSVG 的应用场景

  • 网页图标:由于 SVG 的可伸缩性,它非常适合用来制作网页图标。
  • 数据可视化:SVG 常用于图表和图形的创建,如条形图、饼图等。
  • 动画:SVG 可以与 CSS 和 JavaScript 结合,创建复杂的动画效果。
  • 游戏开发:在某些情况下,SVG 也被用于创建简单的游戏图形。
  • 设计原型:设计师可以使用 SVG 来创建可交互的设计原型。

一个简单的实例

我们创建了一个简单的红色圆形,黑色边框:

SVG 实例

<html> <body> <h1>My first SVG</h1> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> </body> </html>

尝试一下 »

点击 "尝试一下" 按钮查看运行结果.

SVG 实例

我们可以在线编辑 SVG 实例,并且在线查看运行结果!

在线实例

SVG 参考手册

在菜鸟教程中, 我们为您提供完整的 SVG 参考手册,其中列出了所有 W3C 推荐标准(SVG Version 1.1)中的 SVG 的元素。

SVG 参考手册

SVG 在线编辑器