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> ,它有几个属性:widthheight以及一些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玩啊逗比的软件。努力向上,厚积薄发。

如需转载,烦请注明出处:http://www.w3cplus.com/svg/svg-basics.html

如需转载,烦请注明出处:https://www.w3cplus.com/svg/svg-basics.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部