SVG 是什么？

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 教程