convert SVG code to VML code
I have created HTML 5 SVG chart using Javascript/Jquery.Please refer below
SVG element.
<svg id="container_svg" style="width: 1350px; height: 600px;"><rect
id="container_svg_SvgRect" x="0" y="0" width="1350" height="600"
fill="transparent" stroke-width="0" stroke="transparent"/><rect
id="container_svg_ChartArea" x="89.5" y="58" width="1240.5" height="448.5"
fill="transparent" stroke-width="0.5" opacity="0.3" stroke="Gray"/><g
id="container_svg_XAxis"><g id="container_svg_XAxisGrid_0"><defs><clipPath
id="container_svg_XAxisGrid_0_XTicksClipRect"><rect
id="container_svg_XAxisGrid_0_XTicksClipRect" x="89.5" y="506.5"
width="1240" height="20.5" fill="white" stroke-width="1"
stroke="transparent"/></clipPath></defs><line id="container_svg_XAxisLine"
x1="89.5" y1="506.5" x2="1329.5" y2="506.5" stroke-dasharray=""
stroke-width="0.5" stroke="#686868"/><path
id="container_svg_XAxisMajorTicks" fill="none" stroke-width="0.8"
stroke="#B7B7B7"
clip-path="url(#container_svg_XAxisGrid_0_XTicksClipRect)" d="M 89.5
511.75 L 89.5 506.75 M 213.5 511.75 L 213.5 506.75 M 337.5 511.75 L 337.5
506.75 M 461.5 511.75 L 461.5 506.75 M 586.5 511.75 L 586.5 506.75 M 709.5
511.75 L 709.5 506.75 M 833.5 511.75 L 833.5 506.75 M 957.5 511.75 L 957.5
506.75 M 1082.5 511.75 L 1082.5 506.75 M 1206.5 511.75 L 1206.5 506.75 M
1329.5 511.75 L 1329.5 506.75 "/><path
id="container_svg_XAxisMajorGridLines" fill="none" stroke-width="0.5"
stroke="#B7B7B7" opacity="0.3" stroke-dasharray=""
clip-path="url(#container_svg_ChartAreaClipRect)" d="M 89.5 506.5 L 89.5
58 M 213.5 506.5 L 213.5 58 M 337.5 506.5 L 337.5 58 M 461.5 506.5 L 461.5
58 M 586.5 506.5 L 586.5 58 M 709.5 506.5 L 709.5 58 M 833.5 506.5 L 833.5
58 M 957.5 506.5 L 957.5 58 M 1082.5 506.5 L 1082.5 58 M 1206.5 506.5 L
1206.5 58 "/></g><g id="container_svg_XAxisLabels_0"
clip-path="url(#container_svg_XLabelClipRect)"><defs><clipPath
id="container_svg_XLabelClipRect"><rect id="container_svg_XLabelClipRect"
x="0" y="0" width="1350" height="600"
stroke="transparent"/></clipPath></defs><text id="container_svg_XLabel_0"
x="89.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe UI"
font-style="Normal " font-weight="regular" opacity="1"
text-anchor="middle">Jul-2000</text><text id="container_svg_XLabel_1"
x="212.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe
UI" font-style="Normal " font-weight="regular" opacity="1"
text-anchor="middle">Jul-2001</text><text id="container_svg_XLabel_2"
x="336.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe
UI" font-style="Normal " font-weight="regular" opacity="1"
text-anchor="middle">Jul-2002</text><text id="container_svg_XLabel_3"
x="460.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe
UI" font-style="Normal " font-weight="regular" opacity="1"
text-anchor="middle">Jul-2003</text><text id="container_svg_XLabel_4"
x="585.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe
UI" font-style="Normal " font-weight="regular" opacity="1"
text-anchor="middle">Jul-2004</text><text id="container_svg_XLabel_5"
x="709.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe
UI" font-style="Normal " font-weight="regular" opacity="1"
text-anchor="middle">Jul-2005</text><text id="container_svg_XLabel_6"
x="832.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe
UI" font-style="Normal " font-weight="regular" opacity="1"
text-anchor="middle">Jul-2006</text><text id="container_svg_XLabel_7"
x="956.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe
UI" font-style="Normal " font-weight="regular" opacity="1"
text-anchor="middle">Jul-2007</text><text id="container_svg_XLabel_8"
x="1081.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe
UI" font-style="Normal " font-weight="regular" opacity="1"
text-anchor="middle">Jul-2008</text><text id="container_svg_XLabel_9"
x="1205.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe
UI" font-style="Normal " font-weight="regular" opacity="1"
text-anchor="middle">Jul-2009</text><text id="container_svg_XLabel_10"
x="1348" y="524.25" fill="#707070" font-size="11px" font-family="Segoe UI"
font-style="Normal " font-weight="regular" opacity="1"
text-anchor="end">Jul-2010</text></g></g><g id="container_svg_YAxis"><g
id="container_svg_YAxisGrid_1"><line id="container_svg_YAxisLine"
x1="89.5" y1="506.5" x2="89.5" y2="58.5" stroke-width="0.5"
stroke-dasharray="" stroke="#686868"/><defs><clipPath
id="container_svg_YAxisGrid_1_YTicksClipRect"><rect
id="container_svg_YAxisGrid_1_YTicksClipRect" x="60" y="58.5" width="29.5"
height="448" fill="white" stroke-width="1"
stroke="transparent"/></clipPath></defs><path
id="container_svg_YAxisMajorTicks" fill="none" stroke-width="1"
stroke="#B7B7B7"
clip-path="url(#container_svg_YAxisGrid_1_YTicksClipRect)" d="M 84.25
506.5 L 89.25 506.5 M 84.25 461.7 L 89.25 461.7 M 84.25 416.9 L 89.25
416.9 M 84.25 372.1 L 89.25 372.1 M 84.25 327.29999999999995 L 89.25
327.29999999999995 M 84.25 282.5 L 89.25 282.5 M 84.25 237.7 L 89.25 237.7
M 84.25 192.90000000000003 L 89.25 192.90000000000003 M 84.25
148.09999999999997 L 89.25 148.09999999999997 M 84.25 103.30000000000001 L
89.25 103.30000000000001 M 84.25 58.5 L 89.25 58.5 "/><path
id="container_svg_YAxisMajorGridLines" fill="none" stroke-width="0.5"
opacity="0.3" stroke-dasharray="" stroke="#B7B7B7"
clip-path="url(#container_svg_ChartAreaClipRect)" d="M 89.5 506.5 L 1330
506.5 M 89.5 461.7 L 1330 461.7 M 89.5 416.9 L 1330 416.9 M 89.5 372.1 L
1330 372.1 M 89.5 327.29999999999995 L 1330 327.29999999999995 M 89.5
282.5 L 1330 282.5 M 89.5 237.7 L 1330 237.7 M 89.5 192.90000000000003 L
1330 192.90000000000003 M 89.5 148.09999999999997 L 1330
148.09999999999997 M 89.5 103.30000000000001 L 1330 103.30000000000001 M
89.5 58.5 L 1330 58.5 "/></g><g id="container_svg_YAxisLabels_1"><text
id="container_svg_YLabel_0" x="79.25" y="509.5" fill="#707070"
font-size="12px" font-family="Segoe UI" font-style="Normal "
font-weight="regular" opacity="1" text-anchor="end">$0</text><text
id="container_svg_YLabel_1" x="79.25" y="464.7" fill="#707070"
font-size="12px" font-family="Segoe UI" font-style="Normal "
font-weight="regular" opacity="1" text-anchor="end">$10</text><text
id="container_svg_YLabel_2" x="79.25" y="419.9" fill="#707070"
font-size="12px" font-family="Segoe UI" font-style="Normal "
font-weight="regular" opacity="1" text-anchor="end">$20</text><text
id="container_svg_YLabel_3" x="79.25" y="375.1" fill="#707070"
font-size="12px" font-family="Segoe UI" font-style="Normal "
font-weight="regular" opacity="1" text-anchor="end">$30</text><text
id="container_svg_YLabel_4" x="79.25" y="330.29999999999995"
fill="#707070" font-size="12px" font-family="Segoe UI" font-style="Normal
" font-weight="regular" opacity="1" text-anchor="end">$40</text><text
id="container_svg_YLabel_5" x="79.25" y="285.5" fill="#707070"
font-size="12px" font-family="Segoe UI" font-style="Normal "
font-weight="regular" opacity="1" text-anchor="end">$50</text><text
id="container_svg_YLabel_6" x="79.25" y="240.7" fill="#707070"
font-size="12px" font-family="Segoe UI" font-style="Normal "
font-weight="regular" opacity="1" text-anchor="end">$60</text><text
id="container_svg_YLabel_7" x="79.25" y="195.90000000000003"
fill="#707070" font-size="12px" font-family="Segoe UI" font-style="Normal
" font-weight="regular" opacity="1" text-anchor="end">$70</text><text
id="container_svg_YLabel_8" x="79.25" y="151.09999999999997"
fill="#707070" font-size="12px" font-family="Segoe UI" font-style="Normal
" font-weight="regular" opacity="1" text-anchor="end">$80</text><text
id="container_svg_YLabel_9" x="79.25" y="106.30000000000001"
fill="#707070" font-size="12px" font-family="Segoe UI" font-style="Normal
" font-weight="regular" opacity="1" text-anchor="end">$90</text><text
id="container_svg_YLabel_10" x="79.25" y="61.5" fill="#707070"
font-size="12px" font-family="Segoe UI" font-style="Normal "
font-weight="regular" opacity="1"
text-anchor="end">$100</text></g></g><defs><clipPath
id="container_svg_ChartAreaClipRect"><rect
id="container_svg_ChartAreaClipRect" x="89.5" y="58" width="1240.5"
height="448.5" fill="white" stroke-width="1"
stroke="Gray"/></clipPath></defs><g
id="container_svg_TitleCollection"><text id="container_svg_XAxisTitle_0"
x="709.5" y="547" fill="#707070" font-size="14px" font-family="Segoe UI"
font-style="Normal " font-weight="regular" opacity="1"
text-anchor="middle" dominant-baseline="middle">Sales Across
Years</text><text id="container_svg_YAxisTitle_1" x="30" y="282.5"
fill="#707070" transform="rotate(-90,30,282.5)" font-size="14px"
font-family="Segoe UI" font-style="Normal " font-weight="regular"
opacity="1" text-anchor="middle" dominant-baseline="middle">Sales Amount
in millions(USD)</text><text id="container_svg_ChartTitle" x="592.25"
y="39" fill="#707070" font-size="20px" font-family="Segoe UI"
font-style="Normal " font-weight="regular" text-anchor="start">Average
Sales Comparsion</text></g><g id="container_svg_SeriesCollection"
clip-path="url(#container_svg_ChartAreaClipRect)"><g
id="container_svg_SeriesGroup_0" transform="translate(89.5,506.5)"
clip-path="url(#container_svg_SeriesGroup_0_ClipRect)"><path
id="container_svg_Sales_0" fill="none" stroke-dasharray=""
stroke-width="3" stroke="#E94649" stroke-linecap="butt"
stroke-linejoin="round" d="M 3.3953997809419496 -44.800000000000004 L
219.00328587075578 -134.4 M 219.00328587075578 -134.4 L 466.86746987951807
-67.2 M 466.86746987951807 -67.2 L 722.880613362541 -291.2 M
722.880613362541 -291.2 L 963.6144578313254 -403.2 M 963.6144578313254
-403.2 L 1211.4786418400877 -380.8 "/><defs><clipPath
id="container_svg_SeriesGroup_0_ClipRect"><rect
id="container_svg_SeriesGroup_0_ClipRect" x="3.39453125" y="-406.19921875"
width="1208.0859375" height="364.3984375" fill="white" stroke-width="1"
stroke="transparent" style="display: inline-block; width:
1208.09px;"/></clipPath></defs></g><g id="container_svg_symbolGroup_0"
transform="translate(89.5,506.5)"><circle
id="container_svg_circlesymbol_0_0" cx="3.3953997809419496"
cy="-44.800000000000004" r="7.0710678118654755" fill="#E94649"
stroke-width="3" stroke="white" opacity="1"
transform="translate(3.39453125 -44.80078125) scale(1)
translate(-3.39453125 44.80078125)"/><circle
id="container_svg_circlesymbol_1_0" cx="219.00328587075578" cy="-134.4"
r="7.0710678118654755" fill="#E94649" stroke-width="3" stroke="white"
opacity="1" transform="translate(219.00390625 -134.400390625) scale(1)
translate(-219.00390625 134.400390625)"/><circle
id="container_svg_circlesymbol_2_0" cx="466.86746987951807" cy="-67.2"
r="7.0710678118654755" fill="#E94649" stroke-width="3" stroke="white"
opacity="1" transform="translate(466.8671875 -67.19921875) scale(1)
translate(-466.8671875 67.19921875)"/><circle
id="container_svg_circlesymbol_3_0" cx="722.880613362541" cy="-291.2"
r="7.0710678118654755" fill="#E94649" stroke-width="3" stroke="white"
opacity="1" transform="translate(722.880859375 -291.19921875) scale(1)
translate(-722.880859375 291.19921875)"/><circle
id="container_svg_circlesymbol_4_0" cx="963.6144578313254" cy="-403.2"
r="7.0710678118654755" fill="#E94649" stroke-width="3" stroke="white"
opacity="1" transform="translate(963.61328125 -403.19921875) scale(1)
translate(-963.61328125 403.19921875)"/><circle
id="container_svg_circlesymbol_5_0" cx="1211.4786418400877" cy="-380.8"
r="7.0710678118654755" fill="#E94649" stroke-width="3" stroke="white"
opacity="1" transform="translate(1211.478515625 -380.80078125) scale(1)
translate(-1211.478515625 380.80078125)"/></g></g></svg>
i want to convert this SVG code to VML because i need to render chart in
IE 5,6 ,7 version.
how can i convert SVG element to VML element. i knew there is online tool
to convert SVG image to VM element.
http://vectorconverter.sourceforge.net/
but am not having an SVG image instead of this am having only SVG element
using this i want to covert into VML code.
how can i do this?
is there any best document to refer for transition of all SVG elements to
VML element.
Thanks,
Siva
No comments:
Post a Comment