前端开发者学堂 - fedev.cn

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

#译文#SVG
发布于 彦子

每次我讲到图像的时候，我都会提到，在可能的情况下，对于位图来说，可缩放矢量图形（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文件。

<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图形这个系列的文章。

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

彦子

在校学生，本科计算机专业。逗比一枚，热爱前端热爱生活，喜欢CSS喜欢JavaScript喜欢SVG，爱玩PS玩AI玩啊逗比的软件。努力向上，厚积薄发。

如需转载，烦请注明出处：https://www.fedev.cn/svg/svg-basics.htmlAir Force 1 Ultra Flyknit 2.0 - Black