目录

2.1 名词解释：SVG

2.2 SVG主要概念

2.3 Web页面中应用SVG选项

2.1 名词解释：SVG

2.2 SVG主要概念

2.3 Web页面中应用SVG选项

2.1 名词解释: SVG
SVG—可伸缩矢量图形（Scalable Vector Graphics）, 用于可格式化图形（stylable graphics）的XML（XML）语法，象XML命名空间（XML namespace）一样应用。
可伸缩 Scalable
可伸缩意味着在任意放大或缩小时保持不变。从图形的概念看，可伸缩意味着图形不是限定在单一的、固定的像素大小。而从Web的角度理解，可伸缩代表着一种专门技术，适用于大量文件、大量用户和不同的应用。SVG的可伸缩能够满足这两种要求。
SVG图形可缩放成不同的显示分辨率，比如，可以用打印机的最高分辨率输出，或在不同分辨率的显示器上显示同样大的图形。同一个SVG图形，可以不同大小放在同一页面或不同页面。SVG图形可以放大显示细节，以帮助低分辨率的用户。
SVG图形时可缩放的，因为同样的SVG内同，可以是独立的图形，也可以被其他SVG图形引用或包含。因此，允许一个复杂由不同的部分组成或者由不同的人完成。符号（symbol）、标记（marker）和字体（font）组成可重用的SVG图形构件，最大限度地利用HTTP的缓存优势，避免对有效符号的集中注册。
矢量Vector
矢量图形包含直线和曲线这样的几何图形对象，与栅格格式（如PNG 和 JPEG）相比，具有较大的可伸缩性。栅格图像只能把信息存储在图形的每个像素中。典型地，矢量图形可以集成栅格图像，并将他们与矢量信息集成，如进行路径分割（clipping paths）以生成完整的图表，SVG也不例外。
由于目前所有的显示设备都是基于栅格的，栅格和矢量图形的差别在于他们什么时候被矢量化。客户端的矢量图形在服务器上被栅格化。SVG允许对这个处理过程的控制。例如：允许把低质量的矢量图形进行平滑的艺术处理，消除明显锯齿化特征。SVG也提供客户端的栅格过滤效果（raster filter effects），在转换成矢量图形时，保留象形阴影这样的特殊效果。
图形Graphics
多数XML语法或是描绘文本信息，或是像金融信息那样的数据记录。他们通常仅提供基本的图形能力，还比不上HTML的'img' 元素。SVG用提供对矢量和栅格/矢量混合图形的丰富的、结构化的描述来弥补不足，它是独立的，就像其他XML名字空间一样。
可扩展标记语言 XML
XML—W3C推荐的用于结构化信息交换的标准，已经变得非常流行，而且得到了广泛的、可靠的应用。SVG用XML形式呈现，并建立在这个坚实的基础之上，而因此获得了健全的国际化基础、强大的结构化能力以及对象模型等诸多好处。通过建立在现有的、清晰实现的规范的基础之上，基于XML的语法无需从头开始，可以开放地部署。
命名空间Namespace
独立的纯SVG阅读器当然十分有用，但SVG也可在多命名空间XML应用中用作组件（component）。这使得每个名字空间的功能更加强大，并允许创建全新的内容。例如，SVG图像可以包含在应用任何面向文本的XML名字空间的文档中，包括XHTML。比如一篇科学文档，可能在文档中还用到数学的MathML，而SVG和SMIL的组合，将产生基于时间的、图形复杂的、生动的展示效果。
SVG对任何用到图形的多重命名空间语法都是一个非常好的通用组件。
可风格化Stylable
在外观控制、灵活性、快速下载、更好维护等概念上讲，风格页面的优势现在被普遍接受，使用文本也是这样，SVG将这样的控制延伸到了图形。
脚本（Scripting）、文档对象模型（DOM）、级联风格页（CSS）的结合，常常被叫做动态HTML（Dynamic HTML），它已被广泛地用于动画、交互和外观效果。SVG允许用脚本操作文当属和风格页。
2.2 重要的SVG概念Important SVG concepts
图形对象Graphical Objects
对任何的XML语法，必须考虑到时基于什么建模的。对文本格式，建模通常是在段落和词汇级，而不是个别的名词、副词或音素。同样地，SVG在图形对象级对图形建模，而不是个别的点。
SVG提供一般的路径元素，用来创建大量的图形对象，也提供公共的基本形状（basic shapes），如矩形、椭圆等。这些对手工编码十分方便，也可以像更普通的路径元素一样使用。SVG提供很好的对坐标系统（图形对象在其中定义）和变换（在渲染时应用）的控制。
符号Symbols
SVG本应该提供定义好的一些标准符号的，但定义那些符号呢？对电子图、绘图、流程图等总是有层出不穷的符号，人们需要他们，而总是说在下一个版本中提供。SVG允许用户创建、重用和共享自己的符号，不需要集中注册。用户团队可以创建、优化他们需要的符号而不必请示某个委员会。设计人员可以确认他们所用符号的准确的图形外观，不必担心符号不兼容。
符号可以不同大小、不同倾斜角度使用，还可以重新格式化以适应其他图形成分。
栅格效果Raster Effects
许多现有的Web图形使用绘画包中的过滤操作来创建模糊、阴影、灯光效果等等。对在客户端栅格化的矢量图形，这样的效果是不可能的。SVG允许声明的滤镜规范，既可以是单独的，也可以是组合的，当SVG图形渲染时，他们可以在客户端应用。这些声明方式，可以使图形保持可伸缩性并可以不同分辨率显示。
字体Fonts
图形丰富的素材常常有赖于特殊的字体和恰当的字形间距。在许多情况下，设计者把文本转换成轮廓以避免字体被替换的问题。这意味着原来的文本就本存在了，也就无法搜索和访问了。让设计者欣慰的是SVG包含字体元素，使得文本和其图形都得以保存。
动画Animation
动画可以通过脚本对文档的操作实现，但脚本编写困难，而且在不同平台工具中交换信息更加困难。SVG对开发者的回应是，它包含了声明的动画元素，这些元素由SVG和SYMM工作组写作设计完成，这使得现有在Web图形页面中实现的动画元素在SVG中也可以表现。
2.3 在Web页面中使用SVG的选项Options for using SVG in Web pages
有很多方式把SVG内容包含到Web页面中，这里是一些选项：
· 独立的SVG Web页面A stand-alone SVG Web page
这种情况下，SVG文档（比如一个MIME类型是"image/svg+xml"的Web资源）直接在用户代理（浏览器）中装载。SVG文档就是呈现给用户的Web页面。
· 通过引用嵌入 Embedding by reference
这时，一个父Web页面引用一个独立存储的SVG文档，指定给定的SVG文档作为该Web页面的嵌入组件。对HTML或XHTML有三个选项：
o 在HTML页面中使用图形HTML/XHTML的 'img'元素是最常用的元素。为了快速显示，图形的宽度和高度可以作为其特性给定。对关闭图形显示功能的用户来说，就需要alt特性制定图形的替换文本。alt特性的字符串中不能包含任何标记。'longdesc'特性能够用来指定较长的描述，通常以HTML形式，可以包含标记和丰富的格式。
o HTML/XHTML 的'object'元素可以包含嵌套其中的其它元素，不像'img'元素是空的。这意味着通过嵌套的'object'元素能够提供几种不同格式，并最后给定一个替换文本（包含标记和链接等）。最外层的可显示的元素将被使用。
o HTML/XHTML的 'applet'元素能够调用Java applet在Web页面中查看SVG内容。这些小程序（applets）能做很多事情，但通常是用来显示图形，特别是那些不常见的格式，或是由于某种原因需要程序控制显示的时候。
· 内置嵌入Embedding inline
SVG内容直接嵌入到父Web页面中，例如，在一个HTML Web页面中，包含在XHTML中的SVG片断文本。
· 用HTML 'a'元素的外部链接 External link, using the HTML 'a' element
它允许任何独立的SVG查看器使用，可以是（但不必是）不同的显示HTML的应用程序。这个选项通常用来显示不常见的图形格式。
· 通过CSS2 或 XSL属性引用 Referenced from a CSS2 or XSL property
如果用户代理支持CSS风格的XML内容或XSL格式对象，而且是SVG标准浏览器（Conforming SVG Viewer），那么，该用户代理就支持SVG资源引用，无论是允许栅格图像引用的CSS属性还是XSL属性，包括铺盖（tile）SVG的能力（无论是否必要）和把SVG图形合成到背景中（当有透明选项时）的能力。比如CSS和XSL中都有的'background-image' 和 'list-style-image'属性。