如何使用可缩放矢量图形（SVG）-—

简单示例

我先给你看下边一个示例。之后我会详细讲一下，目前这只是一个非常简单的.svg文件。

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="100%" height="100%" fill="green" /> </svg>

复制以上的代码把它保存成 example.svg（你要重命名也行），然后在浏览器中打开你的.svg文件，你会在浏览器的左上角看到一个绿色的矩形。

一个使用SVG创建的绿色矩形

我们来仔细看一下代码。根元素是 <svg> ，它有几个属性：width、height以及一些XML索引代码。里边有一个 <rect>元素，也包含了几个属性，这是创建绿色矩形的代码部分。

目前我们只考虑xmlns部分，这和我们之前创建XHTML文件的方式非常像。它把SVG绑定到特定的命名空间，这样命名相似的元素之间就没有冲突了。除非你的页面需要通过一个XML解析器来运行，不然也可以不需要这个xmlns。

你会发现其实上边的代码不同的人写起来是不一样的。比如说，上边的文件没有xmlns和xlink也可以运行，所以你可以把上边的代码修改如下：

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

Mozilla建议不要使用doctype声明，因为它可能会在验证上出现问题。所以最好是指定SVG的版本以及设置baseProfile。

一般情况下我们不会直接在浏览器中加载.svg文件，更多时候我们会在一个HTML页面中嵌入SVG。看一下如何实现：

如何在HTML中显示SVG

无论你是喜欢在矢量编辑工具中创建SVG还是自己编写代码，这几个方法都可以帮你把SVG放到HTML页面中显示：

将 SVG 作为图像导入
将 SVG放入 iframe 中导入
将 SVG 作为object对象导入
将 SVG 作为一个data URI导入 (节选这篇文章，我只选择了该方法，需要其他方法的可以到原文查看，原文链接在文章最下方)
使用内联 SVG

将SVG作为Data URI导入

可以把SVG转成一个data URI,把它作为data导入。可以通过在线或离线的工具来进行转换（这有一个很棒的拖放工具），然后把你的data URI加入到一个<img>或<object>标签内，或是放到CSS中。

<img src="data:image/svg+xml;base64,[data]>

background: url(data:image/svg+xml;base64,[data]);

<object type="image/svg+xml" data="data:image/svg+xml;base64,[data]>
 fallback content here
</object>

上面的代码中的[data]，可以导入转换工具中返回的实际的data，这是我插入example.svg之后的效果

<object type="image/svg+xml" data="data:image/svg+xml;base64,PCEtLQo8c3ZnIHZlcnNpb249IjEuMSIKICAgICBiYXNlUHJvZmlsZT0iZnVsbCIKICAgICB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIKICAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgoKICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJncmVlbiIgLz4KPC9zdmc+Ci0tPgoKPHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgIGNsYXNzPSJleGFtcGxlIgoJeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgoJeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogCgk8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJncmVlbiIgLz4KPC9zdmc+Cg=="> fallback content here </object>

在一个HTML文档中加入上边的这个长长的代码，就可以看到一个绿色的矩形。

本文根据@Steven Bradley的《SVG Basics—How to Work with Scalable Vector Graphics》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.vanseodesign.com/web-design/svg-basics/

coding云截取了其中一部分，查看原文请到: http://www.w3cplus.com/svg/svg-basics.html

转载自：http://www.w3cplus.com/svg/svg-basics.html