SVG基础——如何使用可缩放矢量图形（SVG）
作者：彦子 日期：2015-04-11 点击：583
每次我讲到图像的时候，我都会提到，在可能的情况下，对于位图来说，可缩放矢量图形（SVG）都是最好的选择。上次我给别人提建议的时候，我意识到我没有自己想象中的那么了解SVG。
我之前写过一两篇关于SVG的文章，但也仅是我自己实践经验的一点延伸。我打算今天开始写SVG系列的文章，接下来的几个星期我会介绍一些SVG的基础知识，还会在年尾的时候增加额外的主题来重温这一年讲解的SVG。
什么是SVG？我们为什么要使用它？
为了避免有人对于SVG完全不了解，我打算从最最基础的东西开始讲起。首先，讲两个关于SVG的重要问题：什么是SVG？我们为什么要使用它？
SVG是基于XML的语言，主要用于绘制二维图像。你可以通过编写代码来展示简单的或者是复杂的图形，例如：直线、曲线等等。或者只要你想，你也可以在矢量图形编辑程序中创建这些直线、曲线，然后让程序导出代码。
为什么要选择SVG？主要有这几方面的原因：
· SVG 是可伸缩的矢量图形，在浏览器中改变尺寸，其图形质量不会有所损失。
· 相比其它位图，SVG图像文件更小，可压缩性更强。
· SVG 可以被记事本等阅读器、搜索引擎访问。
· SVG 图像中的文本是可选的，同时也是可复制的。
· SVG 图像可以与DOM，CSS和JavaScript交互。
· SVG 可以制作成整体或局部动画。
浏览器对于SVG的支持是很好的，只要你不需要支持IE8及其以下版本。可能大多数人都是，但不是所有，只要你不介意使用polyfill来增加对一些旧版浏览器的支持。
你可以使用一个矢量图形工具（比如Adobe illustrator）来创建SVG图像。如果你常用的矢量编辑软件不支持导入导出SVG文件的话，你最好找一个更好的矢量编辑工具。
你也可以打开文本或代码编辑器，通过编写代码来创建你想要在软件中绘制的图像。但是，除了一些最简单的例子，我希望你还是使用图形应用软件来创建大部分在网页浏览的SVG。
你可能会觉得奇怪，我为什么要花费几个星期的时间来告诉你怎么使用代码来创建SVG？因为不管你最初是如何创建SVG图像的，你可能都需要修改和维护一些通过图形编辑器导出的SVG代码。
简单示例
我先给你看下边一个示例。之后我会详细讲一下，目前这只是一个非常简单的.svg文件。
<svgwidth="300"height="200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rectwidth="100%"height="100%"fill="green" />
</svg>
复制以上的代码把它保存成 example.svg（你要重命名也行），然后在浏览器中打开你的.svg文件，你会在浏览器的左上角看到一个绿色的矩形。
一个使用SVG创建的绿色矩形
我们来仔细看一下代码。根元素是 <svg> ，它有几个属性：width、height以及一些XML索引代码。里边有一个 <rect> 元素，也包含了几个属性，这是创建绿色矩形的代码部分。
目前我们只考虑xmlns部分，这和我们之前创建XHTML文件的方式非常像。它把SVG绑定到特定的命名空间，这样命名相似的元素之间就没有冲突了。除非你的页面需要通过一个XML解析器来运行，不然也可以不需要这个xmlns。
你会发现其实上边的代码不同的人写起来是不一样的。比如说，上边的文件没有xmlns和xlink也可以运行，所以你可以把上边的代码修改如下：
<svgversion="1.1"
baseProfile="full"
width="300"height="200"
xmlns="http://www.w3.org/2000/svg">
<rectwidth="100%"height="100%"fill="green" />
</svg>
Mozilla建议不要使用doctype声明，因为它可能会在验证上出现问题。所以最好是指定SVG的版本以及设置baseProfile。
一般情况下我们不会直接在浏览器中加载.svg文件，更多时候我们会在一个HTML页面中嵌入SVG。看一下如何实现：
如何在HTML中显示SVG
无论你是喜欢在矢量编辑工具中创建SVG还是自己编写代码，这几个方法都可以帮你把SVG放到HTML页面中显示：
· 将 SVG 作为图像导入
· 将 SVG放入 iframe 中导入
· 将 SVG 作为object对象导入
· 将 SVG 作为一个dataURI导入
· 使用内联 SVG
将SVG作为图像导入
这可能是将SVG导入HTML文档的最简单的方法。用你的矢量工具创建一个图像（我使用的是iDraw），将图像导出为.svg文件，然后把它加到一个普通<img>标签内。
<imgsrc="example.svg"alt="MySVG example">
你需要确保你的服务器支持.svg文件，可能大多数都是支持的，但是还是查一下的好。在Apache的.htaccess文件中添加如下的内容：
AddTypeimage/svg+xml svg svgz
AddEncoding gzipsvgz
说实话，你可以看到这里就停住，然后愉快地使用SVG去。想想看，SVG很复杂，你可以直接在你的矢量编辑器中创建SVG文件，然后将它们导入作为你将使用的图像。当然，你如果在这里停下的话，你可能会错过很多SVG可以完成的东西。
相比直接把SVG图像加入到一个HTML的<img>标签内，你也可以在CSS中把.svg文件作为一个background-image导入。
.my-image {
background: url("example.png"); /* fallback */
background-image: url("example.svg");
}
注意要加一个备用的.png图像，以防浏览器无法显示svg。
这很简单，是吧？你只是把它作为一个普通的图像加载，只不过这个文件的后缀是.svg，而不是.jpg，.png，或者.gif。
但也有一点不足。当把SVG图像作为一个图片放进HTML或者CSS时，你没有办法通过CSS对这个SVG进行更多的控制。有些情况下可能没有问题，比如你只是想要SVG作为一个静态图像，或者你不想再控制什么它的东西。
使用Object 或iframe导入SVG图像
和把SVG作为图像导入相似，你可以把它作为一个<object>导入，代码如下：
<objecttype="image/svg+xml"data="example.svg"class="example">
My Example SVG <!-- fallback -->
</object>
通过data属性链接要导入的.svg文件，另外我还为这个元素加了一个class，用来定义CSS样式。
.example {
display: block;
margin: 5em auto;
border-radius: 10px;
}
相比使用<object>，你也可以把.svg文件嵌入到一个<iframe>框架内，这同样会生成一个绿色的圆角矩形。
<iframesrc="example.svg"class="example"></iframe>
同样也是非常简单。在<iframe>框架中你可以使用CSS控制SVG的样式，就像刚才把它嵌入到<object>中一样。我在这里也加入了一个.example的class，和前面 <object> 的代码是一样的CSS样式。
将SVG作为Data URI导入
可以把SVG转成一个data URI,把它作为data导入。可以通过在线或离线的工具来进行转换（这有一个很棒的拖放工具），然后把你的data URI加入到一个<img>或<object>标签内，或是放到CSS中。
<imgsrc="data:image/svg+xml;base64,[data]>
background:url(data:image/svg+xml;base64,[data]);
<objecttype="image/svg+xml" data="data:image/svg+xml;base64,[data]>
fallback content here
</object>
上面的代码中的[data]，可以导入转换工具中返回的实际的data，这是我插入example.svg之后的效果
<objecttype="image/svg+xml"data="data:image/svg+xml;base64,PCEtLQo8c3ZnIHZlcnNpb249IjEuMSIKICAgICBiYXNlUHJvZmlsZT0iZnVsbCIKICAgICB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIKICAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgoKICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJncmVlbiIgLz4KPC9zdmc+Ci0tPgoKPHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgIGNsYXNzPSJleGFtcGxlIgoJeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgoJeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogCgk8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJncmVlbiIgLz4KPC9zdmc+Cg==">
fallback content here
</object>
在一个HTML文档中加入上边的这个长长的代码，就可以看到一个绿色的矩形。
使用内联SVG
你不必一定把SVG放在一个单独的文件中，因为你可以直接在HTML中嵌入SVG。
<body>
<svgversion="1.1"
baseProfile="full"
width="300"height="200"
xmlns="http://www.w3.org/2000/svg"
class="example">
<rectwidth="100%"height="100%"fill="green" />
</svg>
</body>
你甚至可以再简写成这样：
<body>
<svgwidth="300"height="200"class="example">
<rectwidth="100%"height="100%"fill="green" />
</svg>
</body>
因为你在代码是嵌入在HTML中的，所以它不会通过一个XML解析器，也不需要包含所有的XML的信息。下面是一些内联SVG，显示的是一个绿色的矩形。
对于简单的图形，使用内联SVG是非常方便的。但是很多时候我们代码越复杂，就需要更好地模块化这些内容，所以还是需要把SVG移到一个单独的文件中存放。
在SVG中嵌入image
相比把一个.svg文件嵌入到一个<img>标签中，反过来把一个位图图像嵌入到SVG代码中也是可以的。
<svgversion="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300"height="200">
<imagewidth="300"height="200"xlink:href="path-to-image.png"/>
</svg>
如果嵌入的位图图像，你没办法单独地去控制图像中各个部分的样式，你也可以使用其他的SVG特性，比如剪裁、遮罩，还有滤镜，这些我都会在接下来的文章中讲解。
SVG和WordPress
因为我经常使用WordPress进行工作，我想你们中的大部分人也是，所以在WordPress的文章和页面中引入SVG是否需要额外的必要的东西呢？需要的。
把下面的这段代码放到你的functions.php文件中，这样你就可以通过WordPress的后台管理上传.svg文件。
functioncc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return$mimes;
}
add_filter('upload_mimes', 'cc_mime_types');
如果你不想要把你的主题中的function.php文件弄乱，你可以下载一个插件。注意，WordPress会默认你的SVG是1px*1px的（或近似的大小）,除非你做了明确的说明。
因为一些原因，WordPress并不太支持内联SVG，但是我找到了一个解决办法。如果把内联SVG全部写在一行上，WordPress就会显示了。
<svgwidth="300"height="200"><rectwidth="100%"height="100%"fill="green" /></svg>
Galen Gidman提供了一个在WordPress的文章和页面中嵌入SVG的不同的解决方案，他的方法是使得它更易于维护，这样在网站的不同页面也可重复使用。
总结
SVG并不难使用。尤其，最简单的是，你可以在一个矢量图形应用程序中创建一个图像，然后将图像导出为一个.svg文件，然后把它放入到一个<img>、<object>或者<iframe>的HTML标签中。你也可以在CSS文件中放入.svg文件，把它作为一个background-image。
如果你更喜欢通过编写代码来创建.svg文件，但我并不希望大家这样做，除了那些最简单的图形。你可以把SVG直接放入HTML中作为内联代码。
关于SVG还有很多需要了解的东西，有很多图形比如矩形等，还有很多各种各样的效果，你可以加在图形、直线、曲线上。
我们下周再接着讲，我会继续讲解基础的SVG图形这个系列的文章。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
