矢量图形标记语言

本章介绍用于描述图像和绘制图形的标记语言 SVG,SVG 使用 XML 的语法标准,用于绘制和定义矢量图形,它符合 w3c 的标准。SVG 全称 scalable vector graphics ,使用它可以绘制三种类型的图形:矢量图形、图像、文本。SVG 是一整套矢量图形绘制协议,放在 HTML 中也可以是一个标准的 HTML 元素

1. 为什么使用 SVG

SVG 在既能满足现有图片的功能的前提下,又是矢量图,在可访问性上面也非常不错,并且有利于 SEO 和无障碍,在性能和维护性方面也比 icon,font 要出色许多,简单的理解,它是图形的另一种格式例如它和常见的图片格式 png、jpg、gif 等是一类。

2. 发展历史

  • 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 第二版,成为 W3C 目前推荐的标准;
  • W3C 目前仍正在研究制定 SVG 。

3. 语法标签简介

3.1 矩形

使用 rect 表示矩形,例如:

实例演示
预览 复制