SVG的出现带来了一次技术革命。变革了在Web上图文传递信息的方式，并将产生一种更适于Web信息发布的工作流模式，其中包括Web信息显示和印刷出版的组织方式。
SVG 使用 XML 编写：
//circle-demo.svg文件，以创建圆为例
<?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>
-
第二行包含了 XML 声明。请注意
standalone属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。standalone="no"意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。 -
第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的 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属性设置形状内的颜色。我们把填充颜色设置为红色。
DTD（Document Type Definition）即文档类型定义文件是XML1.0版规格的一部分，可根据DTD定义的语法规则来验证XML文档的合法性。
然后，将.svg文件引入HTML文档中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
//引入方式一
<object data="svg-demo.svg" width="300" height="100" type="image/svg+xml"></object>
//引入方式二
<embed src="svg-demo.svg" width="300" height="100" type="image/svg+xml"/>
//引入方式三
<iframe src="svg-demo.svg" width="300" height="100">
</iframe>
</body>
</html>
效果如下：
svg-circle.png
HTML5文档中可直接内嵌SVG图像
在
HTML4的规范中，SVG文件可通过以下标签嵌入HTML文档：<embed>、<object>或者<iframe>。而HTML5直接支持SVG内嵌。
<html> <!DOCTYPE html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
和前面的独立SVG文件相比，内置在HTML5文档中可以忽略文档DTD、SVG版本、命名空间等信息，语法变得很简练。
SVG形状：http://www.jianshu.com/writer#/notebooks/11594924/notes/14454477/preview
网友评论