SVG介绍

 

Reference

1. http://www.w3.org/Graphics/SVG/ 
2. https://meapplicationdevelopers.dev.java.net/uiLabs/IntroToSVG.html
3. http://www.w3.org/TR/SVGMobile/
4.  

SVG 简介

 

---

 

SVG 是 W3C 制定一套基于xml语言的主要用来描述二维图形和应用的语言。全称是Scalable Vector Graphics。它主要包括2部分，一是XML的文件格式订阅，二是应用API。SVG用于Web图形描述，动画，用户界面，打印，移动应用程序等，在传统的PC以及嵌入师设备上都有广泛的应用：

1. 在移动通信领域，3GPP用它作为下一代移动电话图像描述的语言：用于MMS内容的描述，动画，贺卡，图形表示。
2. 在印刷领域SVG不仅提供了类似于PS&PDF页面描述语言类似的页面描述功能，而且可以由数据库动态生成对应的图形。
3. Web应用。SVG可以生成图形丰富的用户界面，拥有强大的Scripting和Event支持。
4. 地图信息描述
5. 嵌入式系统，SVG Mobile 为这种资源有限的设备提供了专门的定义。

SVG有许多优点，下面引用自 http://www.adobe.com/cn/enterprise/svg.html

1. SVG 的 XML 语法使开发人员能够使用现有技术并利用现有的基于 XML 的基础结构和开发工具。
2. SVG 可与现有的 Web 技术（如 HTML、GIF、JPEG、PNG、SMIL、ASP、JSP 和 JavaScript）集成，并可嵌入到现有基于浏览器的应用程序中，从而提供更加丰富的视觉效果和桌面式图形用户界面。
3. 用 SVG 创建的图形可以在不同平台和设备间进行缩放，而不会有质量损失。
4. SVG 应用程序可显著减少维护时间。
5. 开发人员和设计人员在创作时可保持步调一致，从而减少开发时间并更有效地分配工作。
6. 由于 SVG 把设计与内容分开，因而很容易进行更新。
7. SVG 技术可减少服务器负载和带宽占用，因为它可以在客户端和服务器之间只传输增量数据，并利用客户端平台的处理能力显示图形。
8. 配置在数百万个桌面电脑上的 Adobe 的 SVG Viewer 与 Adobe® Reader® 软件，实现了在 Windows®、Mac 和 Linux® 各种操作系统浏览器内一致的 SVG 显示和 JavaScript 交互体验。
9. 整个行业对 SVG 的支持使内容可以配置到各种非 PC 设备上，例如 PDA、移动电话和专用手持设备。

SVG 针对不同的应用领域制定了不同的标准

1. SVG 1.1 ： Core of SVG language
2. SVG Mobile：  SVG Tiny&SVG Basic,针对资源有限的设备
3. SVG Print： 针对印刷行业

SVG 基本图形

---

SVG基本图形包括：

1. rectangles (rectangle, including optional rounded corners)
2. circles
3. ellipses
4. lines
5. polylines  （不封闭的折线）
6. polygons  （封闭的折线）

下图演示了这6种基本图形，以及列出了相应的SVG源文件。

<? xml version="1.0" standalone="no" ?>
<! DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
< svg  width ="12cm"  height ="10cm"  viewBox ="0 0 1200 400"  version ="1.1"  xmlns ="http://www.w3.org/2000/svg"  preserveAspectRatio ="xMidYMid meet"  zoomAndPan ="magnify" >
   < desc > Example rect01 - rectangle with sharp corners </ desc >
  
   <!--  Show outline of canvas using 'rect' element  -->
   < rect  x ="1"  y ="1"  width ="1198"  height ="398"  fill ="none"  stroke ="blue"  stroke-width ="2" />
        
   < rect  x ="400"  y ="100"  width ="400"  height ="200"  fill ="yellow"  stroke ="navy"  stroke-width ="10" />
        
        
   < circle  cx ="600"  cy ="600"  r ="100"  fill ="red"  stroke ="blue"  stroke-width ="10" />

   < ellipse  rx ="800"  ry ="100"  fill ="red"  cx ="0"  cy ="0" />
                
   < line  x1 ="100"  y1 ="300"  x2 ="300"  y2 ="100"  stroke-width ="5" />

   < polyline  fill ="none"  stroke ="blue"  stroke-width ="10"  points ="50,375                     150,375 150,325 250,325 250,375                     350,375 350,250 450,250 450,375                     550,375 550,175 650,175 650,375                     750,375 750,100 850,100 850,375                     950,375 950,25 1050,25 1050,375                     1150,375" />
    < polygon  fill ="red"  stroke ="blue"  stroke-width ="10"  points ="350,75  379,161 469,161 397,215                     423,301 350,250 277,301 303,215                     231,161 321,161" />
                
</ svg >

下表是个总结

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.