SVG 简介

一：关于SVG

      这一份说明规范了可伸缩矢量图形的特性和语法规则。

      SVG是一种基于XML的描述二维图形的语言。SVG兼容三种图形对象：矢量图形，图片，文本。图形对象可以组合分组，添加样式，变形和组合应用到渲染已存在的图形对象。这些特性设置包括嵌套变形，剪切路径，alpha蒙板和滤镜效果与模板对象。

      SVG图形富有交互性和动态性。SVG的动画效果通过SVG的动画元素或者动作脚本来实现的。

      复杂的SVG应用有可能是通过使用可以解析SVG所有的元素，属性和内容的脚本来完成的。一组丰富的事件句柄"onmouseover"和"onclick"被所有的SVG对象实现。由于其他Web应用的影响和兼容性，在Web应用中一些特性可以同时应用到XHTML和SVG元素上。    

       SVG是一种富含图形元素的语言。由于可访问性的原因，假如有一份具有高级结构和警示的原始资源文档，它会被推荐使用一些方法让高级的信息变得更加有效，要么通过使原始信息变得有效，要么通过使用提供有效地选择性版本来选择性的格式化要传达的高级信息，或者通过使用SVG的工具来将高级的信息导入到SVG中。对于在可访问性上建议采用的技术，可以参考访问性章节。

       SVG1.1是SVG1.0的模块化版本。参考文档类型附录有关于DTD结构怎样兼容其他XML类型的内容，有助于了解SVG怎样兼容于其他的文档。

二：SVG MIME类型，文件名称扩展

        SVG的MIME类型是"image/svg+xml"。这个MIME类型的声明仍然在W3C中开发。

        在所有的平台上，SVG文件被认定的扩展名是".svg"。同样的，在所有平台上，SVG文件的压缩格式被认定的扩展名是".svgz"。

三：SVG的命名空间，公共 标识和系统标识   

      SVG命名空间：http://www.w3.org/2000/svg

      SVG1.1的公共标识：PUBLIC "-//W3C//DTD SVG 1.1//EN"

      SVG1.1推荐的系统标识：http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd

     下面是一个SVG文档的文档头部声明：

      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

四：与其他标准的兼容性影响

      SVG的影响力和完整W3C标准规范相互影响。通过影响力和完善其他完整的标准，SVG变得越来越强大并且使得使用者越来越容易学习与其他规范的交互。

       下面描述了在一些方面SVG与其他的Web应用的兼容性和影响与作痛：

        1.SVG是一种XML的应用，兼容各种XML的规范

        2.SVG兼容XML的命名空间规范

        3.SVG利用XLink为IRI提供了引用并且导入了在定义在XML Base中基础IRI规范和支持。

        4.SVG内容可以通过CSS或者XSLT附加样式。

        5. SVG支持相关的CSS和XSTL的属性和路径，以及CSS的选择语义和特性

        6.外部样式表被引用的机制在Associating Style Sheets with XML documents Version 1.0中被文档化了。

        7.SVG引入了一个完整的DOM，并且遵循DOM1规范。SVG的DOM同HTML的DOM一样，具有DOM1规范的

            高度兼容性和连续性。除此之外，SVG的DOM还支持大量的DOM2定义的规范，包括事件和样式。

        8.SVG包含了一些SMIL3.0的特性和方法，包括"switch"元素和"systemLanguage"属性。

        9.SVG的动画特性是有SMIL开发组和SVG开发组联合开发的。SVG的动画特性包含和继承了SMIL动画规范中一

           般用途的XML动画能力。

        10.SVG已经被设计成为被SMIL使用静态或动态的SVG的多媒体组件。

        11.SVG在尽力获取HTML4和XHTML1.0的最大兼容性。许多的SVG的特性在HTML之后被模型化，包括引入使

             用的样式表，调用事件句柄的方法，实现DOM2定义的方法。

        12.SVG也兼容W3C的国际化标准，引用 包括：UNICODE和CHARMOD。另外还可以参考：Internationalization Support 

         13.SVG兼容W3C的Web引用。

        在支持DOM2核心以及其他支持XML语法的环境，也会支持SVG和SVG DOM，一个脚本就可以同时处理XML文档和SVG的图形 ，在这种情况下，就可以对多个XML的命名空间采用一组动态的交互的脚本。

五：术语

     在这份规范中，关键字"MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", 和 "OPTIONAL"将会在[RFC2119]中被解释。如此为了方便阅读，这些关键字将不会在这份规范中以大写字母的形式出现。

      与此同时，这份规范向作者和使用机构推荐良好的实践。这些推荐并不是一致的和规范的并且规范并不是依赖于实现的。   

六：定义

animation元素：一个aniamtion元素就是用来通过修改另一个元素的属性或者内容来实现动画的元素。下面的元素

                           就是动画元素：animateColor,animateMotion,animateTransform,animate,set

animation event属性：一个动画事件属性就是一个关联与动画元素动作的事件属性。动画事件属性

                           有"onbegin","onend","onload","onrepeat"

basic shape：基本图形是已经在SVG中预先定义的一系列通用图形。包括："circle","ellipse","line","polygon","ployline","rect"

 canvas: 一个可以平面，上面承载了图形元素 ，这个平面可以是一个真实的物理媒体，例如一张纸或者一个抽象的物理平面，或者一个 分配计

               算机内存的区域 

clipping path:裁剪路径，一个"path","text"和基本图形组成的作为蒙板的作用边界，在边界内的可以使用蒙板进行过滤，边界外的没有影响。

container element：一个可以包含图形元素或者其他容器元素作为子元素的元素。容器元素有："a","defs","glyph","g","masker",

                         "missing-glyph","pattern", "svg", "switch" ,"symbol"                           

conditional processing attribute：一个条件处理属性就是一个控制着在其上面出现的元素被处理或不被处理的属性。大多数元素，不是全部，可能在它们上面有

                         条件处理属性，详情参阅：Conditional processing。定义在SVG1.1标准上的条件处理属性有："requiredExtensions",

                          "requiredFeatures" ,"systemLanguage"

core attributes：核心属性就是在任何SVG元素上都有规范的属性。详情参阅通用属性：Common attributes。核心属性有："id","xml:base",

                  "xml:lang","xml:space"

current innermost SVG document fragment：一个XML文档子树，从当前的"SVG"元素中获取的给定SVG元素集合，从最近的SVG元素开始到当前位置之间。

current SVG document fragment：一个XML文档子树，从最外层的"SVG"开始的SVG元素集合，它从最外层的SVG到当前元素之间的所有SVG元素包括容器元     

                              素的集合

current transformation matrix (CTM)：坐标变换定义了数学上从一个平面坐标系到另一个坐标系的线性变换3*3的矩阵，可以通过[x1 y1 1]=[x y 1]*matrix。

                                       通用坐标变换就是从用户使用的坐标系到当前可视坐标系的变换矩阵。详情参考：Coordinate system transformations

descriptive element：一个为其父元素提供描述性信息的元素。明确的指出，下面的元素是描述元素："desc","metadata","title"

document event attribute：文档事件属性就是在一个特定的文档范围内的事件触发脚本运行的事件属性。文档事件属性有："onabort","onerror",

                          "onresize","onscroll","onunload","onzoom"

event attribute：一个事件属性就是一个被分派到一个元素上被声明的可以启动脚本运行的属性。

fill:一个填充图形内部闭合区域和文本区域内的操作

filter primitive attributes：原始过滤属性就是一组对所有过滤通用的属性集合。主要有："height","result","width","x","y"

filter primitive element：一个原始过滤元素就是在过滤图形中可以被用作指定节点的子过滤元素。下面的元素是在SVG1.1中定义的原始过滤元素：

                       "feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting",

                        "feDisplacementMap","feFlood","feGaussianBlur","feImage","feMerge","feMorphology","feOffset",

                         "feSpecularLighting","feTile","feTurbulence"

font:一个字形会使得一个有组织机构的可以共用一个外观样式的字体集合呈现出一致的效果。

gradient element：一个渐变元素就是定义了一个渐变服务的元素。SVG1.1定义的渐变元素有："linearGradient","radialGradient"

graphical event attribute：一个图形事件属性就是一个交互性可以启动脚本运行事件的事件属性。参阅：Event attributes on graphics and container elements，

                       图形事件属性有："onactivate","onclick","onfocusin","onfocusout","onload","onmousedown","onmousemove",

                       "onmouseout","onmouseover","onmouseup"

graphics element：图形元素解释可以被应用到目标canvas上的类型。主要有："circle","ellipse","image","line","path","polygon","ployline"

                 "rect","text","use"

graphics referencing element：一个图形引用元素就是可以引用其他文档或者元素作为源图形内容的元素。主要有："image","use"

hit-testing：点击测试就是一个检测指示器时候切断一个给定图形元素的测试过程。点击测试常被用作检测鼠标事件是否被分发到元素上，对

                     鼠标移动反应是否正常，或者对变换位置图形体积文档的属性鼠标是否正常。

IRI reference：一个IRI引用就是一个带有可选择碎片标识的国际化资源标识，被[RFC3987]定义。一个IRI引用服务通常被当做一个一个资源或者是碎片资源。

                        参考：References and the ‘defs’ element

light source element：一个亮度资源元素就是能够为"feDiffuseLight"和"fespecularLighting"元素指定亮度信息的元素。在SVG1.1中被指定的亮度资源元素有：

                                     "feDistantLight","fePointLight","feSpotLight"

local IRI reference:一个国际化的资源标识[RFC3987]，它不能引入<absoluteIRI>或者<relativeIRI>并且在当前文档中呈现一个元素。参考：References and the       ‘defs’ element

mask：蒙板就是一个容器元素，里面含有图形元素或者包含着图形元素的容器元素，是一个半透明的可以组合上面的图形元素形成背景的蒙板。参考：Masks

non-local IRI reference：一个国际化的资源标识[RFC3987]，能够导入一个<absoluteIRI>或者<relativeIRI>并且常被用作一个文档或者一个元素的引用文档。

                                          参考：References and the ‘defs’ element

outermost svg element：在current SVG document fragement中最顶层的SVG元素

paint：一个paint就是提供一种将颜色值放到canvas中的方法。它可能是一系列的颜色值并与alpha值控制着混合颜色替换在canvas中的已存在的颜色。SVG支持三                  

             种类型的内建paint:color,gradients,patterns

presentation attribute：一个在SVG元素上的XML属性，可以为这个元素给定的属性指定一个值。参考：Styling。注意：虽然在任意的元素上可以为任意的属性

                                       指定值，但是并不是所有的属性都会应用到这个给定的元素上。在元素上已定义的属性值设置将会应用到元素上。

property：一个可以帮助指定如何渲染一个文档的参数。一个完整的SVG属性列表可以在Property Index中找到。属性被设置到SVG的元素上，要么使用SVG元素

                 上的呈现属性，要么使用CSS这样的样式表。

rootmost ‘svg’ element：就是一个最顶层的SVG元素，不存在一个SVG的上下文环境。参考：SVG document fragment

shape：一个由直线和曲线组成的图形元素，主要有："path","rect","circle","ellipse","line","polyline","polygon"

stroke：为图形的外边沿或者字体的外边沿渲染的操作

structural element：结构性元素就是那些定义在SVG当中初级的结构元素。主要有："defs","g","svg","symbol","use"

SVG canvas：它就是SVG内容可以在上面进行渲染的。详情参阅：Coordinate Systems, Transformations and Units

SVG context：SVG上下文是一个文档片段，所有在文档片段中的元素必须遵照用户的意愿的原则下进行处理。如果SVG的内容嵌套在XML或者XHTML中，SVG的

                        内容将不会导入rootmost "svg" element以上的父节点。如果SVG内容包含任何"foreignObject"元素，而且这些"foreignObject"元素中含有非SVG

                        的内容， 那么SVG上下文将不会导入这些"foreignObject"元素。

SVG document fragment：XML文档以"svg"元素开始的子树。一个SVG文档片段可以是一系列独立的SVG文档，或者是一个以"svg"元素闭合的XML文档片段。

                                             当一个SVG片段是另一个SVG片段的子元素的时候，这就会产生两个SVG文档片段。

SVG user agent：SVG用户代理就是一种可以快速检索，恢复和渲染SVG内容的用户代理。

SVG viewport：在SVG的画布上定义的矩形区域渲染SVG内容的视口，详情参考：Coordinate Systems, Transformations and Units

text content element：一个文本内容元素就是一个SVG元素，在其上可以含有一个文本字符串被渲染到canvas上。SVG1.1定义的文本内容元素有：

                                       "altGlyph","textPath","text","tref","tspan".

text content child element：一个文本内容子元素是一个可以允许作为另一个文本内容元素子节点的文本内容元素。

text content block element：文本内容块元素是一个独立的文本集合使用并可能包含一些子文本内容元素的文本内容元素

transformation：一种对当前坐标系CTM的修正，通过提供一些规范的修正信息（例如缩放，旋转，平移）或者提供一个或多个的转换矩阵。参阅：Coordinate system transformations

transformation matrix：坐标变换矩阵，一般是一个3*3的矩阵

user agent：用户代理的广义定义是一种获取并渲染Web内容的应用，包括文本，图像，声音，视频，图片和其他类型的内容。一个用户代理可能要求附加代理一                   

                     些类型的内容的句柄。例如一个浏览器可能运行一个单独的项目或者耦合渲染声音或视频。用户代理可能包含桌面图像浏览器，多媒体播放器，文本

                     浏览器，声音浏览器和变形技术如屏幕识别，屏幕制造，拼写修正，显示屏，声音输入软件等。

                     一个"user agent" 可能或者不可能有渲染SVG内容的能力，但是"SVG user agent"却可以做到渲染SVG内容。

user coordinate system：总体上来讲，一个坐标系统定义了在当前canvas上的位置和距离。用户当前使用的坐标系统是当前正在运行并能够定义了怎样计算位置和       

                                          长度。参阅：Coordinate system transformations      

user space：用户坐标系user coordinate system的同义词

user units：用户的一个坐标值或长度表达式可以重现在当前的用户坐标系下。因此10个用户单位在当前用户坐标系下会重现出长度为10的用户单位

viewport：在一个长方形的区域内图形元素可以被渲染

viewport coordinate system：大体上说，一个坐标系会定义位置和长度。viewpoint坐标系统就是设置"viewBox"属性之后开启的一个活动的以"svg"元素为起始点

                                                 的坐标系

viewport space：viewport coordinate system的同义词

viewport units：用户的一个坐标值或长度表达式可以重现在当前的用户坐标系下。因此10个用户单位在当前用户坐标系下会重现出长度为10的用户单位

XLink attributes：XLink属性是被用来引入外部引用资源的SVG元素。大部分导入资源XLink的属性是"xlink:href"，只要需要的资源可以被导入。其余的属性有：

                              "xlink:type","xlink:role","xlink:arcrole","xlink:title","xlink:show","xlink:actuate" 

    原文链接：http://www.w3.org/TR/SVG11/intro.html