SVG入门(1)本文假设读者对XML技术已经很熟悉。 如果你从事的是与图象有关的网页设计工作,那你一定听说过可放缩矢量图形(Scalable Vector Graphics SVG),或许你已经下载了浏览SVG文件的浏览器插件。SVG是用来描述二维图形的XML语言,最重要的特点是它不是一个私有格式。SVG是开放标准,由W3C建议。 SVG文件结构 让我们从SVG的文件结构开始对SVG有一个整体的印象。
这个独立的SVG文件要复杂一点:
样式 样式属性是SVG的重要参数。样式定义了SVG图元怎样被渲染。它被用来:
SVG的样式属性在很大程度上与CSS和XSL类似。 以下例子中样式属性“fill”和“stroke”定义了红色填充,蓝色勾边。
坐标系统 一个SVG图形应该在一个有限的区域内绘制,这个区域就是SVG视区。视区的尺寸由SVG文件和它的父文档共同决定。一个视区具有以下参数:用像素表示的高度和宽度,每一个像素是多少厘米。 视区有两个坐标系:视区坐标系和用户坐标系。初始化时,这两个坐标系原点与视区原点重合,一个单位长度就是一个像素。但用户可以任意定义新的用户坐标系。 路径 路径是一个图形的轮廓,可以对路径描述的图形进行勾边、填色、或把它做为剪切路径使用,也可以把这三者进行组合。 路径是通过“当前点”的概念来描述的。这很象是用笔在纸上画图,当前点就是笔的位置,随着笔在纸上移动,一条“路径”就被画出来了。使用路径,可以定义任何想要的图形,就象有了一支笔和一张纸,然后就随便画吧。 用来定义路径的动作有:
将多条独立的路径组合起来,就形成了组合路径,可以描述更加复杂的图形。 一个简单的路径例子:
基本图元 SVG提供了以下几种基本图元:矩形(包括圆角矩形)、圆、椭圆、直线、多线和多边形。 实际上用路径来画这些图形也是完全等效的,只是要麻烦一点(有现成的就不用自己画了)。这些基本图元也可以进行勾边、填色或作为剪切路径使用,具有与路径相同的特性。 一个最简单的画矩形的例子:
|
SVG入门(2)
作者:徐悦
文本
SVG中,文本是作为图形处理的。本文和其它图形元素没什么区别,用法也差不多,因此也没有自动换行,大小写变化等文本编辑特性,需要自己处理。
一行文本可以被渲染成普通的直线形,也可以按照某一路径渲染,比如把一行文本写成一个圈,或写成波浪状等。SVG支持各种字体和字号,也支持文本的横排或竖排,从左到右、从右到左(如阿拉伯语或希伯来语)或双向混合的排列。
另一方面,SVG文本同时也是XML数据,因此具有以下特性:
- 可以通过某种方式(如转换为语音)被有视觉障碍的人阅读;
- 在大多数情况下,可以选中,通过系统剪贴板复制;
- 兼容XML的搜索引擎可以相对其它XML数据一样对SVG文本起作用。
一个文本的示例:
<text x="2.5cm" y="1.5cm" style="font-family:Verdana; font-size:16pt; fill:blue"> |
关于颜色
SVG支持用几种不同的模式对图形和文本进行填色或勾边:
- 单一色;
- 变色(线性渐变和放射状渐变);
- 图案填充(用矢量图或图象平铺填色)。
剪切、蒙板和混合
剪切是以路径、文本和基本图元或任何它们的组合作为剪切路径,“覆盖”到待处理图形上,在剪切路径内部的图形将被完全显示,外部的则不显示。蒙板是将两副图形按任意透明度进行叠加,融合。
两者的区别在于:剪切是一种“硬”蒙板,覆盖在上方图形的像素只分为透明和不透明两种(剪切路径内部的像素透明,外部的不透明);而蒙板图形的像素的透明度可以在透明和不透明之间任意取值,因而达到渐变或融合的效果。而混合可以达到更好的融合效果,也更复杂。SVG支持简单alpha混合。
简单的说,剪切控制图形像素的透明和不透明;蒙板控制图形的每一个像素透明到什么程度;而混合除了控制透明度外,还可以控制上下两副图形对应像素的颜色该怎样融合。
滤镜
滤镜效果是对所给图形进行一系列的处理而达到的最终效果。下图是一个简单示例:
滤镜效果要用<filter>定义。实际上,一个滤镜是由一系列基本滤镜组合而成的,每一个基本滤镜都对一副或几副图形进行一项简单处理(如模糊、加亮)而得到一个结果,这个结果又可以被下一个滤镜进一步处理。
当一系列滤镜用<g>标签组合起来,这些滤镜就成了一个整体。一组滤镜中单个滤镜的处理效果不会显示出来,而被临时保存起来。
下面的图是复杂一点的滤镜效果,不过确实够酷,心动了吧?
交互:
SVG是可交互的。交互可以有以下几种形式:
- 通过鼠标事件激活动画或脚本。
- 点击图形特定部分转到其它页面。
SVG定义超链接很方便,用<a>。下面例子定义了一个红色椭圆,点击可转到www.w3.org:
<a xlink:href="http://www.w3.org"> <ellipse cx="2.5cm" cy="1.5cm" rx="2cm" ry="1cm" style="fill:red"/> |
- 对图形进行放大或缩小。
- 随着鼠标位置变化改变鼠标的图标。
脚本
要使用脚本功能首先要指定脚本语言。和ASP类似,可以在SVG文件头部指定默认脚本语言,也可以在使用脚本的地方的指定(一般用ECMAScript)。
脚本最普通的用途是响应事件。
下面这段脚本,鼠标在圆形内部单击的时候,圆形放大或缩小:
<script type="text/ecmascript"> |
动画
正如你所期望的,SVG也支持动画。可以通过以下几种方法获得动画效果:
- 使用SVG动画元素。SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀、收缩、旋转和变换颜色。
- 使用SVG DOM。SVG DOM兼容DOM1和DOM2,而SVG又定义了一套附加的DOM接口,支持脚本动画。通过这个方法可以获得各种动画效果。脚本语言中的定时器对象可以用来启动和控制动画。
- SVG被设计为支持未来版本的SMIL。SMIL将被模块化而与SVG及其它基于XML的语言连接,产生动画效果
SVG入门(3)
作者:徐悦
常见的SVG览器
说到这里你应该对SVG有一个大概的了解了。那么怎样才能显示SVG图形呢?答案用SVG浏览器,较常见的有下面几种。
CorelDraw 9 SVG过滤器
Corel公司的免费测试软件,版本:beta,运行环境:Windows。
是Corel Draw 9.0的SVG过滤器,可将版面图形、图象、文字等元素以SVG的格式输出。使用时需要安装Corel Draw 9.0。
IBM SVGViewer
IBM公司的免费软件,版本:0.3c,运行环境:Windows,JAVA。
SVGView用Java语言编写,使用Java 2D和Java XML解析器解析、处理并在浏览器上显示本地或远端服务器上的SVG文件。运行需要时要安装JAVA 2.0以上的运行环境和IBM的XML4J XML解析器。
处理时,SVGView先将文件交给XML解析器,产生结构树,然后遍历整棵树,在此过程中调用适合的Java 2D API。比如,文件中定义了画一个正方形,则调用画正方形Java 2D API函数。
CSIRO SVG浏览器
Csiro公司的免费软件,开放源码,版本:0.8,运行环境:Windows,JAVA。
也是用Java语言编写的,运行需要时要安装JAVA 1.2以上的运行环境(使用了Java2d)和Xerces解析器。
以Toolkit形式提供,其中包括SVG viewer,SVG DOM和可将SVG文件转存为多种图形格式的实用程序。
Adobe SVGViewer
Adobe公司的免费软件,版本:2.0测试,运行环境:Windows。
Adobe公司开发的IE和Netscape的SVG plugin,安装后在IE和NetScape上可直接浏览SVG格式文件。支持SVG DOM,并含有CSS解释器,也可以将文件转换成其它的图象文件格式