本教程是蓝骑士SVG教程的第三部分，定义物件,例如文本物件和图形物件,在一个SVG图像中是很重要的。作为一个SVG创作者,你需要手写入许多物件的代码,当然也可以通过一些程序来自动 生成一些物件,但是你最好能熟练掌握SVG物件定义格式。
目录结构
- 第一课 开始
- 第二课 SVG图像容器
- 第三课 SVG Path路径与图形
- 第四课 SVG文本(text)
- 第五课 SVG样式表(CSS)
- 第六课 SVG填充(fill)
- 第七课 SVG笔划(stroke)
- 第八课 SVG梯度(Gradients)
- 第九课 SVG滤镜
- 第十课 SVG和当前的标准网络图像(JPEG,GIF,PNG)
- 第十一课 SVG支持ICC色彩模式
- 第十二课 SVG打印
定义物件,例如文本物件和图形物件,在一个SVG图像中是很重要的。作为一个SVG创作者,你需要手写入许多物件的代码,当然也可以通过一些程序来自动 生成一些物件,但是你最好能熟练掌握SVG物件定义格式。举个例子,你可以使用Adobe Illustrator 9.0来产生复杂的图像并以SVG文档格式输出,可是在你考虑动态效果和交互性时,你必须很清楚的了解物件的定义,以便对物件进行一些控制。所以掌握物件 定义格式就像制作网页时掌握html标签(元素)一样。
让我们来看些典型的SVG源码。作为XML的一种应用,SVG文档的书写 更像使用html语言,它使用的是一些代表开始和结束的标签(元素),以及嵌套标签。每一个SVG文件都包含有最外层的(svg)标签,类似于html文 件中的(html)。因此,SVG文件可以作为XML文件的一部分被植入或单独的作为一个图像文件。下面的代码是一个比较通常的独立SVG文件的头部标 识:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xml:space="preserve" width="5.5in" height=".5in">
...
</svg>
第二行提供了文件定义类型(DTD)的参考信息。文件定义类型(DTD)是一套用于定义元素,元素属性和制定如何形成文件的标准规则。
第三行的(SVG)表示SVG文件的开始,这里面可以添加三种基本的物件:文本,图形和路径。物件的定义都是很直接的,例如下面的描述:
<text style="fill:blue;" y="15">blueknight</text>
</svg>
我们看到文本显示为2.5英寸宽,0.5英寸高的图像。文字净高为15像素。
下面的例子产生一个红色的直角矩形。
<rect style="fill:yellow;" width="300" height="100"/>
</svg>
路径使用下面的属性来描述:
- "moveto" 设置新的坐标点
- "lineto" 画一条直线
- "curveto" 使用贝赛尔函数画制曲线
- "arc" 画椭圆和圆
- "closepath" 闭合路径
<path d="M 50 10 L 350 70 L 100 120 z"/>
</svg>
注意:这里的x,y轴坐标是隐含的,它被包含在M,L等数据中,直接由浏览器解析获得。
你已经看见了利用SVG文件格式定义出的基本图形所占用的文件尺寸是多么小了,而且文件的结构也如此简单。SVG浏览器就是用这样的办法区别出大量的物件,然后组合绘制出图像。
在规范了语言和文件结构之后,我们再来看看(svg)标签。
(svg)标签对整个SVG文件做出说明,这包括:分析用户所使用的系统,大量的样式表定义等。
一个比较重要的应用是在(scg)标签里定义图像的有关显示属性。 这样的一行(svg)标签定义了:
1.文本的白色区域(whitespace)将被保存
2.图像在SVG文件中的原始尺寸是宽3in,高2in
3.显示图像使用300*200的区域
在下面的图像中,SVG文件建立了图像的显示容器,左上角的顶点定义为坐标(0,0),右下角定义为(300,200)。
现在我们已经可以为图像的显示建立显示区域,下面我们来看看SVG文件中元素(如特定的一个图案)的组织结构。如果你使用的SVG的文件是通过 Illustrtor输出并且保留有层的属性,你将看到在SVG文件源码中,曾作为一个整体的组,每一个组中的每一个层分别使用了一个(g id=" ")标签,id中定义层的名字,这样的定义使得层可在后续的操作中被调用。特别是做动态SVG时,实现动画和交互。
***附js1
Illustrator输出的SVG文件默认将所有的矢量图形都作为路径数据定义.所以SVG创作者在Illustrator中做好的矢量图形,在文件中将被存储为如下格式(path d="路径数据").path数据中包含有"style","fill","stroke"等属性.
也有一些是系统已经定义好的物件标签,如(rect),(circle),(ellipse),(polyline),(polygon)等.这些在物件定义中可以被直接使用.(第一课的例子我们已经看到这样的应用).
下面是同一个图形的来中定义方式
cx="200" cy="200" r="100"/>
d="M200,100c0,55.23-44.77,100
-100,100S0,155.23,0,100S44.77,0,100,
0s100,44.77,100,100z"/>
显然使用系统定义的标签将更简洁.
SVG文本物件有点类似于html中的文本元素,包括了字体,色彩等样式属性。但是由于它不像html中已经被固定,所以文本可以更加自由的由设计者或使用者来控制。
上面的图像是一个控制文本的例子,请在下面的下拉菜单选择不同的字体和在文本框输入其他英文改变图像中的文字。
***附js2
此外,SVG图像中使用的字体并不受到用户使用系统中安装字体的限制,这一点与html有很大差别。SVG将制作时使用到的特殊字符通过自定义字符集集 合到SVG文件中。这样,一方面可以正确显示字体,另一方面也不需用户下载其他无用的字符的字体,而是显示什么字符,下载相应的一小部分字符字体。
下面的例子中已经植入了一种特殊字体。
样式表(CSS)是网页制作中一种非常有效的定义文字和图片显示样式的方法。SVG支持CSS2的规范,可以自由的使用内部样式表,植入式样式表,外部样式表。 样式表的定义包括:样式选择名和样式描述。
下面的例子中,"st0"是样式选择名,"fill:red"是样式描述。
.st0 {fill:red;}
通过样式选择名,创作者可以层叠的调用一些不同样式来获得不同效果,而这些样式只需要定义一次以后,就可以被反复的调用。
在上面的图像中,并没有样式表,每一个矩形通过如下定义:
<g style="stroke:#990000;stroke-width:2;>
<path d="M37.693,104.875c0,..."/>
如果使用一个植入式样式表,上面的style="..."将被一个预定义的样式(命名为.st2)所取代。现在,如果你希望改变图形的属性(在这个例子中将是所有的30个图形),只需要在.st2中修改样式就可以了。效率是不是一下提高了?
.st2{fill:none;stroke:#990000;stroke-width:2;} 修改为 .st2{fill:#000FF;fill-opacity:.5;stroke:none;}
现在我们已经了解了SVG文件是通过组织不同的物件(元素)来形成图像,下面我们进一步的讨论定义中的一些属性和值的设定.
"填充"(fill)
请看下面的语句:
<path style="fill:white">
fill后面可使用的值: none, current-color, (color)
填充属性决定了物件是否利用色块进行填充,并且色块用的是什么样的颜色。"none"是无色,"Current-color"返回的是一个父文档(可以是XML文档或者SVG文档)的颜色值,(color)是自定义的色彩。
"填充规则"(fillrule)
请看下面的语句:
<path style="fillrule:nonzero">
fillrule后可使用的值: evenodd, nonzero, inherit
填充规则属性定义对所有路径区域填充或者只是对交叉部分填充,下面的例子分别是"evenodd"和"nonzero"的应用。
"inherit" 指的是当前物件的填充属性和围绕它的物件(或物件组)的属性一致。
"填充透明度"(fill-opacity)
请看下面的语句:
<path style="fill-opacity:0.25">
fill-opacity后可使用的值: 0到1的任何数
填充透明度决定了一个物件的填充是实色填充(透明度数值为1)还是透明的填充(透明度数值为0).关于物件的透明度属性其他还有如:"笔划透明度"(stroke-opacity),对应于笔划的透明程度;"透明"(opacity),对应于物件整体的透明程度。
***附js3
"笔划"(stroke)
请看下面的语句:
<path style="stroke:white">
stroke后面可使用的值: none, current-color, (color)
笔划属性决定了物件是否利用笔划进行勾勒,并且使用什么样颜色的笔画。"none"是无色,"Current-color"返回的是一个父文档(可以是XML文档或者SVG文档)的颜色值,(color)是自定义的色彩。
"笔划宽度"(stroke-width)
请看下面的语句:
<path style="stroke-width:2">
stroke-width后可使用的值是: (width), inherit
"笔划宽度"默认值是1像素宽度。用户也可以自定义宽度,可以使用像素值也可以使用百分比。这里的所有SVG图像都使用的是像素值."inherit"代表继承前面(父)的物件(或物件组)的笔划属性。
"笔划端点"(stroke-linecap)
请看下面的语句:
<path style="stroke-linecap:square">
stroke-linecap可使用的值是: butt, round, square, inherit "笔划端点"的属性定义了开放笔划(未闭合)的端点的形状,分别是"粗大的"butt,"圆滑的"round,"平整的"square和"继承 的"inherit.
"笔划连接"(stroke-linejoin)
请看下面的语句:
<path style="stroke-linejoin:bevel">
stroke-linejoin可使用的值是:miter, round, bevel, inherit
笔划连接属性定义了路径拐角的形状,"miter"是默认值,"round"光滑连接,"bevel"折线连接,"inherit"继承
"笔划圆角连接"(stroke-miterlimit)
请看下面的语句:
<path style="stroke-miterlimit:4">
stroke-miterlimit后可使用的值是: (miterlimit), inherit "笔划圆角连接"定义了两条相交成一定角的线在连接处的圆滑程度。数值必须为大于1的整数,默认的值是8。
"虚线笔划"(stroke-dasharray)
请看下面的语句:
<path style="stroke-dasharray:12 12">
stroke-dasharray后可使用的值是:(dasharray), inherit
虚线笔划定义了使用虚线的虚化程度,请参看下面的例子
在下面的文本框中分别任意添入一个大于1的整数,然后点击set按钮。
***附js4
梯度是填充和笔划属性的一个特殊应用。梯度可以产生用矢量完成的色彩渐变。SVG支持线式的(linear)和圆式的(radial)色彩梯度变化。
梯度属性的实现利用了(defs)标签(元素),这个标签包含了填充和笔划属性,由此,可以给物件加入特别的效果。结合下面的代码和例子,体会(defs)标签的含义和使用。
<radialGradient id="gradient1" cx="150.0005"
cy="100" r="113.7914" fx="150.0005" fy="100">
<stop offset="0.19" style=
"stop-color:#FFFF00"/>
<stop offset="0.4782" style=
"stop-color:#FFD00D"/>
<stop offset="1" style=
"stop-color:#FE7312"/>
</radialGradient>
</defs>
请在下面的文本框中改变原来的数值(例如从左到右改为: .16 #F00F00 .782 #FFD0ff 1 #0E7312 或者使用任意你喜欢的值),然后点击set按钮查看效果。
***附加js5
矢量图像的优点是下载快速,这是因为图像的生成由客户端实现,这样只需要原始的代码,也就是SVG文档,它的尺寸比位图图像要小的多。
但是,我们看到仍有很多设计者倾向于位图,这是因为位图可以产生大量的滤镜效果,纹理贴图和空间幻影。
可是这种较陈旧的方法使得修改图像非常困难,原始的图像文档尺寸巨大,客户很难迅速下载,修改也需要借助特定工具,效率很低。例如仅仅改变一个简单的按钮的滤镜效果,往往要花费很多的时间和精力。
现在,SVG带有的滤镜功能同样可以使图像创作者做出大量流行的和普遍的滤镜效果来。而且用这种方法也使得图像在客户端的产生和修改更加简便。强大的矢量滤镜,给创作者丰富的想像空间,并且产生适合网络传送的图像。
滤镜效果使用(fileter)标签和相关的ID识别来定义。请看下面的例子:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 03March 2000//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="4in" height="3in">
<defs>
<filter id="CoolTextEffect">
<!-- Definition of filter goes here -->
</filter>
</defs>
<text style="filter:url(#CoolTextEffect)">Text with a cool effect</text>
</svg>
通过简单滤镜的组合,还可以产生更加丰富和多样的效果来。一般,图像滤镜效果的产生首先是结合简单滤镜形成总的效果然后叠加入图像中产生最终图像。
下面是一个高斯模糊和镜面效果的应用。
以下是详细的分解流程:
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlurredAlpha"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="1"
specularExponent="10" lightColor="white" result="specularOut">
<fePointLightx="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specularOut" in2="SourceAlpha"
operator="in" result="specularOut"/>
<feComposite in="SourceGraphic" in2="specularOut"
operator="arithmetic" k1="0" k2="1" k3="1"
k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlurredAlpha"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
一个SVG图像可以通过(image xling:href="/ ")标签调用其他格式的标准网络图像。例如JPEG,GIF和PNG。由于SVG格式支持ICC色彩模式,植入的JPEG文件仍然能保持原有的调色板和色彩属性。
你可以很方便的使用一些JPEG,GIF图像作为SVG图像的背景,或者其他的应用。通过样式表CSS,你还可以给这些图像加上矢量路径,从而实现对图像的控制。请参看下面的这张图片,这里就是对JPEG的调用。
国际色彩协会(The International Color Consortium 简称ICC)成立于1993年,主要致力发展制定关于色彩的统一标准,以实现色彩能够跨平台,以工业标准实现应用。因而,使用ICC色彩模式可以很好的实 现色彩在不同系统中的精确转换。例如,可以保证一个打印的图标(logo)和在屏幕显示上的色彩属性保持一致。
SVG文件可以自由的制定所使用的色彩模式。使用ICC色彩模式需要定义(icc-color)属性。SVG文件默认的色彩是sRGB色彩,但是你可以通过(icc-color)转换到ICC色彩。
下面的例子中同时使用了两种色彩定义,当用户系统支持ICC色彩模式时(win98和Mac OS已经自动安装),就会以ICC模式显示下面的"S V G",填充色#900000,笔划色#800080。否则按照填充色红色,笔划色#0000FF显示。
stroke:#0000FF icc-color(myRGB,128,0,128);
如果需要精确的色彩显示和应用,掌握ICC是十分必要和重要的。SVG支持ICC色彩模式使得SVG图像在打印时将会更加准确。
通过使用ICC色彩模式来精确控制你的SVG图像,你可以在任何打印机上使用最大解析度打印图像.而不会出现通常图像放大后打印的锯齿现象.SVG图像始终是光洁整齐的,不含有边缘的锯齿化.打印时,所有的字体,图形和滤镜效果都可以完整清晰的被打印.
SVG另一个特征是可以打印当前显示的图像.在上面的学习中,我们已经知道SVG可以对图像中物件进行控制.在下面的例子中,我们看到通过选择物件的显 示属性,在屏幕中可以得到不同的图像,试着将这些图像打印,你会发现,只有显示的图像被打印了.这一点将给图像输出带来非常革命性的思路,也使输出更能按 照客户的需求.
***附js6
继续下一步学习，请进入“蓝骑士SVG教程:SVG动态与动画”部分。
(THE END)
