I have a C# web application which generates SVG code using RaphaelJS, which I then n开发者_如何学Goeed 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
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
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.
精彩评论