SVG 是什么？

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

 

SVG 图形在放大或者改变尺寸的情况下，其图形的质量不会有所损失。

 

SVG 使用 XML 格式定义图形。

 

SVG 文件是纯粹的 XML。

 

SVG 是万维网联盟的标准。

 

SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。

 

 

—————————————————————————

 

一个实例：

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

</svg>

 

将上面的代码保存为一个文件，文件后缀名为 .svg，这就表示它是一个 SVG 文件。

 

你可以在这里查看例子的效果（仅用于支持 SVG 的浏览器，现代浏览器也没有不支持 SVG 的了）

 

代码解释：

 

第 1 行代码包含了 XML 文件的声明。standalone 这个属性规定这个 SVG 文件是否是“独立的”，还是有引用外部文件。standalone="no" 意味着 SVG 文件不是独立的，会引用外部文件，在这里是 DTD 文件。

 

第 2 第 3 行引用了这个外部的 SVG DTD，这个 DTD 位于“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”，含有所有允许的 SVG 元素。

 

SVG 代码以 <svg> 开始，以 </svg> 结束，这是根元素。width 和 height 可以设置这个 SVG 文档的宽度和高度。version 属性定义所使用的 SVG 的版本，xmlns 属性定义 SVG 命名空间。

 

SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义原点的 x 和 y 坐标(默认为0,0)，r 属性定义圆的半径。

 

stroke 和 stroke-width 属性控制图形的轮廓该怎么显示。这里把圆形的轮廓设置为 2px 宽，黑边框。

 

fill 属性设置形状内的颜色，我们把颜色填充为红色。

 

关闭标签 </svg> 的作用是关闭 SVG 元素和文档本身。

 

注意：所有的开启标签必须有关闭标签。

 

 

—————————————————————————

 

除了可以绘制圆形，SVG 代码还可以绘制矩形、椭圆、线条、多边形、折线、路径、滤镜以及渐变效果。

 

 

参考链接：

 

1. W3School SVG 教程