SVG是什么？了解svg 编写svg 使用svg

SVG是什么？简单了解下

SVG是一种XML语言，类似XHTML，可以用来绘制矢量图形。

HTML提供了定义标题、段落、表格等等内容的元素。与此类似，SVG也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线。一个简单的SVG文档由<svg>根元素和基本的形状元素构成。另外还有一个g元素，它用来把若干个基本形状编成一个组。简

单的例子开始，看一下下面代码：

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

 复制并粘贴代码到文件demo1.svg。然后用Firefox打开该文件。 它将会呈现为下面的截图。

绘制流程包括以下几步：

1. 从svg根元素开始<svg>,具体详见https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Getting_Started。
2. 绘制一个完全覆盖图像区域的矩形 <rect/>，把背景颜色设为红色。
3. 一个半径80px的绿色圆圈<ci