SVG - Scalable Vector Graphics

最近想把公司的系统结构图用web页面表示出来，以便将相关的资源信息串联起来方面查询。想到的画结构图的方法有三种：SVG、HTML5和flash。其中只SVG熟悉一点，曾经学xml时了解过一点，那么就从svg开始吧。

SVG即Scalable Vector Graphics，可缩放向量图形，w3c标准，用xml格式来表示图形内容。除IE外其它主流浏览器(如Firefox, Chrome, Safari,Opera)都支持SVG。IE有它自己的一套图形格式VML，不过在IE9中会添加对SVG的支持。不过可以通过[url=http://www.adobe.com/svg/viewer/install/]Adobe SVG Viewer[/url]插件来在IE中查看SVG图形。SVG还兼容W3C的其它一些标准如CSS、HTML：可以html中嵌入svg,使用css来定义样式，通过javascript来操作svg元素实现动态效果。

如想了解更多关于SVG的介绍，可访问如下wiki页面：
[url]http://en.wikipedia.org/wiki/Scalable_Vector_Graphics[/url]

一个简单的SVG文件，保存为test1.svg，并用支持SVG的浏览器打开：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
      "http://www.w3.org/TR/2001/REC-SVG-20050904/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="600">
  <title>Draw</title>
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

<svg>是根元素，所有svg都位于名字空间"http://www.w3.org/2000/svg"下。 Mozilla的svg项目推荐添加另一个名字空间：xmlns:xlink="http://www.w3.org/1999/xlink"。
[list]
[*]<svg>的属性width指定图形的宽度，而height就是指定高度了。
[*]<circle>画一个圆，cx、cy是中心点的位置，r为半径。stroke为边线颜色，stroke-width为边线宽度，fill为填充色。stroke、stroke-width、fill即可以单独的属性指定，也可在style中指定。
[/list]

SVG支持一些基本形状（Rectangle,Circle,Ellipse,Line,Polygon,Polyline,Path），滤镜(filiter)，渐变色(Grandient)，组合(composition)，剪切(clip)和遮蔽(mask)等。可以通过w3cschool的online教程来进一步学习。

[b]Refercen:[/b]
[list]
[*]w3c标准: [url]http://www.w3.org/TR/SVG/[/url]
[*]w3schools在线教程: [url]http://www.w3schools.com/svg/[/url]
[*]Mozilla SVG: [url]http://www.mozilla.org/projects/svg/[/url]
[*]SVG中国: [url]http://www.chinasvg.com/[/url]
[*]一些例子: [url]http://croczilla.com/bits_and_pieces/svg/[/url]
[*]SVG俄罗斯方块：[url]http://croczilla.com/bits_and_pieces/svg/samples/svgtetris/svgtetris.svg[/url]
[*]SVG Editor: [url]http://www.amaltas.org/svgapp/[/url]
[/list]