每次我讲到图像的时候，我都会提到，在可能的情况下，对于位图来说，可缩放矢量图形（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文件。
<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作为图像导入
这可能是将SVG导入HTML文档的最简单的方法。用你的矢量工具创建一个图像（我使用的是iDraw），将图像导出为.svg文件，然后把它加到一个普通<img>标签内。
<img src="example.svg" alt="My SVG example">
你需要确保你的服务器支持.svg文件，可能大多数都是支持的，但是还是查一下的好。在Apache的.htaccess文件中添加如下的内容：
AddType image/svg+xml svg svgz AddEncoding gzip svgz
说实话，你可以看到这里就停住，然后愉快地使用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>导入，代码如下：
<object type="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>框架内，这同样会生成一个绿色的圆角矩形。
<iframe src="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中。
<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文档中加入上边的这个长长的代码，就可以看到一个绿色的矩形。
使用内联SVG
你不必一定把SVG放在一个单独的文件中，因为你可以直接在HTML中嵌入SVG。
<body> <svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg" class="example"> <rect width="100%" height="100%" fill="green" /> </svg> </body>
你甚至可以再简写成这样：
<body> <svg width="300" height="200" class="example"> <rect width="100%" height="100%" fill="green" /> </svg> </body>
因为你在代码是嵌入在HTML中的，所以它不会通过一个XML解析器，也不需要包含所有的XML的信息。下面是一些内联SVG，显示的是一个绿色的矩形。
对于简单的图形，使用内联SVG是非常方便的。但是很多时候我们代码越复杂，就需要更好地模块化这些内容，所以还是需要把SVG移到一个单独的文件中存放。
在SVG中嵌入image
相比把一个.svg文件嵌入到一个<img>标签中，反过来把一个位图图像嵌入到SVG代码中也是可以的。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="200"> <image width="300" height="200" xlink:href="path-to-image.png"/> </svg>
如果嵌入的位图图像，你没办法单独地去控制图像中各个部分的样式，你也可以使用其他的SVG特性，比如剪裁、遮罩，还有滤镜，这些我都会在接下来的文章中讲解。
SVG和WordPress
因为我经常使用WordPress进行工作，我想你们中的大部分人也是，所以在WordPress的文章和页面中引入SVG是否需要额外的必要的东西呢？需要的。
把下面的这段代码放到你的functions.php文件中，这样你就可以通过WordPress的后台管理上传.svg文件。
function cc_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就会显示了。
<svg width="300" height="200"><rect width="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图形这个系列的文章。
网友评论文明上网理性发言 已有0人参与
发表评论: