svg入门（转）

SVG入门(1) 本文假设读者对XML技术已经很熟悉。 如果你从事的是与图象有关的网页设计工作，那你一定听说过可放缩矢量图形（Scalable Vector Graphics  SVG），或许你已经下载了浏览SVG文件的浏览器插件。SVG是用来描述二维图形的XML语言,最重要的特点是它不是一个私有格式。SVG是开放标准，由W3C建议。 SVG是一种用XML定义的语言，用来描述2维矢量及矢量/栅格图形。SVG提供了3种类型的图形对象：矢量图形（vector graphic shape例如：由直线和曲线组成的路径）、图象(image)、文本(text)，图形对象还可进行分组、添加样式、变换、组合等操作，特征集包括嵌套变换（nested transformations）、剪切路径（clipping paths）、alpha蒙板（alpha masks）, 滤镜效果（filter effects）、模板对象（template objects）和其它扩展（extensibility）。 SVG图形是可交互的和动态的，可以在SVG文件中嵌入动画元素或通过脚本来定义动画。 本文将向你系统的介绍SVG的基本知识，并通过一个例子让你亲自动手“绘制”一副SVG图形。 SVG文件结构 让我们从SVG的文件结构开始对SVG有一个整体的印象。 一个SVG片段由任意个包含在<svg>标签中的SVG段组成，这些段可以嵌套。SVG片段可以以单独的“SVG文件”形式存在，也可以嵌入到XML文档中。下面是一个SVG片段嵌入XML文档的例子： <?xml version="1.0" standalone="yes"?>         <parent xmlns="http://someplace.org"                xmlns:svg="http://www.w3.org/2000/svg">            <!-- parent contents here -->            <svg:svg width="4cm" height="8cm"> <svg:ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" />         </svg:svg>            <!-- ... -->         </parent> 这个独立的SVG文件要复杂一点： <?xml version="1.0" standalone="no"?>          <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"            "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd"> <svg width="5cm" height="4cm">            <desc>Four separate rectangles</desc> <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/> <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/> <rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/> <rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/> </svg>   样式 样式属性是SVG的重要参数。样式定义了SVG图元怎样被渲染。它被用来： 描述一个对象怎样被绘制，是勾边、还是填色，用多粗的线画、或者用虚线画； 定义文本参数，如字体，字号； 对图元的渲染结果产生影响，如加上剪切路径、蒙板、滤镜。 SVG的样式属性在很大程度上与CSS和XSL类似。 以下例子中样式属性“fill”和“stroke”定义了红色填充，蓝色勾边。 <?xml version="1.0" standalone="no"?>          <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"            "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd"> <svg width="10cm" height="5cm"> <rect x="2cm" y="1cm" width="6cm" height="3cm" fill="red" stroke="blue"/> </svg>   坐标系统 一个SVG图形应该在一个有限的区域内绘制，这个区域就是SVG视区。视区的尺寸由SVG文件和它的父文档共同决定。一个视区具有以下参数：用像素表示的高度和宽度，每一个像素是多少厘米。 视区有两个坐标系：视区坐标系和用户坐标系。初始化时，这两个坐标系原点与视区原点重合，一个单位长度就是一个像素。但用户可以任意定义新的用户坐标系。 路径 路径是一个图形的轮廓，可以对路径描述的图形进行勾边、填色、或把它做为剪切路径使用，也可以把这三者进行组合。 路径是通过“当前点”的概念来描述的。这很象是用笔在纸上画图，当前点就是笔的位置，随着笔在纸上移动，一条“路径”就被画出来了。使用路径，可以定义任何想要的图形，就象有了一支笔和一张纸，然后就随便画吧。 用来定义路径的动作有： moveto：设定一个新的当前点（把笔放到纸上某一位置） lineto：画一条直线 curveto：画一条Bézier曲线 arc：画圆弧或椭圆弧 closepath：从当前点连一条直线到起始点，闭合当前路径 将多条独立的路径组合起来，就形成了组合路径，可以描述更加复杂的图形。 一个简单的路径例子： <path d="M 100 100 L 300 100 L 200 300 z"          style="fill:red; stroke:blue; stroke-width:3"/> 基本图元 SVG提供了以下几种基本图元：矩形（包括圆角矩形）、圆、椭圆、直线、多线和多边形。 实际上用路径来画这些图形也是完全等效的，只是要麻烦一点（有现成的就不用自己画了）。这些基本图元也可以进行勾边、填色或作为剪切路径使用，具有与路径相同的特性。 一个最简单的画矩形的例子： <rect x="4cm" y="1cm" width="4cm" height="2cm"            style="fill:yellow; stroke:navy; stroke-width:0.1cm" />

 

 

 

 

 

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">                   Hello, out there </text>

关于颜色

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"/>            </a>

• 对图形进行放大或缩小。
• 随着鼠标位置变化改变鼠标的图标。

脚本

要使用脚本功能首先要指定脚本语言。和ASP类似，可以在SVG文件头部指定默认脚本语言，也可以在使用脚本的地方的指定（一般用ECMAScript）。

脚本最普通的用途是响应事件。

下面这段脚本，鼠标在圆形内部单击的时候，圆形放大或缩小：

<script type="text/ecmascript"> <![CDATA[     function circle_click(evt) {       var circle = evt.target;       var currentRadius = circle.getAttribute("r");       if (currentRadius == 100) circle.setAttribute("r", currentRadius*2);       else         circle.setAttribute("r", currentRadius*0.5);     }   ]]> </script>

动画

正如你所期望的，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解释器，也可以将文件转换成其它的图象文件格式