Reference
- http://www.w3.org/Graphics/SVG/
- https://meapplicationdevelopers.dev.java.net/uiLabs/IntroToSVG.html
- http://www.w3.org/TR/SVGMobile/
SVG 简介
SVG 是 W3C 制定一套基于xml语言的主要用来描述二维图形和应用的语言。全称是Scalable Vector Graphics。它主要包括2部分,一是XML的文件格式订阅,二是应用API。SVG用于Web图形描述,动画,用户界面,打印,移动应用程序等,在传统的PC以及嵌入师设备上都有广泛的应用:
- 在移动通信领域,3GPP用它作为下一代移动电话图像描述的语言:用于MMS内容的描述,动画,贺卡,图形表示。
- 在印刷领域SVG不仅提供了类似于PS&PDF页面描述语言类似的页面描述功能,而且可以由数据库动态生成对应的图形。
- Web应用。SVG可以生成图形丰富的用户界面,拥有强大的Scripting和Event支持。
- 地图信息描述
- 嵌入式系统,SVG Mobile 为这种资源有限的设备提供了专门的定义。
SVG有许多优点,下面引用自 http://www.adobe.com/cn/enterprise/svg.html
- SVG 的 XML 语法使开发人员能够使用现有技术并利用现有的基于 XML 的基础结构和开发工具。
- SVG 可与现有的 Web 技术(如 HTML、GIF、JPEG、PNG、SMIL、ASP、JSP 和 JavaScript)集成,并可嵌入到现有基于浏览器的应用程序中,从而提供更加丰富的视觉效果和桌面式图形用户界面。
- 用 SVG 创建的图形可以在不同平台和设备间进行缩放,而不会有质量损失。
- SVG 应用程序可显著减少维护时间。
- 开发人员和设计人员在创作时可保持步调一致,从而减少开发时间并更有效地分配工作。
- 由于 SVG 把设计与内容分开,因而很容易进行更新。
- SVG 技术可减少服务器负载和带宽占用,因为它可以在客户端和服务器之间只传输增量数据,并利用客户端平台的处理能力显示图形。
- 配置在数百万个桌面电脑上的 Adobe 的 SVG Viewer 与 Adobe® Reader® 软件,实现了在 Windows®、Mac 和 Linux® 各种操作系统浏览器内一致的 SVG 显示和 JavaScript 交互体验。
- 整个行业对 SVG 的支持使内容可以配置到各种非 PC 设备上,例如 PDA、移动电话和专用手持设备。
SVG 针对不同的应用领域制定了不同的标准
- SVG 1.1 : Core of SVG language
- SVG Mobile: SVG Tiny&SVG Basic,针对资源有限的设备
- SVG Print: 针对印刷行业
SVG 基本图形
SVG基本图形包括:
- rectangles (rectangle, including optional rounded corners)
- circles
- ellipses
- lines
- polylines (不封闭的折线)
- polygons (封闭的折线)
下图演示了这6种基本图形,以及列出了相应的SVG源文件。























下表是个总结
定义 | 描述 |
<line x1="start-x" y1="start-y" x2="end-x" y2="end-y"/> | 画一条从(x1,y1)到(x2,y2)的直线 |
<rect x="left-x" y="top-y" width="width" height="height"/> | 画一个矩形,左上角在(x,y),宽width,高height |
<circle cx="center-x" cy="center-y" r="radius"/> | 画一个圆,圆心(cx,cy)半径为r |
<ellipse cx="center-x" cy="center-y" rx="x-radius" ry="y-radius"/> | 画一个椭圆,圆心(cx,cy),x轴半径rx,y轴半径ry |
<polygon points="points-specifications"/> | 画一个经过所有定义点的封闭图形 |
<polyline points="points-specifications"/> | 画一条经过定义点的折线 |
这些基本图形都有具体的属性,具体的定义可以查Specification.