SVG logo

一年前，IE8发布前夕，就说微软要在最新的版本中放弃VML，采用SVG标准，但未后话。

不过，浏览器的矢量化渲染器的统一是大趋势。特别是在HTML5中，SVG的使用已经提上了议程。如果微软要想抓住这次机会，融入主流是必然的。马化腾以前讲过一个后进的原则，内容我记不太清楚，大概是说，并不是最先进入一个领域的人就能取得成功，关键是要拥有一定的资源，这样即使未能取得先机，但依然可以后发制人。这也是为什么，我们看到腾讯在拥有了广大QQ使用者之后，又推出了QQ拼音输入法（紧随搜狗，紫光，谷歌），拍拍（紧随淘宝）以及QQ校园等。

微软大概也遵循这一套行事准则，毕竟他是桌面系统的主宰者。不过，现在Web Os越来越流行，Google Chromium自不用说，几年前还名不见经传的Eye OS，最近也传言要被IBM收购，还有我认识的MIT的David Jia，他和其小组常驻Stata Center，也在做Web OS，同时也包括我最近使用的DropBox，等等一系列的Web OS应用逐步吞噬着微软Desktop OS的市场，其实也不难想，微软的发家概念就是“人手一台PC（Personal Computer）”，大家想想，如果每个人都有一台PC，而PC又需要Desktop OS，若都用Windows系统，对于微软则是很大的市场。但是现在讲云计算（Cloud Computation）, 每个人终端用户的核心数据和计算都是由云来实现的，对于Desktop的依赖越来越小。于是乎，这几年Google的发展很快，而微软由于自己理念的原因，尾大不调。

回到正题SVG，本科的时候，就在用SVG，当时坚信SVG就是GIS的发展的方向。但是后来发现，即使SVG仅仅在前台渲染，其需要的地图数据量也是相当巨大以至于处理艰难。后来，Google使用了MapReduce技术，用瓦片（Tiles）来对地图渲染，然后pre-cached到服务器里，这样大大减少了渲染所需要的时间，但是由于传输的是栅格数据，所以数据的前台互交功能就显得很单薄。没过几年，OpenLayers在其版本2.3（我记不得具体的版本了）中，实现了矢量数据的渲染，显示以及编辑。并支持主流的IE 6+，Opera和Firefox。具体来说，OpenLayers对浏览器进行识别，对于IE 6+ 使用VML进行渲染，而对于Opera和Firefox使用SVG进行渲染。而后，我在google map中也看到了如是的应用。SVG 和 VML并存使用是地图服务商的具体解决办法。最近Cartagen 也在进行一些基于Html5 的地图渲染实验, 无容置疑制图效果很好，内存消耗巨大。

Andreas Neumann 和 André m. Winter是用SVG进行制图的坚守者。2002年的时候，Andreas等人在苏黎世帝国理工就对SVG进行了卓有成效的研究，Carto.net展示了他们大部分的地图，其中一个SVG based yosemite map的项目 是其中的集大成者。关于微软加入SVG工作组的具体内容大家可以参考 Microsoft Joins SVG Working Group 这篇博文。

1.首先是对矢量绘图技术的支持,Adobe最后将SVG插件废弃,开发人员也不知道用什么去取代,而IE8将原生支持SVG,并为Web开发者提供更便利的渠道。

2.对于AJAX和组件模型的开发一直是IE8开发计划的重中之重,首先它将提供对CSS 2.1布局标准的支持。

3.IE的扩展功能将更便于使用,开发者成功开发一个扩展所花费的力气更小.并且微软正在设法提供基于客户端应用程序界面(API)以支持本地存储和mash-up。

在FLEX2应用程序中可以使用SVG资源, 但只能象JPG和GIF那样作为一种图像引入, 而不包括SVG的一些高级特性, 而且无法在运行时加载, 只能在编译时静态加载.
Flex目前支持SVG1.1规范的一部分, 范围包括SVG文档结构, CSS风格, 变换, 路径, 基本图形, 颜色, 以及文本,绘图, 渐变和字体功能的一部分, 不支持SVG动画,脚本和事件, 而且也无法实现FLEX应用程序与SVG之间的交互.
所以说FLEX对SVG的支持是基本的和静态的.
下面是一个在FLEX中加载SVG的例子
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
width=”800″ height=”600″>
<mx:Script>
<![CDATA[
[Embed(source="res/test.svg")]
[Bindable]
public var svgTest:Class;
]]>
</mx:Script>
<mx:Image id=”svg1″ source=”{svgTest}” width=”128″ height=”130″/>
</mx:Application>

编译运行后, 可以发现在BIN目录下的RES目录中被拷贝了一个同名的test.svg文件, 这说明FLEX应用是使用链接而不是嵌入的方式处理SVG文档的, 这同其它图像资源是相同的.
但是对其它类型资源,例如FLASH, 可以使用SWFLoader动态加载, 例如:
loader = new SWFLoader();
loader.load(“res/segment4.swf”);
但SVG不能进行动态加载, 希望FLEX能够进一步增加对SVG的支持力度, 至少包括动态加载,脚本和事件, 最好还有SVG动画等.

最近在SVG 内置脚本和外部脚本的引用上有些小问题，有空专心研究一下。

从八月份到现在，我一直在筹划写书的事宜，近来一周，我逐渐把思路理顺了，列出了提纲。希望自己能抽出时间来，完成自己心中的夙愿。书的名字暂定为SVG Visualization and Web Mapping，即《SVG可视化与网络制图》。我会抽时间将自己的成果公布给大家，希望同仁们能多多提意见。同时，哪位仁兄有时间帮我更新一下geoinformatics.cn, 最近确实是得要向我们张书记说得那样，忙碌起来，“嚼得菜根，做得大事”。争取在10月中旬把书的初稿写出来，带到今年在武汉举行的Geoinformatics 2006去。

努力吧，Musicman，Ctrl+N My 23.

dom标准规定一个document不能插入另外一个document的node。不同的frame/window里的 document自然是不同的。从一个document clone出来的（或者create出来的）是不能被append或者insert到其他document中的。当然，dom3增加了importNode方法，是可以用来导入其他document的node的。但是ie不支持（也许ie 7.0会支持）。在我做的试验里,ff还是支持两个不同的DOM树之间的appenchild操作的,但是opera和IE 6,就不是不行..郁闷:cry:

所以ff可以使用importNode这样高效率的dom方法，对于ie来说只能用innerHTML = serialize(otherNode)这样的方式。serialize方法把一个node串行化成字符串。在ie环境的具体实现上，对于XmlDocument，使用node.xml，对于HtmlDocument，使用node.outerHTML。

1. load the serverside function manually to check if there aren’t any error messages in the generated code, such as PHP error messages. Often the generated code requested is already in error, contains error messages or is not valid or well formed.
2. XML is not wellformed: validate the file if things go wrong and you don’t know what’s wrong. In many cases an invalid XML structure is the cause of problems
3. Use Batik or other SVG viewers (e.g. Opera9 or MozillaSVG): Apache Batik is an excellent SVG development tool that is stricter in parsing SVG than ASV. This often helps detect problems. It also helps to compare error messages of different SVG viewers
4. Use the Batik integrated JavaScript debugger to find errors in the js-code: you need to enable the debugger as follows: Open “Edit” → “Preferences”, go to the “Browser Options” → “Security Settings” tab and turn off “Enforce secure scripting”. Close the preferences window using the “OK” button. Open the debugger with “Tools” → “Script Debugger”. Reload the SVG file to activate the debugger.
5. Turn on the “Validating XML parser” in Batik: Go to “Edit” → “Preferences” → “Browser Options” and turn on the “Use a validating XML parser” checkbox
6. Use the “Save As” functionality of ASV and Batik to save the current state of the DOM (after script execution and (partial) data-loading) to see if the loaded syntax is correct after receiving data with getURL(). To do so, add the line as a processing instruction after the DOCTYPE declaration. This enables the “Save the actual state of the DOM” function in ASV if you right click in the plugin and use the “Save AS” command. Open it in an XML validator and check the syntax. In Batik (newest CVS version) there is a “Save As” entry in the “File” menu that allows to save the current state of the DOM to a file.
7. Ask a SVG discussion group or forum, such as the yahoogroups svg-developers list or the Apache Batik email list
8. ask the author of this tutorial for help: but please ONLY after all the other options failed!

SVG(Scapable Vector Graphics，可缩放矢量图像)是互联网联盟(W3C)的正式推荐标准，它是一种使用XML来描述二维图像的语言。SVG允许3种形式的图像对象存在，分别是矢量图形（如由直线、曲线等组成的路径）、点阵图像和文本。各种图像对象能够组合、变换，并且能修改其样式，也能够定义成预处理对象以便再用。SVG还支持各种特效，包括嵌套变换、路径剪裁、透明度处理、滤镜效果以及模板对象等。同时，SVG可以是互动和动态的，动画可以直接加入SVG文本，也可以通过脚本加入。在新的SVG版本中，还可以表现视频、音频等其它信息。SVG通过使用脚本语言来完成比较复杂的应用，脚本语言调用SVG对象模型(SVG Document Object Model)来访问或控制所有的元素、属性和属性值。任何一种SVG图像元素都能使用脚本来处理类似鼠标单击、双击以及键盘输入等事件。由于SVG文本是XML名字空间中的有效字符，这些字符能作为SVG图像的关键字而通过搜索引擎进行查询。

与现有的图像格式（如JPEG、GIF和PNG等）和矢量图形格式（如VML、PDF、SWF等）相比，SVG具有如下优势：

1) 基于XML标准

XML是W3C的推荐标准，用于结构化的信息交换，已经得到广泛的普及和应用。SVG是建立在此基础上的，有很明显的优势，如：广泛的国际化基础、强大的结构化能力、以及对象模型等。

2) 高质量的图像

由于基于矢量，使得SVG图像的质量得到大大的提高。放大、缩小以及各种特效都比位图的表现要好，在打印的时候，完全可以印刷质量输出图片。SVG图像在客户端动态绘制，用户可以随意调整图像的一些参数而不会导致图像模糊。SVG图像的大小只与图形的复杂程度有关，而与图形的具体尺寸无关。

3) 更精确的颜色

SVG可靠的颜色特性将给下一代在线电子商务带来许多新的面貌——系统可以根据浏览器窗口的配色方案下载与之相匹配的配色方案。SVG支持ICC色彩概貌的行业标准，如sRGB。

4) 灵活易用的文件格式

SVG主要由３个部分组成：矢量图形、位图和文字。由于SVG文件是以文本的形式（XML）存放的，更改起来是非常方便的。也就是说，不用任何图像处理工具，仅仅用记事本就可以生成一个SVG图像。

5) 支持互动和动画

SVG支持SMIL（synchronized multimedia integration language），允许用户自由地同SVG中的元素完成一些互动，从而完成既定的目标，这一点在目前单独依靠图片是完成不了的，需要由网页中的Script语句来实现。

6) 支持字符查找

由于SVG是文本格式，查找图像中的字符在SVG中成为可能（在其它格式的图像文件中是不可思议的）。

7) 支持Xlink 和Xpointer

可以在SVG文档中加入超链接，这样我们可以制作一个完全由SVG构成的WEB站点，这个站点可以包含图片、动画、文本等多媒体信息，并拥有与用户进行互动的能力。

SVG是一种真正开放式的、不依赖供应商的2D矢量图形格式

SVG由W3C开发和维护，W3C曾定义了HTML和XML这样的开放标准。而且，SVG不属于任何人，也没有专利权。这意味着，不存在许可费用，供应商可以无缝地创作和分享内容。不同于Mac OS的PICT或Windows的WMF等其它矢量格式，SVG具有平台独立性。

9) SVG从开始设计，就注定是一种强大的通用标准

制订SVG的W3C工作组成员包括Macromedia、Adobe和AutoDesk，它们都有强烈的意愿，尽量把支持其格式的更多功能包括在SVG里面。这使得SVG适用于范围很广的各种应用，包括CAD、GIS和娱乐。

Mobile SVG及其特点

由于SVG的大部分特性也非常适合于无线领域的图形应用，无线领域要求开发更适合于移动设备上应用的SVG形式，为了满足业界的需求，互联网联盟(W3C)的SVG工作小组制订了适合于移动应用领域的专用标准Mobile SVG。由于移动设备在CPU速度、内存大小、支持的显示颜色等各个参数上有很大的不同，单一的专业标准很难满足所有移动设备的要求。所以，为了覆盖不同移动设备家族的需求，SVG工作小组最终制订了两个级别的Mobile SVG专业标准。第一级别的专业标准是SVG Tiny (SVGT)，适用于资源高度受限的移动设备，如手机；第二级别的专业标准是SVG Basic (SVGB)，适用于高端的移动设备，如PDA等。由于移动设备的CPU速度、内存容量、显示屏都比较小，相对于SVG，Mobile SVG在支持的内容、属性、功能等方面作了限制。为了保持内容和处理软件的兼容性，在制订标准时，把SVGT列入SVGB的子集，把SVGB列入SVG的子集。按SVG格式制作的图像在保持图像线条等不变的同时，通过降低精度、省略线条的粗细和浓淡等信息标记可以将其转换成SVG Basic和SVG Tiny格式。

Mobile SVG与位图相比，在对动画、地图和互动图形进行编码和显示方面的优势是明显的。位图是静态的，而矢量图形是动态的、可以缩放的，可以描述非常高级的图形特点，如动画、分层图形、半透明对象、画中画、复杂形状和字体效果。另外，Mobile SVG所制作的矢量图形可以执行交互式操作，如可以缩放、平移、附加链接。

利用Mobile SVG的缩放性，图形就可以调整大小，以适应任何显示器或打印机，或者分辨率，而不会导致品质损失。这在无线世界是一个优势，因移动设备的形状和尺寸很多。用户还可以在不影响图形质量的情况下对图形进行放大，特别是用手机的小屏幕看图时比较有用。

Mobile SVG文件通常小于位图文件，从而可以缩短无线下载时间，这点对于非常计较带宽的移动应用来说，尤其重要。 另一个例子，如将当前屏幕上的图形放大时，若是位图，则会出现使图像模糊的马赛克效应，此时若要获得高质量的放大图像，则需重新从服务器获取放大后的图像，增加了网络的流量；而SVG图形是矢量数据，只需利用原来的数据，在客户端进行放大就可以得到没有质量损失的放大图形。

Mobile SVG的另一个强大功能是可以存储图形中各元素的相关信息。例如，SVG可以识别出图形中某个带有一个三角形的正方形是一所房子，并且可以知道房子的楼层数等信息。SVG还支持事件，从而可以产生超链接或者嵌入文字的弹出窗口，以向用户提供更多的信息或者可点击的选项。另外，由于SVG是文本格式，可以利用基本的搜索引擎对SVG图形中的文字进行搜索，这样可以查询SVG图形中具有某种属性的图形元素，如上面所说的房子。

Mobile SVG将增强MMS

Mobile SVG最近已被3GPP组织所采纳，用于多媒体短信服务(MMS)。采用Mobile SVG,将使许多2.5G和3G MMS服务成为现实。

基于Mobile SVG的MMS与无线系统目前提供的简单文本和基于位图的图形相比，可以使用户获得互动性更强和更引人入胜的体验。另一方面，节省带宽可能是Mobile SVG最吸引运营商的特点。Mobile SVG不同于流式音频和视频，它可以顺利工作于2.5G，甚至2G网络。内容丰富、互动的Mobile SVG动画可以在小于12kb的带宽上传输。

Mobile SVG增强了MMS短信，这对于手机制造商具有明显的吸引力。而且与运营商一样，OEM厂商也可以在不对设计作重大变动或不显著增加成本的情况下，增加Mobile SVG功能。由于Mobile SVG是内容如此丰富和通用的平台，最适合于帮助设备制造商提供差别化服务。

现在已出现相应的工具，可以把现有的内容转换成Mobile SVG，并根据手机和网络条件进行优化，因此，内容供应商将能够降低开发难度和成本。借助于合适的系统内容，开发商应该能够创作或一次性地转换自己的内容，使几乎所有的设备都能显示这些内容，只要这些设备具备相应的功能和SVG播放器。这种情况类似于现在用HTML制作网页。

对于下一代无线系统（3G）来说，是否能够成功取决于用户。而对于无线用户来说，如果存在充分的理由让他们更换现有的手机，他们就会更换。经由像Mobile SVG这样以用户为中心的技术增强的MMS，将会产生更多促使手机升级的充分的理由。所以，对于业界来说，其面对的挑战是实现和应用Mobile SVG。

Mobile SVG适合的其它应用类型和内容

虽然Mobile SVG已开始在MMS上显露身手，而实际上除了MMS，Mobile SVG还有丰富的应用，包括：娱乐：互动卡通、贺卡和动画等。

基于位置的服务：在地图上显示运动物体及相关链接，同时允许用户缩放地图、切换不同图层的可见性、选择特定的区域等；具体应用如汽车导航、汽车调度、电子导游、移动广告等。

现场服务：包括技术制图，借助于Mobile SVG，就可以绘制出前后一致的、高品质的图像，可以看全景，也可以看局部细节。

Email附件：借助Mobile SVG，可以在支持MMS的移动设备上显示常见的办公文档，如MS Word、MS PowerPoint、Adobe PDF等文档格式，并且保持文档内容的格式、图形、字体信息的完整性。

其它任何JPG、GIF或其它位图格式不能满足要求的无线应用场合，如要求提供内容丰富、可伸缩、互动的图形或动画的地方。

对于实现Mobile SVG的考虑

Mobile SVG主要用于各种资源非常有限的移动设备，所以在实现Mobile SVG时，性能指标成为最主要的指标。手机的内存很小，CPU的速度也很慢，PDA的内存会稍微大一点，CPU的处理能力会好一点，但两者的显示屏分辨率都很小。尽管Mobile SVG针对移动设备进行了特别的设计，使得在移动设备上实现SVG更容易，但要实现一个用户代理还是要实现XML解析、脚本、DOM、图像库、渲染等功能。

一般来说，XML解析比较快，而DOM则会消耗很大的内存。图像的渲染则更是消耗大量的CPU时间和内存。在这些方面花些功夫，很有可能获得性能的较大提高。另外，移动设备的浮动运算一般都很慢，所以优化算法，尽量减少浮动运算，也是提高性能的一个方面。

另一方面，要显示的SVG内容决定了渲染的性能。在生成SVG素材的时候应注意哪些方面呢？首先，很显然，要显示的图像元素越多，要渲染的时间越长。当然，对图形的特效处理，如滤镜、渐变填充、平滑处理等，都会增加渲染的时间，所以在确实必要的时候才使用这些功能。

总的来说，在实现Mobile SVG的过程中，需要运营商、终端制造商、内容提供商共同努力，才能使Mobile SVG的无限魅力在资源受限的移动设备上大放光彩。

Summary
我要干什么：我要开发一个webGIS
我要怎么做：在WAMP平台，GML，SVG为技术
我为什么这么做：廉价，方便，简单。
下文的写作是怎样组织的。
我这本书是写给什么样的基础的人所看的。
WAMP
安装
调试
基本语法（PHP ）
GML
是什么
我为什么用它
相关软件，生成
SVG
是什么
我为什么用它
相关软件，生成及展示
WebGIS
现在有什么样的webGIS。
我为什么这么做，用我的方法有什么好处。
以后的展望。
开始讲怎么来做这件事。（这里将是书的大头）
数据
数据库的建立
数据的生成
数据库在服务器的存储和管理
地图投影的实现
首先介绍地图投影，
代码的关键部分
样式
首先说明样式和地理位置的分离的好处，（我觉得，样式可能更多的属于属性信息）
符号库
填充的样式
线状（可能这里就是我所要解决的问题了）
空间组织方式
地图
图层
时间序列的良好展示（因为SVG支持动画）
台风
土地类型变更
疾病的扩散
空间查询
javascript
空间展示的技巧
这里主要是展示一下javascript在地图中的应用。
javascript的简要语法
经过时变色或者飘出浮动窗口
鹰眼
展望
我谈谈还有什么能够做的。
缺点
acknowledgement
appendix
PHP的语法
SVG的图
GML的图
Javascript的语法

NOTE: 在写实现过程的时候，可以参考李满春老师那本基于delphi的书，按照它的思路来写，就是按照它的思路，写出一些基本的webGIS的功能实现。在代码描述的时候，看来php和SVG的代码和GML的代码是最多的。要打好相应的基础。PHP是代码多，而SVG和GML主要是思路的问题。

什么都是为了出国啊！！！！！！