Is there any svg path to vml path converter method in Raphael.js?

[aniary8]

Hi everyone,

Is there a way to convert svg paths to vml paths using Raphael.js please?

Any Ideas would be appreciated.

[Filipe Valeriano]

Hello,

RaphaelJS uses SVG or VML depending on the browser it's running on. If you use the native path from RaphaelJS it will accommodate to the browser in question.

Cheers

[aniary8]

Thank you Filipe, 

So, if I have an svg path in raphael.js paper (when I run that in IE 9 for example) when I inspect that path element I can see that as VML path in the DOM? And what other browsers except IE9  would behave the same please?

[Filipe Valeriano]

You don't create SVG paths in Raphael, you create paths. They are rendered in VML or SVG, depending on the browser.

With IE9 it should be rendered in SVG, as IE started supporting SVG in the IE9.

You can go here to see what browsers support SVG http://caniuse.com/#cats=SVG&statuses=rec

Cheers.

[aniary8]

Thank you for the info @ Filipe, Is there a way to get the vml from the  DOM without an older browser?

[Filipe Valeriano]

There is no VML in the DOM, if the browser uses SVG

[aniary8]

Thank you for clarifying. Ok, if I have the following raphael path and I run it using IE8, can I get its equivalent vml path on the DOM? 

var paper = Raphael(0, 0, 500, 500);

var path = paper.path("m23.3,64.6c3.25,0.0722,5.85-2.53,5.85-5.85v-11.8m-12,14.8c1.23,2.09,2.74,2.67,6.07,2.74m-0.6-17.9c3.9,0.361,6.43,1.95,6.43,7.01,0,2.96-3.25,5.56-6.14,5.56-3.39,0-6.36-2.89-6.36-6.28,0-3.11,3.03-6.57,6.07-6.28").attr("stroke", "blue");

And do you have IE 8 to test this for me and give me the vml for this path please:

here is the jsfiddle of the above raphael paper: 

http://jsfiddle.net/bgeenjmz/

[Filipe Valeriano]

Is this what you want?

This was generated on the DOM using the path you provided. I opened it on
www.raphaeljs.com/playground.html

on a virtual machine with windows xp and IE8

Since the playground already has it's paper defined, I could not use your paper. jsfiddle does not work with IE8 :(

<DIV style="CLIP: rect(0px 640px 480px 0px); POSITION: relative; WIDTH: 640px; DISPLAY: inline-block; HEIGHT: 480px; OVERFLOW: hidden; TOP: 0px; LEFT: 0px"><SPAN style="POSITION: absolute; PADDING-BOTTOM: 0px; LINE-HEIGHT: 1; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; TOP: -9999em; PADDING-TOP: 0px; LEFT: -9999em"></SPAN><?xml:namespace prefix = rvml ns = "urn:schemas-microsoft-com:vml" /><rvml:shape style="POSITION: absolute; FILTER: ; WIDTH: 1px; HEIGHT: 1px; TOP: 0px; LEFT: 0px" class=rvml raphael="true" raphaelid="2" coordsize = "21600,21600" filled = "t" fillcolor = "white" stroked = "f" strokecolor = "black" path = " m216000,0 c216000,0,13608000,0,13608000,0,13727294,0,13824000,96706,13824000,216000,13824000,216000,13824000,10152000,13824000,10152000,13824000,10271294,13727294,10368000,13608000,10368000,13608000,10368000,216000,10368000,216000,10368000,96706,10368000,0,10271294,0,10152000,0,10152000,0,216000 0,216000,0,96706,96706,0,216000,0,216000,0,216000,0,216000,0 e"><rvml:stroke class=rvml opacity = "1" miterlimit = "8"></rvml:stroke><rvml:skew class=rvml on = "t" matrix = "1,0,0,1,0,0" offset = "1,1"></rvml:skew><rvml:fill class=rvml type = "solid"></rvml:fill></rvml:shape><rvml:shape style="POSITION: absolute; FILTER: ; WIDTH: 1px; HEIGHT: 1px; TOP: 0px; LEFT: 0px" class=rvml raphael="true" raphaelid="3" coordsize = "21600,21600" filled = "f" stroked = "t" strokecolor = "blue" path = " m503280,1395360 c573480,1396920,629640,1340712,629640,1269000,629640,1269000,629640,1014120,629640,1014120 m370440,1333800 c397008,1378944,429624,1391472,501552,1392984 m488592,1006344 c572832,1014142,627480,1048464,627480,1157760,627480,1221696,557280,1277856,494856,1277856,421632,1277856,357480,1215432,357480,1142208,357480,1075032,422928,1000296,488592,1006560 e"><rvml:stroke class=rvml opacity = "1" miterlimit = "8"></rvml:stroke><rvml:skew class=rvml on = "t" matrix = "1,0,0,1,0,0" offset = "1,1"></rvml:skew><rvml:fill class=rvml></rvml:fill></rvml:shape></DIV></DIV>

[aniary8]

Thank you Filipe,  where does this: coordsize = "21600,21600" come from? And why there are 2 paths  And with much larger x and y values please?

Could you please save and open this html in your system please to see what this produces:

<html>


<head>


<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>


</head>


<body>


<script>

var paper = Raphael(0, 0, 500, 500);


var path = paper.path("m23.3,64.6c3.25,0.0722,5.85-2.53,5.85-5.85v-11.8m-12,14.8c1.23,2.09,2.74,2.67,6.07,2.74m-0.6-17.9c3.9,0.361,6.43,1.95,6.43,7.01,0,2.96-3.25,5.56-6.14,5.56-3.39,0-6.36-2.89-6.36-6.28,0-3.11,3.03-6.57,6.07-6.28").attr("stroke", "blue");

</script>


</body>


</html>

[Filipe Valeriano]

I don't really know, I don't understand much about VML or SVG. I just read a lot about raphaeljs for my work and could answer your question :)

Here you go:

<SCRIPT>

var paper = Raphael(0, 0, 500, 500);

var path = paper.path("m23.3,64.6c3.25,0.0722,5.85-2.53,5.85-5.85v-11.8m-12,14.8c1.23,2.09,2.74,2.67,6.07,2.74m-0.6-17.9c3.9,0.361,6.43,1.95,6.43,7.01,0,2.96-3.25,5.56-6.14,5.56-3.39,0-6.36-2.89-6.36-6.28,0-3.11,3.03-6.57,6.07-6.28").attr("stroke", "blue");

</SCRIPT>

<DIV style="CLIP: rect(0px 500px 500px 0px); POSITION: absolute; WIDTH: 500px; DISPLAY: inline-block; HEIGHT: 500px; OVERFLOW: hidden; TOP: 0px; LEFT: 0px"><SPAN style="POSITION: absolute; PADDING-BOTTOM: 0px; LINE-HEIGHT: 1; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; TOP: -9999em; PADDING-TOP: 0px; LEFT: -9999em"></SPAN><?xml:namespace prefix = rvml ns = "urn:schemas-microsoft-com:vml" /><rvml:shape style="POSITION: absolute; FILTER: ; WIDTH: 1px; HEIGHT: 1px; TOP: 0px; LEFT: 0px" class=rvml raphael="true" raphaelid="0" coordsize = "21600,21600" filled = "f" stroked = "t" strokecolor = "blue" path = " m503280,1395360 c573480,1396920,629640,1340712,629640,1269000,629640,1269000,629640,1014120,629640,1014120 m370440,1333800 c397008,1378944,429624,1391472,501552,1392984 m488592,1006344 c572832,1014142,627480,1048464,627480,1157760,627480,1221696,557280,1277856,494856,1277856,421632,1277856,357480,1215432,357480,1142208,357480,1075032,422928,1000296,488592,1006560 e"><rvml:stroke class=rvml opacity = "1" miterlimit = "8"></rvml:stroke><rvml:skew class=rvml on = "t" matrix = "1,0,0,1,0,0" offset = "1,1"></rvml:skew><rvml:fill class=rvml></rvml:fill></rvml:shape></DIV>


this is what the dom looks like of the page you posted

[aniary8]

Thank you Filipe.