【普及】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预览是如下效果