注:本文翻译自Creating Shapes with SVG : An SVG Tutorial

用过SVG格式的图片咩？本教程可助你更深入地了解和使用SVG图片。
在过去，浏览器支持的图片格式是CompuServe公司研制的GIF，接着是JPEG，相对于GIF来说，JPEG压缩率更高尺寸更小质量却没多大损耗。

过了一段时间，随着互联网二维矢量电脑图形技术的发展，应运而生的各种图片格式争相被提交至W3C，而研制于1999年的SVG则是其中一种。

什么是SVG？

SVG（Scalable Vector Graphics的缩写，即可伸缩矢量图形），是一种专为网页而设计的基于XML的矢量图片格式。和GIF、PNG和JPEG图片不一样，SVG格式的图片是可缩放的，不管你如何缩小或者拉伸图片，它的质量都不会有损耗。

另外，作为一种XML文件，意味着SVG图片可以使用任意的文本编辑器来创建、修改，同时适用W3C的一些技术标准例如DOM、XSL。

为什么使用SVG？

  • 可以用任何文本编辑器进行创建和编辑
  • 可以高分辨率打印
  • 可用于动画
  • W3C推荐
  • 适用其他W3C标准例如DOM
  • retina屏幕下表现出色
  • 缩放自如且没有质量损耗

HTML网页中的SVG

SVG图片可以通过svg标签非常方便地内嵌到HTML网页中去。例如：

1
2
3
4

<svg width="xx" height="yy">
    [svg图片内嵌元素的具体代码]
</svg>

如你所见，在html中，SVG图片有它自己的标签，且svg标签须带有width(宽)和height(高)属性以便包含其他内嵌元素。以下这些元素可用于在SVG画布内绘制对应的图形：

  • Circle (圆形)
  • Rectangle (矩形)
  • Ellipse (椭圆形)
  • Line (直线)
  • Polyline (折线)
  • Polygon (多边形)
  • Path (路径)
  • Text (文本)

我们下文会对这些元素分别进行介绍说明，如果你以前没用过SVG，本文是一个不错的开始，除了介绍什么是SVG，它还可以教会你利用基本的XML来绘制基础的SVG图形。闲话少说，我们直接进入教程主题吧。

SVG圆形 - Circle

利用circle标签绘制SVG圆形，示例代码如下：

1
2
3
4

<svg width="290" height="200">
    <circle cx="70" cy="70" r="60" style="fill: #2E9AFE; stroke: #DF3D82; stroke-width: 2px;" />
</svg>

示例效果如下：



属性解释：

  • cx：圆心的x坐标
  • cy：圆心的y坐标
  • r：圆形的半径
  • fill：填充样式
  • stroke：边框颜色
  • stroke-width：边框宽度

这些属性都很简单，不言自明。

SVG矩形 - Rectangle

利用rect标签绘制SVG矩形，示例代码如下：

1
2
3
4

<svg width="290" height="200">
    <rect width="250" height="100" x="10" y="10" rx="10" ry="20" style="fill: #2E9AFE; stroke: #DF3D82; stroke-width: 4px;fill-opacity:0.5;stroke-opacity:0.9;"/>
</svg>

效果如下：



属性解释：

  • x：x坐标
  • y：y坐标
  • fill-opacity：填充透明度
  • stroke-opacity：边框透明度
  • rx：x轴方向的圆角度
  • ry：y轴方向的圆角度

SVG椭圆形 - Ellipse

利用ellipse标签绘制SVG椭圆形。和圆形不一样的是，椭圆形的高和宽是不相等的。如果椭圆形的高和宽相等，那它就变成了圆形的样子啦。

示例代码如下：

1
2
3
4

<svg width="290" height="200">
    <ellipse cx="110" cy="60" rx="100" ry="50" style="fill:#2E9AFE; stroke:#DF3D82;stroke-width:2;"></ellipse>
</svg>

效果如下：



SVG直线 - Line

利用line标签绘制直线，示例代码如下：

1
2
3
4

<svg width="290" height="200">
    <line x1="0" y1="0" x2="130" y2="150" style="stroke:#2E9AFE; stroke-width:3" />
</svg>

效果如下：



属性解释：

  • x1：起点的x坐标
  • y1：起点的y坐标
  • x2：终点的x坐标
  • y2：终点的y坐标

SVG折线 - Polyline

利用polyline标签绘制折线，折线实际上多个点连接起来的直线。

示例代码如下：

1
2
3
4

<svg width="290" height="200">
   <polyline points="10,10 150,120 100,180 200,170" style="fill:none;stroke:#2E9AFE;stroke-width:3" />
</svg>

效果如下：



SVG多边形 - Polygon

利用polygon绘制多边形，示例代码如下：

1
2
3
4

<svg width="290" height="200">
   <polygon points=" 60,20 100,40 100,80 60,100 20,80 20,40" style="fill:#2E9AFE;stroke:#DF3D82;stroke-width:1" />
</svg>

效果如下：



多边形实际上是一种特殊的始点和终点重合的折线。

SVG路径 - Path

利用path标签可以绘制由曲线、直线、弧度组成的复杂的路径或图形。在所有的SVG元素中，路径是功能最强悍的因此也最难学和掌握。路径有下面这些命令：

  • M：move to ，移动至
  • L：line to ，直线至
  • V：vertical line to ，垂直方向直线至
  • H：horizontal line to ，水平方向直线至
  • C：curve to ，曲线至
  • S：smooth curve to ，平滑曲线至
  • Q：quadratic Bézier curve，二维贝塞尔曲线
  • T：smooth quadratic Bézier curve，平滑二维贝塞尔曲线
  • A：elliptical arc，椭圆弧
  • Z：close path，关闭路径

以上的命令，大写字母表示定位方式使用绝对位置，小写则使用相对定位。

示例代码如下：

1
2
3
4

<svg width="290" height="290">
    <path d="M30 40 C140 -30 180 90 20 160 L120 160" style="fill: none; stroke: #DF3D82; stroke-width: 4px;" />
</svg>

效果如下：



使用路径绘制SVG图形，可以想象成用鼠标在屏幕上绘画，在开始绘画的时候，你需要将光标移至某个开始位置。在上面的示例中，我将开始绘制的点移至(x轴30，y轴40)，接着绘制曲线，曲线的第一个切线点为(140,-30)，第二个切线点为(180,90)，最后的一个切线点为(20,160)。最后我画了一段直线至坐标(120,160)。

上面的例子如果在直线后面加Z来关闭路径，图形的始点和终点将会链接起来，效果如下：



SVG文字 - Text

利用text标签来绘制文字，示例如下：

1
2
3
4

<svg height="150" width="290">
    <text x="20" y="30" fill="#DF3D82" font-size="20">FASO.ME! </text>
</svg>

效果如下：


FASO.ME!

在Adobe Illustrator中创建SVG图形

除了使用svg标签在网页中手工创建SVG图形外，你还可以使用Adobe Illustrator(简称AI)可视化创建SVG图片。下面让我们着利用AI创建一个简单的星星！

打开AI，新建文档如下图：

接着利用工具栏里的星形工具绘制一个星星：

接下来我们可以调下星星的填充颜色，画布大小，如下图所示：

最后，将AI文件另存为SVG文件：

这时候会有一个SVG选项的窗口弹出来：

你可以点击 ”显示SVG代码“ 按钮查看图形对应的svg代码：

总结

在你的项目中使用SVG图片有诸多优点。随着高清屏幕的出现和移动应用的持续发展，高质量的图片有越来越多的使用机会。相对于传统的JPEG、PNG、和GIF图片，伸缩质量无损的矢量图片才是网页图片格式的最佳选择。

读到这里你应该了解SVG的基础知识了，有兴趣你可对SVG继续探索下去。网路上有很多SVG的高级应用教程可以帮助你深入学习。希望你喜欢本教程，下次再见。