【普及】SVG文件的访问方法

本文为：http://topic.csdn.net/u/20110331/14/7d582d1f-9f58-4cfb-a0c9-66142bb30995.html 所作。
无难度，纯普及。
 
随着IE9等浏览器对SVG的内嵌支持，让SVG这棵老树开了新花。
而对于还比较主流的xp系统，因为无缘IE9。只能停留在IE6~IE8这几个版本上。
如何也能访问SVG的应用呢？
 
1：首先需要下载个插件SVGView，地址在这里：
http://www.adobe.com/svg/viewer/install/mainframed.html
选择自己的操作系统及语种。
2：关闭IE，安装SVGView。
3：不用重启（非IE浏览器可能需要重启系统才有效），打开IE访问如下网址：
http://www.adobe.com/svg/viewer/install/svgtest.html
如果能出现如图所示的界面，则表示安装成功了。
 

 
第一次看的时候IE上面可能会出现一个黄色的提示条，点击启用即可。
 
现在已经有不少的工具可以进行SVG的可视化设计，并最终生成SVG的标准代码。
论坛中提到的代码如下：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="400">
<defs>
</defs>
<rect x="0" y="0" width="800" height="400" rx="5" ry="5" fill="#FFFFFF" stroke-width="0" stroke="#4572A7">
</rect>
<text class="highcharts-title" x="400" y="25"  text-anchor="middle">
<tspan x="400">
一周的消费情况　单位:周
</tspan>
</text>
<g class="highcharts-series-group" >
</g>
<path  fill="none" stroke-width="1" stroke="#000000" transform="translate(10,40)" visibility="visible" d="M 254.45418427261876 81.39072954977044 L 259.45418427261876 81.39072954977044 L 275.0908777245982 92.1839597376624 L 284.14370024942843 98.43267195170512">
</path>
<path  fill="none" stroke-width="1" stroke="#000000" transform="translate(10,40)" visibility="visible" d="M 359.55476057393775 328.07084791093893 L 364.55476057393775 328.07084791093893 L 367.6025749102352 309.3168929208186 L 369.3670989996706 298.45934003180156">
</path>
<path  fill="none" stroke-width="1" stroke="#000000" transform="translate(10,40)" visibility="visible" d="M 262.1282879300883 271.8216477038167 L 267.1282879300883 271.8216477038167 L 281.84578220481376 259.80518556750456 L 290.36643678491793 252.8482864359554">
</path>
<path  fill="none" stroke-width="1" stroke="#000000" transform="translate(10,40)" visibility="visible" d="M 500.18783166344616 290.23251742864096 L 495.18783166344616 290.23251742864096 L 482.588501156871 276.01081321339 L 475.2941519162223 267.7771949835079">
</path>
<path  fill="none" stroke-width="1" stroke="#000000" transform="translate(10,40)" visibility="visible" d="M 550.4192921802046 203.22907567522503 L 545.4192921802046 203.22907567522503 L 526.8032697914016 199.4285874934802 L 516.0255726189366 197.2283048619437">
</path>
<path  fill="none" stroke-width="1" stroke="#000000" transform="translate(10,40)" visibility="visible" d="M 432.9614472476139 17.484354210792503 L 427.9614472476139 17.484354210792503 L 423.41444962615025 35.93224874188749 L 420.7819773189871 46.61260873357406">
</path>
<path  fill="none" stroke-width="1" stroke="#000000" transform="translate(10,40)" visibility="visible" d="M 532.3732796753065 92.18750000000001 L 527.3732796753065 92.18750000000001 L 510.9187970034023 101.68750000000001 L 501.39251756177344 107.18750000000001">
</path>
<g class="highcharts-point"  transform="translate(10,40)">
<path fill="#4572A7" stroke-width="1" stroke="#FFFFFF" d="M 390 42.875 A 128.625 128.625 0 0 1 449.77490411231855 57.60815892539483 L 390 171.5 A 0 0 0 0 0 390 171.5 Z">
</path>
</g>
<g class="highcharts-point"  transform="translate(10,40)">
<path fill="#AA4643" stroke-width="1" stroke="#FFFFFF" d="M 449.7750180041297 57.60821870035588 A 128.625 128.625 0 0 1 518.5206900689604 176.67907802588604 L 390 171.5 A 0 0 0 0 0 390 171.5 Z">
</path>
</g>
<g class="highcharts-point"  transform="translate(10,40)">
<path fill="#89A54E" stroke-width="1" stroke="#FFFFFF" d="M 518.5206848898181 176.67920654657354 A 128.625 128.625 0 0 1 510.26650982640495 217.1109333293591 L 390 171.5 A 0 0 0 0 0 390 171.5 Z">
</path>
</g>
<g class="highcharts-point"  transform="translate(10,40)">
<path fill="#80699B" stroke-width="1" stroke="#FFFFFF" d="M 510.2664642154115 217.11105359584616 A 128.625 128.625 0 0 1 420.782102206363 296.3873604843862 L 390 171.5 A 0 0 0 0 0 390 171.5 Z">
</path>
</g>
<g class="highcharts-point"  transform="translate(10,40)">
<path fill="#3D96AE" stroke-width="1" stroke="#FFFFFF" d="M 420.7819773189871 296.38739126642593 A 128.625 128.625 0 0 1 321.2544418269207 280.2126434986831 L 390 171.5 A 0 0 0 0 0 390 171.5 Z">
</path>
</g>
<g class="highcharts-point"  transform="translate(10,40)">
<path fill="#DB843D" stroke-width="1" stroke="#FFFFFF" d="M 321.2543331143116 280.2125747530706 A 128.625 128.625 0 0 1 269.7335813957023 217.11117386228761 L 390 171.5 A 0 0 0 0 0 390 171.5 Z">
</path>
</g>
<g class="highcharts-point"  transform="translate(10,40)">
<path fill="#92A8CD" stroke-width="1" stroke="#FFFFFF" d="M 269.7335357845885 217.11105359584616 A 128.625 128.625 0 0 1 389.99987137499994 42.87500000006432 L 390 171.5 A 0 0 0 0 0 390 171.5 Z">
</path>
</g>
<g class="highcharts-highcharts-data-labels"  transform="translate(10,40)" visibility="visible">
<text x="437.961447247614" y="22.4843542107925"  visibility="visible" text-anchor="start">
<tspan x="437.961447247614">星期一
</tspan>
<tspan dx="3">: 3 %
</tspan>
</text>
<text x="537.373279675307" y="97.1875"  visibility="visible" text-anchor="start">
<tspan x="537.373279675307">星期二
</tspan>
<tspan dx="3">: 7 %
</tspan>
</text>
<text x="555.419292180205" y="208.229075675225"  visibility="visible" text-anchor="start">
<tspan x="555.419292180205">星期三
</tspan>
<tspan dx="3">: 2 %
</tspan>
</text>
<text x="505.187831663446" y="295.232517428641"  visibility="visible" text-anchor="start">
<tspan x="505.187831663446">星期四
</tspan>
<tspan dx="3">: 6 %
</tspan>
</text>
<text x="354.554760573938" y="333.070847910939"  visibility="visible" text-anchor="end">
<tspan x="354.554760573938">星期五
</tspan>
<tspan dx="3">: 5 %
</tspan>
</text>
<text x="257.128287930088" y="276.821647703817"  visibility="visible" text-anchor="end">
<tspan x="257.128287930088">星期六
</tspan>
<tspan dx="3">: 4 %
</tspan>
</text>
<text style="position: absolute" mce_style="position: absolute" x="249.454184272619" y="86.3907295497704"  visibility="visible" text-anchor="end">
<tspan x="249.454184272619">星期天
</tspan>
<tspan dx="3">: 12 %
</tspan>
</text>
</g>
<g class="highcharts-legend"  transform="translate(390,393)">
<rect x="0.5" y="0.5" width="19" height="0" rx="5" ry="5" fill="none" stroke-width="1" stroke="#909090" visibility="hidden">
</rect>
</g>
<g class="highcharts-tooltip"  visibility="hidden">
<rect  x="2" y="2" width="0" height="0" rx="5" ry="5" fill="none" fill-opacity="0.85" stroke-width="5" stroke="rgb(0, 0, 0)" stroke-opacity="0.05" transform="translate(1,1)">
</rect>
<rect  x="2" y="2" width="0" height="0" rx="5" ry="5" fill="none" fill-opacity="0.85" stroke-width="3" stroke="rgb(0, 0, 0)" stroke-opacity="0.1" transform="translate(1,1)">
</rect>
<rect  x="2" y="2" width="0" height="0" rx="5" ry="5" fill="none" fill-opacity="0.85" stroke-width="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.15" transform="translate(1,1)">
</rect>
<rect x="2" y="2" width="0" height="0" rx="5" ry="5" fill="rgb(255,255,255)" fill-opacity="0.85" stroke-width="2">
</rect>
<text x="2" y="14" >
<tspan x="2"> 
</tspan>
</text>
</g>
<g class="highcharts-tracker"  transform="translate(10,40)">
<path   fill="rgb(192,192,192)" fill-opacity="0.002" visibility="visible" d="M 390 42.875 A 128.625 128.625 0 0 1 449.77490411231855 57.60815892539483 L 390 171.5 A 0 0 0 0 0 390 171.5 Z">
</path>
<path   fill="rgb(192,192,192)" fill-opacity="0.002" visibility="visible" d="M 449.7750180041297 57.60821870035588 A 128.625 128.625 0 0 1 518.5206900689604 176.67907802588604 L 390 171.5 A 0 0 0 0 0 390 171.5 Z">
</path>
<path   fill="rgb(192,192,192)" fill-opacity="0.002" visibility="visible" d="M 518.5206848898181 176.67920654657354 A 128.625 128.625 0 0 1 510.26650982640495 217.1109333293591 L 390 171.5 A 0 0 0 0 0 390 171.5 Z">
</path>
<path   fill="rgb(192,192,192)" fill-opacity="0.002" visibility="visible" d="M 510.2664642154115 217.11105359584616 A 128.625 128.625 0 0 1 420.782102206363 296.3873604843862 L 390 171.5 A 0 0 0 0 0 390 171.5 Z">
</path>
<path   fill="rgb(192,192,192)" fill-opacity="0.002" visibility="visible" d="M 420.7819773189871 296.38739126642593 A 128.625 128.625 0 0 1 321.2544418269207 280.2126434986831 L 390 171.5 A 0 0 0 0 0 390 171.5 Z">
</path>
<path   fill="rgb(192,192,192)" fill-opacity="0.002" visibility="visible" d="M 321.2543331143116 280.2125747530706 A 128.625 128.625 0 0 1 269.7335813957023 217.11117386228761 L 390 171.5 A 0 0 0 0 0 390 171.5 Z">
</path>
<path   fill="rgb(192,192,192)" fill-opacity="0.002" visibility="visible" d="M 269.7335357845885 217.11105359584616 A 128.625 128.625 0 0 1 389.99987137499994 42.87500000006432 L 390 171.5 A 0 0 0 0 0 390 171.5 Z">
</path>
</g>
</svg> 
 
将这个代码保存成一个1.svgz的文件，注意以UTF-8格式保存
 
建立一个test.htm文件，写一行代码即可，同样以UTF-8格式保存。
 <embed height="400" name="SVGTest" src="1.svgz" mce_src="1.svgz" width="800"> 
 
打开x.htm预览是如下效果