2

I have a C# web application which generates SVG code using RaphaelJS, which I then need to convert to PNG for general interoperability amongst users (please see my previous question here also)

The problem is that, rather than SVG code which seems to be the norm, Internet Explorer churns out RVML code. My solution works successfully in Firefox and other browsers by using Inkscape's command line utility to convert the plain SVG file to PNG. But Inkscape won't convert from RVML.

So the next logical thing to do, apart from rewrite my application to avoid RahaelJs, is to convert the RVML to SVG before running it through Inkscape. To do this I've found this article, and have used the code example near the top of the page. The XSL file I've used to convert the RVML file is the one used by VectorConverter which you can download and look at.

I should mention there are no runtime errors - all the files output in the right place, i.e. the XML -> SVG from the server-side XSLT conversion, and the SVG -> PNG from the Inkscape conversion.

To summarize the situation, when browsing through Firefox - it's fine - when browsing through Internet explorer, the SVG file generated by the XML->SVG conversion outputs a valid SVG file but with no actual content inside the SVG tags. My question is whether anyone else has had any success in doing this task, or if anyone has any suggestions on what I'm doing wrong?

Thanks

Community
  • 1
  • 1
Arj
  • 1,981
  • 4
  • 25
  • 45

2 Answers2

3

Yes, we did exactly the same thing on one of our projects. The problem is that the VML generated by RapahelJS should be altered a little bit in order to fit to the VectorConverter scheme (btw, we used scheme included in the 2nd version of this tool). Here are the changes we were making before actual transform:

string clearedVml = new Regex("<rvml.*/rvml:group>")
    .Match(rafaelOutputVml)
    .Value
    .Replace("rvml:", "v:")
    .Replace("class=rvml", "")
    .Replace("filterMatrix", "");

After that transformation result should be inserted in the following markup:

        private const string vmlFormat = 
@"
<?xml version=""1.0""?>
<HTML xmlns:v = ""urn:schemas-microsoft-com:vml"" xmlns=""http://www.w3.org/1999/xhtml"">

<HEAD>
<STYLE>v\:* {{
    BEHAVIOR: url(#VMLRender)
}}
</STYLE>
</HEAD>
<BODY>
{0}
</BODY>
</HTML>
";
...
var sReader = new StringReader( String.Format( vmlFormat ,clearedVml ).Trim() );

and only now the actual transform to SVG should be performed.

Hope it helps

Andrei
  • 55,890
  • 9
  • 87
  • 108
  • Hi Andrei, thanks for your help, that is very helpful. The VML output from Raphael is now converted by the VectorConverter XSL to SVG. I can then run the InkScape command-line utility to finally convert that SVG to PNG. There is one problem however that text in the final PNG file does not appear - any ideas? – Arj May 09 '11 at 09:58
  • @a12jun - If it's anything like charts generated by flot, resulting image is a combination of two canvases, .base and .overflow, where the former is the graphics and the latter is the text for labels. I guess you'd need to do both. – Shagglez Aug 04 '11 at 10:38
2

I did it in my project too! Andrei's answer helped me a lot, but like the original poster, I also had problems with text not appearing in the final PNG. I figured out the problem was that, for every text, Raphael generates a textpath in the VML, but the path is a line of size 1. When the translation to SVG is performed, a textpath is generated in the SVG. However, the text does not appear because the textpath is so small (size 1). To solve this problem, I had to manually modify the XSLT in Vector Converter to generate just a text element in the resulting SVG, instead of textpath. Then file I modified was varie.xsl, in the template "elemento-textpath". I also had another problem: my rectangles in the final SVG were not colored. I had to modify the XSLT to correct that, too. Hope this helps! I think it's easier to translate VML to SVG first and then export to PNG than trying to generate a new PNG from Raphael's Paper variable, like some solutions I saw on the Internet.

user913025
  • 21
  • 1
  • Amazing! +1 for going into so much detail. I didn't rectify the underlying problem in the end like you did, I just made a work around! I implemented my own bit of code to write SVG code to a file – Arj Sep 02 '11 at 06:05