2024年2月6日发(作者：)
Scalable Vector Graphics (SVG) 1.1 Specification
Scalable Vector Graphics (SVG) 1.1 Specification W3C Recommendation 14 January 2003
This version: /TR/2003/REC-SVG11-20030114/
Latest version: /TR/SVG11/
Previous version: /TR/2002/PR-SVG11-20021115/
摘要
本规范定义了可伸缩矢量图形(SVG)1.1版本的功能和语法: 一种描述二维矢量和矢量/光栅混合图形的基于XML的组件化语言。
本文档的现状
本部分描述文档出版时的情况，其他文档可能取代本文，次文档系列的最新状态由'W3C'维护'.
本文为2003年1月14日SVG 1.1规范建议书. SVG1.1服务于两个目的: 提供基于SVG1.0的SVG模块并包括迄今为止的SVG1.0勘误. SVG工作组确信SVG 1.1 已被社团组织,开发者和其他W3C小组广泛阅读过. 现有版本的所列出的修改清单是有效的。
欢迎对本建议提出的公众评论. 请将评论发至**************:关于网络矢量图形问题的公共电子邮件列表. 本电子邮件名录是存档的,发信者必须同意,从第一次发表起,将他们的通信进行公共存档. 欲订阅须发邮件至**********************并在标题栏注明”subscribe”.
W3C SVG 工作组发布了一个包括实施报告的SVG1.1版本的测试组件.
网上有关于本文档最新的信息. 至于本次发表,SVG 工作组未察觉有任何他们认为对SVG至关重要的含专利权的专利.
本文档由W3C 工作组创作是W3C互动领域的图形活动的一部分. W3C SVG 工作组的目标在W3C
SVG Charter (/Graphics/SVG/Group/) 中有讨论(仅限W3C 成员). W3C
SVG 工作组维护公共网址, /Graphics/SVG/, 那里有更多的背景信息. 本文的作者是SVG
工作组的参与者.
一组当前W3C建议书和其他技术文档可在/TR/ (/TR/)找到. W3C
出版物可能在任何时间更新,替换,或失效.
现有语种
本规范英文版是唯一的基准版本. 但是, 其他语言的翻译参见
/Graphics/SVG/svg-updates/
目录
•
•
•
•
•
Expanded Table of Contents
扩展目录
Copyright notice
版权声明
1 Introduction
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
介绍
2 Concepts
概念
3 Rendering Model
成像模型
4 Basic Data Types and Interfaces
基本数据类型和接口
5 Document Structure
文档结构
6 Styling
样式
7 Coordinate Systems, Transformations and Units
坐标系统,变换和单位
8 Paths
路径
9 Basic Shapes
基本形状
10 Text
文本
11 Painting: Filling, Stroking and Marker Symbols
绘图: 填充,沟边,和标记
12 Color
颜色
13 Gradients and Patterns
渐变和图案
14 Clipping, Masking and Compositing
剪切,蒙版和组合
15 Filter Effects
滤镜效果
16 Interactivity
交互
17 Linking
链接
18 Scripting
脚本
19 Animation
动画
20 Fonts
字体
21 Metadata
元数据
22 Backwards Compatibility
向后兼容性
23 Extensibility
扩展性
Appendix A: DTD
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
附录 A: DTD
Appendix B: SVG Document Object Model (DOM)
附录 B: SVG 文件对象模型(DOM)
Appendix C: IDL Definitions
附录 C: IDL 定义
Appendix D: Java Language Binding
附录 D: Java语言绑订
Appendix E: ECMAScript Language Binding
附录 E: ECMASript语言绑订
Appendix F: Implementation Requirements
附录 F: 执行条件
Appendix G: Conformance Criteria
附录 G: 一致性准则
Appendix H: Accessibility Support
附录 H: 使用途径的支持
Appendix I: Internationalization Support
附录 I: 国际化的支持
Appendix J: Minimizing SVG File Sizes
附录 J: SVG文件大小优化
Appendix K: References
附录 K: 参考
Appendix L: Element Index
附录 L: 元素索引
Appendix M: Attribute Index
附录 M: 属性索引
Appendix N: Property Index
附录 N: 特性索引
Appendix O: Feature Strings
附录 O: 特殊字符串
Appendix P: Index
附录 P: 索引
作者：…
鸣谢：
SVG 工作组特此鸣谢众多参与帮助了SVG1.1规范的开发的组外人员.他们人数之多,不胜枚举. 他们有,但不限于SVG1.0 和1.1语言(包括阅览器, 制作工具, 和服务器端转码器),的早期实现者, SVG内容开发者, 在**************和******************************电子邮件列表中贡献过的人, 其他W3C
工作组, 和W3C 团对. SVG 1.1 实在是SVG 工作组及其余的W3C和公众的共同努力. 她巨大地受益于早期实施者和内容开发者的开拓工作, 公众反馈, 和来自W3C 团队帮助.
1 简介
1.1 关于SVG
本规范定义可扩展矢量图形(SVG).的特性和语法。
SVG是一种基于XML[XML10]的二维图形描述语言。SVG允许三种图形对象：矢量图形形状（如由直线和曲线组成的轨迹）、图像和文本。图形对象可以被组合、定制样式、变形和组成先前渲染过的对象。其特性包括嵌套变换(nested Transformations)、路径剪裁（clipping paths）、蒙版（alpha masks）、滤镜效果(filter effects)和模板对象(template objects)。
SVG 图形是可交互和动态的。 动画可以既直接定义和触发(例如，把SVG动画元素嵌入SVG文本中)，也可以通过脚本控制。
通过脚本语言访问SVG文档对象模型 (DOM)，使得复杂的SVG 应用成为可能。SVG文档对象模型
(DOM)可以提供对所有元素（elements）、属性（attributes）和属性（properties）的完全访问。可以给SVG图形对象分配等许多事件句柄(event handlers)，如onmouseover 和onclick。 由于它的兼容性和对其它Web标准的影响(leveraging of other Web standards)，很多特性，比如脚本，可以在同一个Web页面中同时针对XHTML和 SVG元素编写。
SVG是一种针对复杂图形的语言。出于访问性的原因，如果一个初始源文档包含较高级别的结构和语义，建议较高级别的信息应以某种方式可用，既可以让初始源文件可用，也可以让能够传达高级别信息的其它格式的其它版本的文档可访用，或使用SVG的功能将较高级别的信息包含到SVG内容中。要获得更好的访问性的技术信息，请参见访问性。
1.1.1 模块化
这里包含的SVG模块化是对SVG 1.0的分解和一个针对提供特定功能的抽象模型集的勘误表。这些模块可以相互组合，也可以同其它规范定义的模块组合（如XHTML），以建立SVG的子集和扩展文档类型，作为SVG文档类型家族的成员。参见SVG文档家族的一致性(Conformance) 描述，以及XHTML，MathML和SVG的 [XHTMLplusMathMLplusSVG] 组合描述。
每个SVG 规范的主要节的结尾部分都有一个模块名称，例如：“文本模块”或“基本结构模块”。如果一个模块没有“基本（Basic）”前缀，则说明它包含完整地元素（elements）和属性（attributes），同规范的相应节没有约束。如果需要提供已完成模块的功能子集，则要在该模块的命名中加上前“基本（Basic）”前缀。例如，“基本文本模块”就是“文本模块”的一个子集。
在SVG 1.1中，同时包含完成模块和它的基本子集模块(如“文本模块”和“基本文本模块”)是一个错误。
1.1.2 元素和属性集
多数模块都定义了元素（elements）和属性（attributes）的名称集合。这些集合被用于描述特定元素的一组属性（如Style属性集合），或作为特定元素的子元素的一组元素（如Shape元素集合）。所有集合的名称都以大写字母开头。
在定义一个框架(profile)时，假设所有元素和属性集合都被定为空。这样，一个模块在被包含到框架(profile)中时，就可以重新定义这些集合，在框架(profile)内增加元素和属性以使他们有效。因此，引用没有包含在框架中的模块的元素或属性集合不是错误，这只说明该集合是空的。
只有 例外，它是所有presentation 属性的联合（如所有名字中包含"Presentation"的所有属性集合）， 没有在任何模块中定义，但在每个框架(profile)中都存在。
一个模块的子集（如基本模块）可以定义一个与父模块不同的名称集合。由于在一个框架中包含同一组的子模块和父模块是一个错误的，所有属性和元素集合都必须由包含他们的模块定义一次，或者保留他们默认的空值（没有被任何模块定义的例外）。
1.1.3 剖析SVG规范
SVG1.1模块化允许用它们认可的SVG模块列表来描述框架，可能还会有少量由这些模块提供的针对元素的限制或扩展。
SVG1.1完整框架是在本规范中列出的所有完成模块的集合（如每个非子模块的模块）。
为保持一致，无限定条件的术语“SVG”表示本规范定义的SVG1.1完整框架。如果没有实现完整框架，就必须声明其符合的框架，或实现的SVG的一个子集。
1.2 SVG MIME 类型、文件名扩展和Macintosh文件类型
SVG的MIME类型是“image/svg+xml”(参见[RFC3023])。这种MIME类型的注册正在W3C进行中。
推荐SVG文件名在所有平台上都使用“.svg”（全部小写）扩展名。推荐gzip压缩(参见[RFC1952])的SVG文件在所有平台上使用“.svgz”（全部小写）扩展名。
推荐存储在Macintosh HFS文件系统上的SVG文件给定“svg ”（全部小写，将空格作为第四个字母）文件类型。推荐存储在Macintosh HFS文件系统上的gzip压缩(参见[RFC1952])的SVG文件给定文件类型“svgz”（全部小写）。
1.3 SVG命名空间、公共标识符和系统标识符
以下是SVG1.1的命名空间、公共标识符和系统标识符：
SVG命名空间(SVG Namespace)：/2000/svg
SVG 1.1公共标识符(Public Identifier)：PUBLIC "-//W3C//DTD SVG 1.1//EN"
SVG 1.1推荐的系统标识符(System Identifier)：/Graphics/SVG/1.1/DTD/
下面是一个SVG文档的实例文档类型声明：
"/Graphics/SVG/1.1/DTD/">
注意系统标识符列出的DTD是一个模块化的DTD（比如它的内容被分散到多个文件）。这意味着校验器要进行验证就必须获取多个模块。因此有一个单一的平坦的DTD与SVG 1.1模块化的 DTD一致。这个文件可以在/ Graphics/SVG/1.1/DTD/找到。
1.4 与其它规范标准的兼容性
SVG影响并集成了W3C其它规范和标准的成果。因为影响和遵守了其它的标准，SVG因此而强大并且用户可以轻松地学会如何将SVG结合到他们的网站上。
下面给出一些保持SVG同其它W3C成就兼容、影响和集成的方法。
SVG是XML的一个应用，与XML1.0 [XML10]推荐标准兼容。
SVG与XML命名空间[XML-NS]兼容。
SVG使用“XML Linking Language (XLink)” [XLINK]为其URL引用，并需要“XML Base” [XML-BASE]中定义的基本URI规范的支持。
SVG引用元素ID的语法是“XML Pointer Language (XPointer)” [XPTR]中元素ID引用的一个兼容子集。
SVG的内容既可以用CSS(参见“Cascading Style Sheets (CSS) level 2”规范[CSS2])定制样式，也可以用XSL(参见“XSL Transformations (XSLT) Version 1.0” [XSLT])定制样式。(参见Styling with CSS和Styling
with XSL)。
SVG支持普通CSS和XSL相关的属性和方法，以及CSS选择的语法和属性(参见SVG样式属性和
SVG中使用CSS)。
外部风格页（External style sheets）使用"Associating Style Sheets with XML documents Version 1.0"
[XML-SS]中描述的机制引用。
SVG包含完整的文档对象模型（DOM）并遵从"Document Object Model (DOM) level 1" [DOM1]推荐规
范。SVG的DOM较DOM Level 1定义的HTML DOM 规范具有较高级别的兼容性并与其保持一致。另外，还与"Document Object Model (DOM) level 2" [DOM2]中描述的许多特性一致，包括CSS对象模型和事件处理。
SVG还结合了一些SMIL1.0(Synchronized Multimedia Integration Language)规范的特性和方法，包括switch元素和systemLanguage属性。
SVG的动画特性（参见动画）是与W3C的SYMM（Synchronized Multimedia）工作组协同开发出来的，他们是SMIL1.0 [SMIL1]规范的开发者。SVG的动画结合并扩展了SMIL动画规范（"SMIL Animation"
specification [ SMILANIM]）中描述的XML动画能力的总体目标。
SVG设计成像将来版本的SMIL一样，允许像使用媒体对象一样的使用动态的或静态的SVG内容。
SVG试图最大限度地与HTML 4 [HTML4] 和XHTML(tm) 1.0 [XHTML]兼容。许多SVG工具直接根据HTML建模，包括使用CSS [CSS2]、处理事件和文档对象模型[DOM2]。
SVG与W3C国际化兼容，参考（来自W3C和其它）：[UNICODE]，[CHARMOD]和国际化支持。
SVG与W3C的Web访问性[WAI]兼容。参见访问性支持。
在支持XML语法(如XHTML [XHTML])的DOM2[DOM2]并支持SVG和SVG DOM的环境中，一个脚本方法可以同时被XML文档和SVG图形使用，那样，用同一段脚本就可是实现多个XML名字空间的交互和动态效果。
1.5 术语
在本规范中，关键词“必须(MUST)”、“必须不(MUST NOT)”、“必需(REQUIRED)”、“应/应该(SHALL)”、“不应/不应该(SHALL NOT)”、 “应/应该(SHOULD)”、“不应/不应该(SHOULD NOT)”、“推荐(RECOMMENDED)”、“可能（MAY）”、and“可选（OPTIONAL）”在RFC 2119中解释(参见 [RFC2119])。不过为了阅读方便，本规范中这些关键字不全部大写。
本规范有时会向作者和用户推荐一些好的实践，这些推荐是非标准化的，同规范的一致不依赖于它们的实现。这样的推荐通常包含“我们推荐…”或“本规范推荐”或类似这样的表述。
1.6 定义
基本图形(basic shape)
SVG中定义的标准图形是为了普通图形操作的方便。特别是矩形(rect)、圆形(circle)、椭圆形(ellipse)、直线(line)、多段线(polyline)和多边形(polygon)。
画布(canvas)
用来画图形元素的表面，可以是纸、显示器或虚拟分配的计算机内存等。参见坐标系统、变换和单位中关于SVG画布的讨论。
剪裁路径(clipping path)
是路径(path)、文本(text)和基本图形(base shape)的组合作为轮廓(没有反锯齿)的1位掩码，所有里面的显示出来，外面的都被屏蔽。参见剪裁路径。
容器元素(container element)
一种包含图形和其它容器元素作为子元素的元素，特别是：svg, g, defs, symbol, clipPath, mask, pattern,
marker, a和switch。
当前最里层的SVG文档片断(current innermost SVG document fragment)
XML文档都是以给定的SVG元素“svg”作为根节点的树型结构。
当前SVG文档片断(current SVG document fragment)
XML文档都是以给定的SVG元素“svg”作为根节点的树型结构，要求所有在该元素和最外层的“svg”元素之间的元素必须是SVG语言中的元素。
当前变换矩阵(CTM)(current transformation matrix)
变换矩阵是将一个坐标系转换成另一个坐标系的数学映射，通常是3×3的矩阵，采用方程式[x' y' 1] =
[x y 1] * matric。当前变换矩阵(CTM)定义了从用户坐标系统到显示窗口(viewport)坐标系统的映射。参见坐标系统变换。
填充(fill)
填充是对图形或字符串的字符轮廓内部的绘画操作。
字体(font)
字体是有组织的字形(glyphs)的集合。一种字体的字形、风格一致，当一串字符一起变换样式时表现非常明显。字体还能传达艺术风格，包含字体内部的对齐方式和间距。
字形(glyph)
字形代表字体中变换内容的单元。通常，画出的字符和相应的字形是一对一的关系（比如通常字符‘A’只有一个变换字形），但有时多个字形用来绘制一个字符（比如重音符），或用单个字形来绘制多个字符（比如连字符）。比较典型的是一个字形由一个或多个图形(比如路径)定义，可能还包含附加的信息，比如绘制暗示，以利于字体引擎清晰地显示小字体。
图形元素(graphics element)
图形元素是可以用来在目标画布上画出图形的元素。特别是：路径(path)、文本(text)、矩形(rect)、圆(circle)、椭圆(ellipse)、直线 (line)、多段线(polyline)、多边形(polygon)、图象(image)和使用(use)等。
图形参考元素(graphics referencing element)
用对不同文档或元素的引用作为其图形内容的图形元素。特别是：使用(use)和图象(image)。
本地URI引用(local URI reference)
是指不包含
蒙版(mask)
一个可以包含图形元素或其它容器元素的容器元素，它定义了一组被用来将前景对象合成到当前的背景之上的半透明图形。参见Masks。
非本地URI引用(non-local URI reference)
是指包含
绘画（着色）(paint)
绘画（着色）是指将颜色值呈现在画布上的方法，包含有颜色值和相应的alhpa值。alhpa值控制着画布上的颜色与现有颜色的混合效果。SVG支持三种内置绘画：实心色（color）、渐变（gradients）和图案（patterns）。
呈现属性（展示特性）(presentation attribute)
展示属性是SVG元素的XML属性，为该元素的指定属性的值。参见样式。
属性(property)
是用来说明如何处理文档的参数。完整的SVG属性列表可在属性索引（Property Index）中找到。可以通过元素的呈现属性（presentation attributes）或样式定义语言（如CSS [CSS2]）来给SVG语言中的元素分配属性。参见样式。
图形(shape)
是由直线和曲线组合定义的图形元素。主要有路径(path)、矩形(rect)、圆(circle)、椭圆(ellipse)、直线(line)、多段线(polyline)和多边形(polygon)。
笔划（画边界）(stroke)
是对图形或字符串中的字形轮廓进行绘画的操作。
SVG画布(SVG canvas)
是勾画SVG内容的画布。参见坐标系统、变换和单位中关于SVG画布的讨论。
SVG文档片断(SVG document fragment)
是以‘svg’元素开头的XML文档子树。SVG文档片断可以包含独立的SVG文档，或是被‘svg’元素包围的父XML文档的片断。当一个‘svg’元素是另一个‘svg’元素的子元素，就会有两个SVG文档片断，每个‘svg’元素拥有一个片断（一个SVG文档片断被包含在另一个SVG文档片断中）。
SVG视口(SVG viewport)
SVG画布中的视口定义了绘制SVG内容的矩形区域。参见坐标系统、变换和单位中关于SVG视口的讨论。
文本内容元素(text content element)
一个可以定义画在画布上的文本串的SVG元素，SVG文本内容元素有：文本(text)、tspan、tref、 文本路径(textPath)和altGlyph等。
变换(transformation)
是指当前变换矩阵(CTM)的修改，由附加的一组简单变换指定（如缩放、旋转和平移），也可由一组或多组变换矩阵（transformation matrices）指定。参见坐标系统变换。
变换矩阵(transformation matrix)
变换矩阵是将一个坐标系转换成另一个坐标系的数学表达式，通常用3×3的矩阵，采用方程式[x' y' 1]
= [x y 1] * matrix。参见当前变换矩阵和坐标系统变换
URI引用(URI Reference)
是一个统一资源定位符（[URI]），它作为一个引用指向文件或文件中的一个元素。参见引用和defs元素。
用户代理(user agent)
用户代理的通常定义是指一个找到并重现Web内容的应用。这些内容包括文本、图形、声音、影像、图像和其它类型。用户代理可能需要其它用户代理来处理某些类型的内容。例如：一个浏览器可能运行一
个独立的程序或插件来重现声音或影像。用户代理包括桌面图形浏览器，以及屏幕阅读器，屏幕放大器、语音同步器、触摸屏和声音输入软件等辅助技术。
一个“用户代理”有可能能或不能找到并重现SVG内容，但“SVG用户代理”可以找到并重现SVG内容。
用户坐标系统(user coordinate system)
一般说来，坐标系定义当前画布的位置和距离。但当前用户坐标系是当前活动的，用来定义当前画布上的坐标和长度如何分别定位和计算的坐标系统。参见初始化用户坐标系统和坐标系统变换。
用户空间(user space)
是用户坐标系统的同义词。
用户单位(user units)
一个以用户单位表示的坐标值或长度，代表着当前用户坐标系中的一个坐标值或长度。10个用户单位代表当前用户坐标系中10个单位长度。
视口(viewport)
视口是当前画布中定义的用于绘制图形元素的矩形区域。参见坐标系统、变换和单位中关于SVG视口的讨论。
视口坐标系统(viewport coordinate system)
一般说来，坐标系定义当前画布的位置和距离。视口坐标系统是从开始处理‘svg’元素到处理可选的viewBox属性之前处于活动的坐标系。在这种情况下，一个包含在父文档中并带有CSS样式定义的SVG文档片断，视口坐标系统就与其CSS中原有的坐标系统具有相同的方向和长度，原点位于视口的左上角。参见视口初始化和建立新视口。
视口空间(viewport space)
同视口坐标系。
视口单位(viewport units)
一个以视口单位表示的坐标值或长度，它代表了视口坐标系中的一个坐标值或长度。10个视口单位代表视口坐标系中10个单位长度。
2 概念
2.1 解释SVG这个名称
SVG代表了Scalable Vector Graphics(可扩展的矢量图形)。它是一个使用XML语法风格的图形。它作为一个XML命名空间。
可扩展/可伸缩
可伸缩意味着可以一致的增加或减少。在图形这个术语里，可伸缩意味着不限于简单的、固定的、象素尺寸。在Web上，可扩展意味着特殊的技术可以增加到大量的文件、大量的用户和大范围的应用中。SVG是一项Web的图形技术，在下面两个意义上都是可以扩展的。
SVG图形可以伸缩到不同的显示分辨率，以至，比如，打印机的打印输出使用最高的分辨率，它同时也可以显示在拥有不同分辨率的相同尺寸的屏幕上。相同的SVG图形可以以不同尺寸的放置在相同的Web页中，或者以不同尺寸重新使用在不同页面中。SVG图形可以被放大以便看清细微的细节，或者是帮助视力不佳的人士。
SVG图形是可扩展的是因为相同的SVG内容可以是单独的图形，也可以是引用或包含其它SVG图形。因而，允许复杂的图形被一部分一部分的建立，可能是由好几个人完成。符号(symbol)、标签(marker)和字体(font)有效的促进了图形组件的复用、最大的提高了HTTP缓冲的优点，同时避免了集中登记已被核准的符号。
矢量
矢量图形包含几何对象，比如直线和曲线。这比起光栅格式(比如PNG和JPEG)提供了极大的灵活性，光栅格式存储图形的每个象素的信息。典型的，矢量格式可以整合光栅格式图象，也可以让光栅格式图象和矢量信息组合，比如剪裁路径，以便提供完整的图例，SVG对此都没有问题。
由于现代显示设备都是光栅式的，光栅和矢量图形的不同在于它们是否是栅格化的。
2.2 重要的SVG概念
图形对象
任何XML语言规范都会给出严禁性考虑，就像文本格式化，段落、短语甚至某个名词、副词或语音的样式都会被给予描述。类似的，SVG图形样式对于图形对象甚至某个点的样式都会给出描述。
SVG支持一个可创建出及其复杂的图形对象的通用路径元素，还支持通用基本图形，如矩形、椭圆形。可以方便的手工编码，也可以选择一些其它方法，如很多的通用路径元素。svg可以对已定义的图形对象的坐标系统提供很好的控制，而且可以在描写过程中提供转换。
标记
SVG支持一些标准的标记。在电子学、图形、流程图等领域，总是有新标记要被添加，人们要等到下一个版本新标记才会被支持。SVG允许用户创建、重用、共享他们的标记而不需要一个集中的注册，当用户团体需要时，他们可以创建并改进标记而不需要征求委员会的同意。设计者可确定标记的图形外观，而不必担心所使用的标记不被支持。
标记被用于不同的尺寸、方位，并且可以为适应其它的图形对象而修改标记。
光栅效果
字体
动画
2.3 在Web页中使用SVG的选项
有多种方法能够使Web页中包含SVG内容。以下是一些选择：
独立的SVG Web页
这种方法是使一个SVG文档(i.e., a Web resource whose MIME type is"image/svg+xml")直接被装在进用户代理就像一个Web浏览器。SVG文档可作为用户引用的Web页。
引用
这种方法是父Web页引用分开存储的SVG文档，并指定被给出的SVG文档作为父Web页的组成部分被包含。对于HTML 或XHTML ，有三种选择：
在HTML/XHTML中，
'img'
元素是HTML页中应用图形的最通用的方法。为了更快速的显示，图像的宽和高可以作为属性被给出。，一个必须的属性“alt”用于给出一串文字以便在图像未被完全打开或无法浏览图像时用户浏览该文字信息，这个字符串不能包含任何标记。你可以应用longdesc属性指向一个更长的描述，在HTML中通常包含标记和更丰富的格式化。
在HTML/XHTML中，'object'元素可包含其它嵌套元素，非'img'链接，或者是空的。这意味着使用'object'元素可支持多个不同的格式，如最终文本对象（包括标记、链接等等）。能够被显示的最外层的元素将被使用。
在HTML/XHTML中，'applet'元素可调用一个JAVA程序用于显示在给定Web页中的SVG内容。这些程序可以实现很多功能，但是通常用于显示图像，特别是一些特殊格式的图像或由于其它的原因导致需要用程序来引用的图像。
嵌入
这种方法是将SVG内容直接嵌入到父Web页代码行中。例如XHTML Web页可以将SVG文档碎片文本包含进XHTML中。
外部链接，使用HTML的'a'元素
这种方法允许使用任意独立的SVG浏览器，不同的程序能够（但不是必须）使用这些独立的SVG浏览器显示HTML。特殊的图像格式往往选用这种方法。
来自CSS2
或XSL
对象的引用
当一个用户代理支持CSS风格的XML内容或XSL格式对象并且是一个一致性SVG浏览器时，那么它必须在
任何CSS或XSL对象允许引用光栅图像的地方支持对SVG资源的引用，并且在任何必要的地方能够分割SVG图形，并且能够将透明SVG部分组合到背景中去。例如，在CSS和XSL中，都包含对'background-image'
和
'list-style-image'
的引用。
3 渲染模式
3.1 简介
人们希望SVG如同执行本章所描述的相应绘图（或图像）模式。……
3.2 绘制模型
SVG可使用渲染的绘图模型。
3.3 渲染顺序
SVG文档碎片的元素有默认的绘图顺序，其中第一个元素被第一个绘制。后面的元素被绘制在前面的元素的上面。
3.4 组如何被渲染
3.5 元素如何被渲染
3.6 绘图元素类型
SVG支持三种可以被渲染到画布的图形元素类型：
图形，用来描述一些直线和曲线的集合
文本，用来描述一些字形的集合
点阵图像，用来描述一个数值数组，该数组指定在方格中的连续点阵上的绘图颜色和透明度。（SVG要求在conformance requirements基础上支持指定的点阵图像格式。）
3.6.1 绘制图形和文本
图形和文本可以被填充（即：允许绘制轮廓内部）和描边（即：允许沿轮廓外边缘绘制）描边操作是对象外边缘的中间；因此其效果是一半被绘制在轮廓内侧，一半被绘制在轮廓外侧。
对于特定的图形类型，箭头标记（可由任意图形、文本、图像的组合构成的一种标记）可以在选中的定点被绘制。每一个箭头标记被绘制，就像他的内容被扩展到SVG文档树中，应用了给定的箭头标记的图形元素之后。箭头标记的绘制内容被渲染的方法，与绘图元素相同。箭头标记不适用于文本。
填充首先被绘制，然后是描边，然后绘制箭头标记。箭头标记沿着图形外边缘被渲染，从图形的起始点到终点。
每次填充和描边操作都有透明度设置；因此，你可以用半透明的纯色来填充并且/或描边一个图形，填充和描边操作可以有不同的透明度值。
填充和描边操作是完全独立的绘制操作；因此，如果你既填充又描边一个图形，描边的一半将被绘制在部分填充的上面。
SVG支持以下内置绘图类型，他们可以应用于填充和描边操作：
纯色（Solid color）
渐变（Gradients）（线性渐变和放射性渐变）
图案（Patterns）
3.6.2 绘制点阵图像
3.7 滤镜绘图区域
SVG允许任何绘图操作被施加滤镜效果。
3.8 剪裁、遮罩和对象透明度
3.9 与父元素的组合
4 基本数据类型和接口
内容
4.1 基本数据类型
4.2 公共颜色关键字名称
基本DOM接口
4.1 基本数据类型
SVG属性的公共数据类型如下：
其范围是-2147483648～2147483647。
在SVG DOM中，整型数据被建议为长整型或SVGAnimatedInteger精度类型
CSS2中只支持10进制数值
XML的属性值中，即支持10进制数值，也支持科学计数法
除非特殊属性的其它情况，否则数值类型数据的精度至少是单精度浮点数，并且范围是-3.4e+38F～+3.4e+38F。操作执行时，建议使用更高精度浮点类型存储和计算，如坐标变换时应提供最佳精度来避免精度不足的错误。
如果后面没有单位而只是一个纯数，那么将采取用户坐标系统的缺省单位来度量。
如果后面跟了一个特定的单位，如px、pt、pc、cm、mm、in等，那么将表示一种绝对距离，这种绝对距离和具体显示设备之间的转换由SVG客户端程序来完成。
数值还可以是一个百分值，这种长度则是相对于用户坐标系统中当前的绘图区域而言的。包含两种公共情况：(a)一个百分值描述一个视口的百分比（参见Units讨论部分）；(b)一个百分值描述一个给定对象的限定区域的百分比（参加Object bounding box units描述部分）。在SVG DOM中，建议
在SVG DOM中，建议坐标值在SVGLength或SVGAnimatedLength中，其数值使用相同语法。
（其中，xxx描述某种类型的数值）：类表由一系列按顺序排列的同样类型的值组成。
属性值列表规范与XML属性值不同：
4.2 公共颜色关键字名称
4.3 基本DOM接口
以下接口被定义：
属性值列表可被逗号“,”分隔，逗号前后可存在空格，或空格分隔，如CSS2规范（如果属性在CSS2中已定义）中描述的，或本规范（如果属性在CSS2规范中没有定义）中描述的。
除非明确描述不同，否则SVG的XML属性值列表既可以用逗号分隔，前后可存在空格，又可以用空格分隔。
列表中的空格被定义为一个或多个连续字符：“space”（Unicode code 32），“tab”（9），“line feed”（10），“carriage return”（13）和“form-feed”（12）。
在SVG DOM中，建议列表类型使用不同种类接口，如SVGTransformList
以下是列表类型语法描述：
ListOfXXX:
XXX
| XXX comma-wsp ListOfXXX
comma-wsp:
(wsp+ comma? Wsp*) | (comma wsp*)
comma:
“,”
wsp:
(#x20 | #x9 | #xD | #xA)
的特殊情况，列表中最少1个最多两个数值，并且数值应为
deg：度数；
grad：梯度；
rad：弧度；
对于CSS2中定义的属性而言，角度单位标识符必须给定。对于SVG定义的属性而言，角度单位标识符是可选的。如果没有给定，角度值被认为是度数。用于交互的SVG DOM接口定义的
SVGElement, SVGAnimatedBoolean, SVGAnimatedString,SVGStringList, SVGAnimatedEnumeration,
SVGAnimatedInteger, SVGNumber, SVGAnimatedNumber,SVGNumberList, SVGAnimatedNumberList,
SVGLength, SVGAnimatedLength, SVGLengthList,SVGAnimatedLengthList, SVGAngle,
SVGAnimatedAngle, SVGColor, SVGICCColor, SVGRect, SVGAnimatedRect,SVGUnitTypes, SVGStylable,
SVGLocatable, SVGTransformable, SVGTests, SVGLangSpace,SVGExternalResourcesRequired,
SVGFitToViewBox, SVGZoomAndPan, SVGViewSpec, SVGURIReference,SVGCSSRule,
SVGRenderingIntent.
SVGElement 接口：
SVGAnimatedBoolean 接口：
SVGAnimatedString 接口
SVGStringList 接口
SVGAnimatedEnumeration 接口
SVGAnimatedInteger 接口
SVGNumber 接口
SVGAnimatedNumber 接口
SVGNumberList 接口
SVGAnimatedNumberList 接口
SVGLength 接口
SVGAnimatedLength 接口
SVGAnimatedLengthList 接口
SVGLengthList 接口
SVGAnimatedLengthList 接口
SVGAngle 接口
SVGAnimatedAngle 接口
SVGColor 接口
SVGICCColor 接口
SVGRect 接口
SVGAnimatedRect 接口
SVGUnitTypes 接口
SVGStylable 接口
SVGLocatable 接口
SVGTransformable 口
SVGTests 接口
SVGLangSpace 接口
SVGExternalResourcesRequired 接口
SVGFitToViewBox 接口
SVGZoomAndPan 接口
SVGViewSpec 接口
SVGURIReference 接口
SVGCSSRule 接口
SVGRenderingIntent 接口
5 文档结构
内容
5.1 定义一个SVG文档片断：‘svg’元素
5.1.1 Overview
一个SVG文档片断由若干个包含’svg’元素的SVG元素组成。
一个SVG文档片断可以由一个空片断（即，在’svg’元素内没有内容）组成，也可以由一个非常简单的SVG文档片断组成，该文档片断可能只包含一个单一SVG绘图元素，如’rect’元素，也可以由一个复杂的深层嵌套的容器元素和绘图元素集合构成。
SVG文档片断可以作为独立文件或资源，这种情况下称为SVG文档，或者可以作为片断被嵌入到父XML文档中。
下面的例子演示了简单SVG内容作为片断被嵌入到父XML文档中。
记录使用XML命名空间，指定 ’svg’ 和 ‘ellipse’ 元素属于SVG命名空间。
<?xml version="1.0" standalone="yes"?>
xmlns:svg="/2000/svg">
下面这个例子演示一个稍微复杂一点的独立的SVG文档：
<?xml version="1.0" standalone="no"?>
"/Graphics/SVG/1.1/DTD/">
以上示例在浏览器中的显示效果如图所示：
‘svg’元素可以出现在SVG文档内容中间。这是SVG文档片断能够嵌入到其它SVG文档片断的机制。
SVG文档内容中间包含的‘svg’元素的另一种用途是建立一个新视口。（参见Establishing a new
viewport）
在所有情况下，依据XML命名空间[XML-NS]的推荐，SVG命名空间的声明必须被提供以至于SVG元素可以被识别为属于SVG命名空间。下面是提供命名空间声明的可行方法。不含命名空间前缀的“xmlns”属性可以被指定为‘svg’元素，该元素意味着对于所有含xmlns属性元素范围的元素，SVG是默认的命名空间。
如果命名空间前缀被指定为xmlns属性（例如，xmlns:svg=”/2000/svg”），则相应的命名空间不是默认的命名空间，所以外部命名空间前缀必须必须被指定为元素：
命名空间前缀可以被指定为根元素（参见above example）。关于更多信息，参见"Namespaces in XML"推荐[XML-NS]。
5.1.2 ‘svg’元素
"( %; | %; %;
%; %; %;
%; %; %;
%; %; %;
%; %; %; %;
%; %; %;
%; %t; )*"
>
]]>
%;
%;
%;
%;
%;
%;
%;
%;
x %pe; #IMPLIED
y %pe; #IMPLIED
width %pe; #IMPLIED
height %pe; #IMPLIED
viewBox %pe; #IMPLIED
preserveAspectRatio %pe; 'xMidYMid meet'
zoomAndPan ( disable | magnify ) 'magnify'
version %pe; #FIXED '1.1'
baseProfile %pe; #IMPLIED
contentScriptType %pe; 'text/ecmascript'
contentStyleType %pe; 'text/css'
>
]]>
属性定义：
5.2 分组：‘g’元素
5.2.1. Overview
‘g’元素是将相关联的绘图元素分组在一起的容器元素。
5.2.2. ‘g’元素
5.3 引用与‘defs’元素
5.3.1. Overview
5.3.2. URI引用属性
5.3.3. ‘defs’元素
本文发布于:2024-02-06 00:20:45，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170715004558925.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
