SVG——新一代Web设计及互动媒体的革新

Scalable Vector Graphics 1.1 (SVG)规范简介

2008.03.16 Vicos

来源：SVG中国(ChinaSVG.COM)
翻译：vicos
英文版本：http://www.w3.org/TR/SVG/

　　SVG 1.1规范简介,介绍了SVG的规范起源及发展历程，并进一步阐述了SVG的建立标准的目的以及用途。文章最后部分重点介绍了SVG的语法规则及功能简介。

1 原提案之公司及人员

　　Jon Ferraiolo, Adobe Systems (SVG1.0 & SVG1.1)
　　藤沢 淳 (FUJISAWA Jun), Canon (SVG1.1)
　　Dean Jackson, W3C/CSIRO (SVG1.1)

2 本规范的起源及发展历程

2.1 起源

  • Flash目前是相当红的一项技术，即使没用过这种技术，那一定也看过 Flash 动画。因为是向量图形所以档案小、有动画功能、可以互动并且有好用的工具。可变式向量图形和 Flash 差不多。
  • 因此W3C也希望能出一种应用在XML的类似FLASH语法，于是便出现了SVG。

2.2 发展历程

  • SVG 1.0 Specification于1999年2月11日被W3C订为Working Draft
  • SVG 1.0 Specification于2001年9月4日被W3C订为Recommendation
  • SVG 1.1 Specification于2001年10月30日被W3C订为Working Draft
  • SVG 1.2 Specification于2002年11月15日被W3C订为Working Draft
  • SVG 1.1 Specification于2003年1月14日被W3C订为Recommendation

3 SVG规范的目的及用途

3.1 目的

  • 利用已模组化的语言(modularized language)可以在XML中撰写出二维矢量或混合矢量/光栅的图形。
  • 简言之就是可以实现出XML的FLASH版。

3.2 用途

　　可变式向量图形和Flash的功能差不多，但是却没有Flash那么热门。不过，可变式向量图形还是有它的优点，在于可以和全球资讯网协会的其它标准进行整合(像CSS、DOM、资源描述架构...等)。并且未来或许会用在 PDA 或行动电话上。

4 SVG基本介绍

  • SVG是一种向量图形语言，它可以显示向量图形(其实是一堆文字的组合)而且是全球资讯网协会推动的标准之一。
  • SVG有三种图形物件，第一种就是向量图形(长方形、图形、三角形、多边形...等)、第二种是图案(像SVG、GIF、JPG...等)、第三种是文字(可以对图形搜寻文字)。
  • 除了档案小的优点外，当然也有动画的功能，就像 Flash 一样有动画的功能。

5 SVG语法介绍

  • 与HTML相类似，基于XML的SVG，语法和格式也是结构化的。所谓结构化，也就是档中的物件通过特定的元素标籤定义，任何元素都可以作为物件进行管理，档是框架式的。掌握基本的档框架，就可以阅读、编辑和创作自己的档。
  • SVG使用一组组的元素标籤，创建和组织档以及档中的物件。每一个SVG档都包含最外层的标籤。该标籤用于声明SVG档的开始和结束。下面的代码是一个通常的独立SVG档的头部标识： <"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  • 在SVG语法中，常见的SVG标籤包括<SVG>与<g>。

6 使用SVG

6.1 浏览SVG档案

  • 可于Adobe网站下载SVG viewer或安装Adobe Reader4.0以后可在瀏览器上瀏览SVG档案。
  • 网址:http://www.adobe.com/svg/viewer/install/?编辑SVG程式
  • 使用Adobe Illustrator
  • 使用Ulead PhotoImpact
  • 使用OpenOffice Draw，是目前不用钱的软体中，製作SVG最强的工具。
  • 因为其实SVG是文字档，因此就算要用笔记本或任何文字编辑软体编辑即可。

6.2 编辑SVG档案

　　6.2.1 使用PhotoImpact
　　PhotoImapct是友立公司所出的影像编辑软体，为国产软体中功能最强大的软体。
　　目前最新版本为8.0版，试用版软体下载位置：http://www.ulead.com.tw/pi/trial.htm
　　PhotoImpact虽然无法编辑SVG档案，但是可以将编辑好的图形档匯出成SVG档案。

　　6.2.2 使用Illustrator
　　Illustrator是Adobe公司所开发的专业向量绘图软体，由于当初SVG就是由Adobe等公司大力提倡，因此该软体对SVG的几乎是完全支援。
　　目前最新版本为10.0，试用版下载位置：http://www.adobe.com/support/downloads/main.html
　　Illustrator可以直接对SVG档案作编辑。

 

7 功能介绍

  • Coordinate Systems,Transformations(座标系统,转换)

　　SVG中可以使用座标来决定图形的位置
　　SVG可以将图形转换成翻转或做比例缩放

  • Path(路径)

　　利用座标来订定描绘的路径

  •  Basic Shapes(基本形状)

　　绘出基本的形状，如:正方形、三角形、矩形、椭圆形、多边形等

  • Text(文字)

　　加入文字，并且可设定起始座标?文字可与图形搭配使用

  • Gradients and Patterns(色阶和花样)

　　区域顏色作线性阶层或放射阶层?图形中可加入一些花样

  • Filter Effects(滤镜效果)

　　可将图形或文字经由各种类型的滤镜显示出来

  • Link(超连结)

　　可以经由图形或文字中做出连结的动作

  • Scripting

　　可以加入script使得图形或文字的状态改变

  • Animation(动画)

　　可以利用数个SVG档来做出动画的效果

8 SVG与其它XML规范的关连

　　作为W3C的推荐格式，SVG与现有的其他开放标准有很好的相容性。这些标准包括DOM1，DOM2，CSS，XML，XLINK，XSLT，XSL，HTML，XHTM等。
　　SVG与其他组织的标准化技术也能很好的协调一致，如ICC，URI，UNICODE，sRGB，ECMAScript/JavaScript，Java等。
　　SVG完全支持DOM(文件物件模型)。因而SVG以及SVG中的物件可以通过脚本语言接受外部事件的驱动，例如滑鼠动作、键盘动作等，实现对自身或对其他物件、图像的控制，製作互动式的图像和动画。

(THE END)

 

将要更新