目 录
1 像素图与矢量图
2 可伸缩矢量图形(SVG)
3 基本SVG元素
4 小结

一、像素图与矢量图

1、像素图与矢量图的比较

在万维网历史的大部分时间里,浏览器显示的图形都是像素图格式的。在像素图(如 GIF 或 JPEG 图像)中,文件包含图像中每个像素的颜色值。浏览器读取这些值并做出相应行动。它仅认识到单独的部分,而没有整体概念。

总的说来,这一系统有其优势,例如忠实再现了摄影图像,但它在某些情形下显得不足。例如,尽管浏览器能以不同大小显示一个图像,但通常会产生锯齿边缘,在这些地方,浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值。此外,像素图格式的二进制性质使得难以(尽管不是不可能)基于数据库信息动态地创建图像,并且动画最多也仅限于“翻动书本”类型的动画,即快速连续地显示单独图像。

矢量图,通过指定为确定每个像素的值所需的指令而不是指定这些值本身,克服了这些困难中的一部分。例如,矢量图形不再为一个直径100px的圆提供像素值,而是告诉浏览器创建一个直径100px的圆,然后让浏览器(或插件)做其余事情。

这消除了像素图的许多限制;使用矢量图,浏览器只要知道它必须画一个圆。如果图像需要以正常大小的三倍来显示,那么浏览器只要按正确的大小画圆而不必执行像素图通常的插入法。类似地,浏览器接收的指令可以更容易地与外部信息源(如应用程序和数据库)绑定,要对图像制作动画,浏览器只要接收有关如何操纵属性(如半径或颜色)的指令即可。

2、web上的矢量图

Web 上的第一个矢量图可能是虚拟现实标记语言(VRML)图像。VRML 寻求将 HTML 的简易性带到图像创建中来,然而尽管有一些示例给人以深刻的印象,但它的本来目的是为了 3D 造型,而且它太过复杂以至于从未真正流行起来。

接着是 Macromedia Flash 的介入。Flash 电影是用 Macromedia 的 Flash 应用程序所创建,它允许创建相当复杂的动画,并且将动画与声音和交互性绑定在一起。因为 Flash 文件主要包含有关如何创建图像的指令,所以它们比传统的 Web 电影小得多(例如 QuickTime 电影)— 而且它们可以缩放。

但是,Flash 文件仍然是二进制文件,这使得动态创建它们比较困难(尽管不是不可能)。而且对从浏览器可以进行的脚本编制有所限制。

直到出现可伸缩矢量图形(SVG)。

二、可伸缩矢量图形(SVG)

1、使用文本定义图像

SVG通过使用 XML 定义图像、动画和交互性解决了这些问题中的许多问题。浏览器读取(或者更准确地说,浏览器的插件读取)这些基于文本的指令,然后执行这些指令。例如,一个简单的 SVG 矩形图像可能看起来如下:

<?xml version="1.0" standalone="no" ?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
	
	<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">

    	<rect x="25" y="10" width="280" height="50"

          fill="red" stroke="blue" stroke-width="3"/>
	</svg>

效果展示

这个文档指示浏览器创建一个矩形,并提供属性信息,如位置(x, y)、大小(height, width)、颜色(fill, stroke)和线宽(stroke-width)。

2、在Web浏览器中显示SVG

SVG文件是纯粹的XML,那是如何在Web浏览器中让SVG显示。要在浏览器中显示(前提是浏览器支持),可以通过几种方法来实现:

假设我们有一个girls.svg文件: girl

使用编辑器打开,可以看到一大串的代码:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg enable-background="new 0 0 145 145" id="Layer_1" version="1.1" viewBox="0 0 145 145" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g>
    <path d="M95.727,56.11c-2.29-3.814-4.565-6.092-4.617-6.146c-0.48-0.48-2.289,1.668-2.791,2.309   c-0.762,0.981-2.563,2.625-6.367,4.876c-3.802,2.255-9.599,5.132-18.35,8.687c-3.747,1.524-6.766,3.085-9.192,4.666   c3.136-0.364,6.856-0.784,7.613-0.815c2.007-0.082-0.404,4.203-9.474,2.116c-1.186,0.895-2.195,1.796-3.047,2.699   c-1.388,1.474-2.355,2.959-2.971,4.422c-0.617,1.463-0.877,2.9-0.876,4.246c0.005,3.039,1.285,3.753,2.512,5.495   c1.234,1.746,3.872,2.962,3.872,2.962s-0.704-1.33-1.719-2.789c-1.022-1.463-1.976-3.455-1.971-5.668   c0.001-1.004,0.188-2.065,0.665-3.201c0.275-0.653,0.652-1.335,1.149-2.038c0.466,2.206,1.478,6.081,3.454,10.021   c1.499,2.98,3.555,4.208,6.406,6.524c2.844,2.317,6.521,5.686,11.017,5.679c0.11,0,0.221-0.001,0.332-0.003   c3.876-0.057,7.15-3.391,9.724-5.757c3.87-3.555,6.308-7.082,7.847-12.521c1.531-5.446,2.713-11.542,3.009-15.689   c0.522-7.306,0.163-10.061-0.246-11.266c0.572,0.787,1.188,1.696,1.808,2.743c2.096,3.534,4.127,8.399,4.123,13.856   c-0.002,3.122-0.653,6.447-2.35,9.907c-1.698,3.459-4.452,7.06-8.7,10.68c0,0,9.238-5.66,11.119-9.493   c1.882-3.831,2.628-7.595,2.626-11.095C100.33,65.29,98.012,59.922,95.727,56.11z M77.582,69h11.677C89.259,69,89.259,75,77.582,69   z"/>

    <path d="M53.943,97.604c-0.348-0.031-0.705-0.008-1.062-0.028c-0.212-0.012-0.425-0.001-0.633-0.02   c-3.854-0.352-6.887-1.923-8.909-4.354c-2.018-2.434-3.053-5.744-2.744-9.682l0.018-0.214c0.262-2.885,1.129-5.415,2.495-7.631   c1.367-2.215,3.437-3.863,5.531-5.702c7.384-6.483,14.57-10.075,21.95-13.905c4.245-2.203,8.488-4.594,12.651-7.22   c0.93-0.589,1.652-1.372,2.303-2.16c0.65-0.79,1.234-1.593,1.838-2.262c0,0-8.906,4.272-12.152,5.812   c-9.81,4.656-19.593,9.548-28.099,16.587c-3.033,2.512-5.808,5.679-7.739,9.131c-1.279,2.286-2.037,4.649-2.252,7.027   c-0.347,3.803,0.713,7.618,3.108,11.164c1.28,1.9,2.797,3.31,4.487,4.276c1.689,0.967,3.541,1.487,5.471,1.66   c1.797,0.162,3.675-0.072,5.585-0.411l7.056-1.355l-7.128-0.644C55.143,97.622,54.545,97.659,53.943,97.604z"/>

    <path d="M49.823,71.043c0.97,0.317,1.875,0.565,2.726,0.76c0.576-0.435,1.197-0.869,1.86-1.301   C51.934,70.79,49.823,71.043,49.823,71.043z" fill="#FFFFFF"/>
  </g>
</svg>

暂且不需要知道这个代码怎么来的,后面会懂的。接下来,使用不同的方式,让浏览器能正常显示SVG图像。

A、iframe

自从浏览器支持SVG,可以通过url来加载SVG图像。其中使用<iframe>嵌入SVG就是其中一种方式。如下面的示例:

<iframe src="/images/girls.svg" width="200" height="200" ></iframe>

B、img

嵌入SVG图像还可以使用<img>元素加载图像一样。只需要将src的属性值更换成SVG图像对应的url,如:

<img src="/images/girls.svg"  width="300" />

C、background-image

自从浏览器支持SVG图像时,SVG图像就像像素图一样,可以通过background-image属性将SVG图像当做背景图片一样嵌入到HTML页面中。如下面的例子所示:

div {
    background: url('/images/girls.svg') no-repeat center;
    background-size : 200px 200px;
}

可以通过background-size设置背景图像大小,告诉浏览器SVG图像以多大的尺寸显示。

D、SVG

嵌入SVG图像到HTML页中,还可以直接使用<svg>元素,通过代码将SVG图像嵌入到HTML代码中。如:

<div>
    <svg enable-background="new 0 0 145 145" id="Layer_1" version="1.1" viewBox="0 0 145 145" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g>
            <path d="M95.727,56.11c-2.29-3.814-4.565-6.092-4.617-6.146c-0.48-0.48-2.289,1.668-2.791,2.309   c-0.762,0.981-2.563,2.625-6.367,4.876c-3.802,2.255-9.599,5.132-18.35,8.687c-3.747,1.524-6.766,3.085-9.192,4.666   c3.136-0.364,6.856-0.784,7.613-0.815c2.007-0.082-0.404,4.203-9.474,2.116c-1.186,0.895-2.195,1.796-3.047,2.699   c-1.388,1.474-2.355,2.959-2.971,4.422c-0.617,1.463-0.877,2.9-0.876,4.246c0.005,3.039,1.285,3.753,2.512,5.495   c1.234,1.746,3.872,2.962,3.872,2.962s-0.704-1.33-1.719-2.789c-1.022-1.463-1.976-3.455-1.971-5.668   c0.001-1.004,0.188-2.065,0.665-3.201c0.275-0.653,0.652-1.335,1.149-2.038c0.466,2.206,1.478,6.081,3.454,10.021   c1.499,2.98,3.555,4.208,6.406,6.524c2.844,2.317,6.521,5.686,11.017,5.679c0.11,0,0.221-0.001,0.332-0.003   c3.876-0.057,7.15-3.391,9.724-5.757c3.87-3.555,6.308-7.082,7.847-12.521c1.531-5.446,2.713-11.542,3.009-15.689   c0.522-7.306,0.163-10.061-0.246-11.266c0.572,0.787,1.188,1.696,1.808,2.743c2.096,3.534,4.127,8.399,4.123,13.856   c-0.002,3.122-0.653,6.447-2.35,9.907c-1.698,3.459-4.452,7.06-8.7,10.68c0,0,9.238-5.66,11.119-9.493   c1.882-3.831,2.628-7.595,2.626-11.095C100.33,65.29,98.012,59.922,95.727,56.11z M77.582,69h11.677C89.259,69,89.259,75,77.582,69   z"/>
            <path d="M53.943,97.604c-0.348-0.031-0.705-0.008-1.062-0.028c-0.212-0.012-0.425-0.001-0.633-0.02   c-3.854-0.352-6.887-1.923-8.909-4.354c-2.018-2.434-3.053-5.744-2.744-9.682l0.018-0.214c0.262-2.885,1.129-5.415,2.495-7.631   c1.367-2.215,3.437-3.863,5.531-5.702c7.384-6.483,14.57-10.075,21.95-13.905c4.245-2.203,8.488-4.594,12.651-7.22   c0.93-0.589,1.652-1.372,2.303-2.16c0.65-0.79,1.234-1.593,1.838-2.262c0,0-8.906,4.272-12.152,5.812   c-9.81,4.656-19.593,9.548-28.099,16.587c-3.033,2.512-5.808,5.679-7.739,9.131c-1.279,2.286-2.037,4.649-2.252,7.027   c-0.347,3.803,0.713,7.618,3.108,11.164c1.28,1.9,2.797,3.31,4.487,4.276c1.689,0.967,3.541,1.487,5.471,1.66   c1.797,0.162,3.675-0.072,5.585-0.411l7.056-1.355l-7.128-0.644C55.143,97.622,54.545,97.659,53.943,97.604z"/>
            <path d="M49.823,71.043c0.97,0.317,1.875,0.565,2.726,0.76c0.576-0.435,1.197-0.869,1.86-1.301   C51.934,70.79,49.823,71.043,49.823,71.043z" fill="#FFFFFF"/>
        </g>
    </svg>
</div>

上面的示例将<svg>放在一个<div>元素中,只是用来说明SVG图像可以通过<svg>元素嵌入到HTML页面中。其实<svg>元素可以不放在一个<div>元素中。

使用<svg>元素可以直接在HTML页面中嵌入SVG,而不是像前面几种方式那样,将SVG图像文件嵌入到页面当中。你可以设置width和height值,用来控制<svg>元素的大小,从而控制SVG图像的宽度和高度。

使用<svg>元素嵌入SVG图像,还可以通过CSS给其定义一些样式,实现一些样式效果。

E、embed

早期将SVG图像嵌入到HTML页面中都是通过<embed>元素。当时并不是所有的浏览器都支持原生SVG。来看看怎么使用:

<embed src="/images/girls.svg" width="300" height="220" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />

F、object

<object>元素是HTML4的标准标签元素,被所有较新的流星器支持。它只不过是不允许使用脚本。这个刚好与<embed>标签元素相反:

<object data="/images/girls.svg" width="300" height="200" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />

虽然将SVG图像嵌入到HTML页面中,让浏览器能显示。方法有很多种,但更建议使用<img>和<svg>这两种方式。当然,如果SVG图像是给元素做背景图时,可以使用background-image方式引入。

3、动画和交互性

因为xml文件这一结构,SVG 非常适合于动画和交互性。要更改图形元素的大小、位置或颜色,脚本只要调整相应的属性即可。

事实上,SVG 有为事件处理而专门设计的属性(很象 HTML),甚至还有特别适合于动画的元素。例如,下面这一代码创建一个在 8 秒期间沿一条特定路线来回移动并无限重复的动画效果:

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">

    <!-- Box around the image -->

    <rect x="1" y="1" width="498" height="298"

          fill="none" stroke="blue" stroke-width="2"/>

    <!-- Visible path -->

    <path d="M0,300 S150,100 200,200 S400,400 500,0"

          fill="none" stroke="red" stroke-width="2"/>

    <!-- Group of elements to animate -->

    <g stroke-width="5" stroke="black">

        <!-- Stick figure pieces -->

        <circle cx="0" cy="-45" r="10" fill="black"/>

        <line x1="-20" y1="-30" x2="0" y2="-25"/>

        <line x1="20" y1="-30" x2="0" y2="-25"/>

        <line x1="-20" y1="0" x2="0" y2="-10"/>

        <line x1="20" y1="0" x2="0" y2="-10"/>

        <line x1="0" y1="-10" x2="0" y2="-45"/>

        <!-- Animation controls -->

        <animateMotion path="M0,300 S150,100 200,200 S400,400 500,0"

                       dur="8s" repeatCount="indefinite"

                       rotate="auto"/>
    </g>
</svg>

效果展示

三、基本 SVG 元素

1、SVG基本形状

SVG 定义了六种基本形状,这些基本形状和路径(路径相对复杂,放到下一章单独讨论)一起,可以组合起来形成任何可能的图像。每个基本形状都带有指定其位置和大小的属性。它们的颜色和轮廓分别由 fill 和 stroke 属性确定。这些形状是:

圆(circle):显示一个圆心在指定点、半径为指定长度的标准的圆。

椭圆(ellipse):显示中心在指定点、长轴和短轴半径为指定长度的椭圆。

矩形(rect):显示左上角在指定点并且高度和宽度为指定值的矩形(包括正方形)。也可以通过指定边角圆的 x 和 y 半径画成圆角矩形。

线条(line):显示两个坐标之间的连线。

折线(polyline):显示顶点在指定点的一组线。

多边形(polygon):类似于 polyline,但增加了从最末点到第一点的连线,从而创建了一个闭合形状。

下面示例演示了这些图形:

<!-- 生成SVG画布 -->
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

    <g>
		<!-- 圆 -->
    <circle cx="50" cy="50" r="25" />
			
		<!-- 椭圆 -->
    <ellipse cx="75" cy="125" rx="50" ry="25" />
			
		<!-- 矩形 -->
    <rect x="155" y="5" width="75" height="100"/>
			
		<!-- 矩形 -->
    <rect x="250" y="5" width="75" height="100" rx="30" ry="20" />
		
		<!-- 线条 -->
    <line x1="0" y1="150" x2="400" y2="150"
                         stroke-width="2" stroke="blue"/>
		<!-- 折线 -->
    <polyline points="50,175 150,175 150,125 250,200" />

		
		<!-- 多边形 -->
    <polygon points="350,75 379,175 355,175 355,200 345,200
                                      345,175 321,175" />
		
		<!-- 矩形 -->
    <rect x="0" y="0" width="400" height="200"
            fill="none" stroke="red" stroke-width="3" />
 </g>
</svg>

效果展示

2、添加文本

除了形状以外,SVG 图像还可以包含文本。SVG 给予设计人员和开发人员对文本的大量控制,可以获得很好的图形效果而不必借助失去真实纹理信息的图像(.gif或.jpg图像),下面示例演示了文本的定义:

<svg width="400" height="125" xmlns="http://www.w3.org/2000/svg">

    <desc>Basic text</desc>

    <g>

    <rect x="0" y="0" width="400" height="125" fill="none"

            stroke="blue" stroke-width="3"/>

     <text x="10" y="50" font-size="30">Welcome to the world of</text>

<text x="10" y="100" font-size="40"

       font-family="Monotype Corsiva"

       fill="yellow" stroke="red">Scalable Vector Graphics!</text>

 </g>

</svg>

效果展示

3、渲染顺序

当组合多种不同元素时,正象 SVG 图像一样,重要的是牢记各项在页面上的放置顺序,因为这关系到谁“在上面”出现。在一个 HTML 页面上,使用z-index属性来控制这一分层效果,而对于 SVG 图像,则严格按顺序放置各项。每个后继层放置在那些已放置层的上面。

如果指定一个元素没有填充色(使用fill=”none””),那么在它下面的各项会显现出来,就象这样:

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

    <g>

        <ellipse cx="125" cy="50" rx="50" ry="25"

                 fill="none" stroke="black" />

        <circle cx="125" cy="50" r="25" fill="dodgerblue" />

        <circle cx="125" cy="50" r="10" fill="black" />

        <ellipse cx="250" cy="50" rx="50" ry="25"

                 fill="none" stroke="black" />

        <circle cx="250" cy="50" r="25" fill="dodgerblue" />

        <circle cx="250" cy="50" r="10" fill="black" />

        <polygon points="65,50 185,50 185,75, 150,100

                                          100,100 65,75"

                 fill="none" stroke="purple" stroke-width="4"/>

        <polygon points="190,50 310,50 310,75, 275,100

                                          225,100 190,75"

                 fill="none" stroke="purple" stroke-width="4"/>

        <line x1="65" y1="50" x2="310" y2="50"

              stroke="plum" stroke-width="2"/>

    </g>

</svg>

效果展示

请注意每个元素会覆盖在它之前出现的元素。

4、编组元素

最后,SVG 不仅仅可以定义单个元素,为兼顾可读性和方便性,将元素安排在一组中通常是个好办法。针对这一目的,SVG 提供 <g></g> 元素,它创建一个可以将元素置于其中的容器。这个容器可以用来标识元素,或提供一个公共属性(本地定义的属性将会覆盖公共属性)。例如上面渲染顺序使用的示例中:

	...
	<g stroke="red" stroke-width="3">

      <ellipse cx="125" cy="50" rx="50" ry="25"

                           fill="none" stroke="black" />

      <circle cx="125" cy="50" r="25" fill="url(#irisGradient)" />

      <circle cx="125" cy="50" r="10" fill="black" />

    </g>
    ...

为<g><\g>添加属性,则该属性将作用于g标签内部所有元素。

四、小结

本文大致介绍了:

像素图和矢量图的原理及优缺点;

SVG本质(.XML);

SVG的web显示方式(推荐使用<svg>标签、<img>标签、background-image);

SVG的六种基本形状(<rect>、<circle>、<ellipse>、<line>、<polyline>、<polygon>);

SVG的文本元素<text>和渲染顺序.

下一篇将介绍元素的基本属性和复杂而强大的路径元素<path>.