现在位置: 首页 > SVG 教程 > 正文

SVG 简介


SVG,可缩放矢量图形(Scalable Vector Graphics),是一种用于描述二维图形的 XML 标记语言。

与位图图像不同,SVG 图像以文本形式存储,并且可以缩放到任意大小而不会失真,因为它们基于数学描述而不是像素。


学习之前应具备的基础知识:

继续学习之前,你应该对以下内容有基本的了解:

  • HTML
  • XML 基础

如果希望首先学习这些内容,请在本站的首页选择相应的教程。


什么是SVG?

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG 是 W3C 推荐标准

SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。

如需阅读更多有关 W3C 的 SVG 活动的信息,请访问我们的 W3C 教程


SVG 的历史和优势

SVG 历史:

SVG 由 1998 年成立的 W3C SVG 工作组启动开发,随着当年提交给 W3C 的六份标准提案应运而生:

  • 2001年9月4日,发布SVG 1.0。
  • 2003年1月4日,发布 SVG 1.1。
  • 2003年1月14日,推出SVG移动子版本:SVG Tiny和SVG Basic。
  • 2008年12月22日,发布SVG Tiny 1.2。
  • 2011年8月16日,发布SVG 1.1(第2版),成为W3C目前推荐的标准。
  • W3C目前仍正在研究制定SVG 2,目前最新的草稿发布见点击这里查看

SVG 优势:

  • 可缩放性:SVG 图像可以无损地缩放到任意大小而不失真。这是因为 SVG 是基于矢量描述的,而不是像素图像,因此在不同分辨率和尺寸的屏幕上都能保持清晰。

  • 文本性质:SVG 文件是基于XML的文本文件,易于编辑和维护。你可以直接编辑 SVG 文件来调整图形,也可以使用文本编辑器或代码编辑器来创建和修改 SVG 图像。

  • 交互性:SVG 允许添加交互式元素,如链接、动画和事件处理器。这使得 SVG 图像可以与用户进行交互,从而创建更丰富的用户体验。

  • 动画支持:SVG 支持使用 CSS 和 JavaScript 创建动画,使图形更生动。你可以通过 CSS 动画或 JavaScript 脚本来实现 SVG 图形的动态效果,如过渡、旋转、缩放等。

  • 可嵌入性:SVG 图像可以直接嵌入到 HTML 文档中,也可以作为外部文件链接到 HTML 文档中。这使得 SVG 图像可以与其他Web技术无缝集成,如 CSS、JavaScript 等。


查看 SVG 文件

SVG 在现代 Web 浏览器中得到广泛支持,包括 Chrome、Firefox、Safari等 。

可以通过内联 SVG 代码或外部 SVG 文件将 SVG 图像嵌入到HTML文档中。

  • Google Chrome:Google Chrome 是一个流行的现代 Web 浏览器,对 SVG 格式有很好的支持,并且提供了丰富的开发者工具。

  • Mozilla Firefox:Mozilla Firefox 也是一个广泛使用的 Web 浏览器,支持 SVG 图像的显示和渲染,并且支持大多数 SVG 特性。

  • Apple Safari:Safari 是苹果公司开发的 Web 浏览器,对 SVG 有很好的支持,适用于 Mac、iOS 等设备。

  • Microsoft Edge:Microsoft Edge 是微软公司推出的 Web 浏览器,支持 SVG 格式,并在不断改进 SVG 的支持。

  • Opera:Opera 是一款快速、安全的 Web 浏览器,对 SVG 有很好的支持,并且支持许多现代 Web 技术。

  • Brave:Brave 是一款注重隐私保护的 Web 浏览器,基于 Chromium 开发,因此也支持 SVG 图像。

  • Vivaldi:Vivaldi 是一款高度可定制的Web浏览器,也基于 Chromium 开发,并支持 SVG 格式。


创建SVG文件

以下是创建 SVG 文件的基本步骤:

  1. 打开文本编辑器:使用你喜欢的文本编辑器,如 Visual Studio Code 等,查看 VScode 教程

  2. 编写 SVG 代码:在文本编辑器中编写 SVG 代码。SVG 代码由 XML 标记组成,描述了图形元素、属性和样式。

  3. 保存文件:将编写好的 SVG 代码保存为以 .svg 扩展名结尾的文件,如 example.svg

  4. 预览 SVG 文件:用 Web 浏览器打开 SVG 文件,或者将 SVG 文件嵌入到 HTML 文档中,在浏览器中预览 SVG 图像。

以下是一个简单的 SVG 文件示例,创建一个包含一个圆形的 SVG 图像:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="blue" />
</svg>

这段代码描述了一个 SVG 画布,宽度为 200 个单位,高度也为 200 个单位。在画布上绘制了一个圆形,圆心坐标为(100, 100),半径为80个单位,填充颜色为蓝色。