SVG——新一代Web设计及互动媒体的革新
首页 SVG入门 SVG介绍 面向未来的可升级矢量图形 - 二、SVG中对图像过滤操作的支持

面向未来的可升级矢量图形 - 二、SVG中对图像过滤操作的支持

文章首页
面向未来的可升级矢量图形
一、SVG中对矢量图形的支持
二、SVG中对图像过滤操作的支持
三、SVG中对动画的支持

2 SVG中对图像过滤操作的支持

  目前网上传输的图像文件主要采用GIF、JPEG和PNG三种文件格式。尽管它们具有高压缩比、低容量的优点,但即便要将其做一点微小改动,也必须利用图像软件将其重新制作重新存储,非常繁琐。SVG支持对于图像的一系列常用过滤器操作,使得图像效果调整的任务可以在客户端进行。同样,这些过滤器操作也可应用于图形之中。

  使用标记<filter>可以定义过滤器效果,在其中按照要施加的过滤操作的顺序依次罗列相应的标记。现在我们来看一个W3C在SVG标准中给出的例子:

图5 W3C在SVG标准中给出的例子代码

   其浏览效果是:

 

图6 W3C在SVG标准中给出的例子效果

   这个SVG描述的基本图形是蓝框灰色矩形,里面有一个红色环行跑道,再里面是一个红色圆头矩形,中间有"XML"的白色文字。那么,它是如何通过一系列的过滤操作得到上面的效果呢?我们就来一步步看一看。

图7 SVG实例图解说与分析