svg:scalable vector graphics，即可伸缩的矢量图形，不管你对它放大多少，图形的质量都是不会变的，这不同于我们常见的位图。比如百度地图，你可以在手机上把它放大、放大、再放大，它不会因为你的放大而使质量有所受损，你也不会因为放大了它而看不清晰，这就是矢量图形。svg跟dom标准类似，都是属于万维网联盟的标准。
令任难以理解的是，svg是使用xml来定义的.......,它就是一个文本文件，里面的内容是xml格式的，这个xml被浏览器解析就显示成了svg矢量图片。基本上所有的浏览器都是支持svg的。
举个例子，新建一个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="pink"/>
</svg>使用浏览器打开这个demo.svg，结果如下：
说明一下：
描述svg图形的xml文件必须要以.svg结尾。
第一行包是XML 声明。standalone="no"表示这个svg不是"独立的”，因为它含有对外部文件的引用，引用的是外部的 DTD 文件。这个 DTD文件包含了所有允许的 SVG 元素。
SVG 代码要以 <svg> 元素开始，并以</svg>结束 。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果不设置这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。除了circle，svg还有其他标签，我之后会写到，比如rect用来定义一个矩形。
stroke 和 stroke-width 属性控制如何显示形状的轮廓。stroke-width="2"表示把圆的轮廓设置为 2px 宽，黑边框。
fill 属性设置形状内的颜色，这里设置为pink粉色。
svg文档在html中引入的四种方式
上节课我使用svg的xml语法编写了一个svg文档，在浏览器中打开的时候显示的样子是一个粉色的圆圈。但是，一个单独的svg文档存在的意义并不是太大，我们定义svg的目的还是在于在网页上显示它，那么如果我想使用svg，我就需要直接把我的demo.svg文档里的xml内容拷贝到一个html里面吗？就像下面这样demo.html：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body >
<?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="pink"/>
</svg>
</body>
</html>没错，这样是能显示，不过，如果我使用一个图片就要写上这么多的代码，我宁愿不使用这个图片。
那么在html中该怎么使用写好的svg文档呢？
一、embbed
demo.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body >
<embed src="demo.svg" width="300" height="100" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
</body>
</html>可以正常显示。
二、object标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body >
<object data="demo.svg" width="300" height="100" type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
</body>
</html>依然可以正常显示。
三、使用iframe来引入svg文档，iframe是浏览器兼容最好的一种方式,如果你要使用svg的话，建议还是使用iframe
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body >
<iframe src="demo.svg" width="300" height="100"></iframe>
</body>
</html>显示结果：
四、在html5中其实有更简单的写法，即直接使用svg标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body >
<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="#123456"/>
</svg>
</body>
</html>结果如下：
834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
