IE (10 ?) syntax errors when using <svg xmlns="http://www.w3.org/2000/svg"></svg> declarations

[gabelerner]

From baptiste...@gomoob.com on December 04, 2012 14:41:57

Hi, I'm trying to output a RaphaelJS SVG element to a base64 image but i've encountered a problem while executing my code under IE (I'm using IE10 but I've tested this in IE9 and IE8 compatibility modes).

I think my problem comes from the line '137' in 'canvg.js', that's to say on the 'parser.parseFromString(xml, 'text/xml')' instruction.

My SVG code is the following :

Created with Raphaël 2.1.0

You can replace the images by whatever you want.

When I execute canvg on this string IE outputs the following errors :

SCRIPT5022: SyntaxError
canvg.js, Ligne 131 Caractère 5
XML5634: Un attribut avec le même nom existe déjà sur cet élément.
, Ligne 1 Caractère 161

This seems to be a parsing error, if I add the following lines at the beginning of the 'svg.parseXml' function my code now works.

// -- Internet Explorer trick, otherwise an error is generated in the 'parseFromString' function when
// -- You use declarations, this is the case for Raphael
xml = xml.replace(/xmlns="http://www.w3.org/2000/svg"/, '');

Hope this can help...

Baptiste

Original issue: http://code.google.com/p/canvg/issues/detail?id=189

[gabelerner]

From jose.val...@gmail.com on June 04, 2013 16:57:10

That worked great.. thanks

[gabelerner]

From vtdatase...@gmail.com on June 12, 2013 15:02:45

Thank you this worked. I added it on the line before "parser.parseFromString(xml, 'text/xml')"

[gabelerner]

From adi...@anaustralian.com on October 15, 2013 06:02:27

Still not working for me using this suggestion. :-(
I get a slightly different error on IE10, as follows:

canvg.js, line 134 character 5
XML5633: End-tag name does not match the corresponding start-tag name.
, line 1 character 21728
SCRIPT5022: SyntaxError
canvg.js, line 134 character 5

[gabelerner]

From pavani.a...@gmail.com on December 31, 2013 05:13:53

Thank you Bapaste baptiste...@gomoob.com
The solution given by you was very usefull for me..
That's what exactly i was searching for..

[gabelerner]

From snehil.a...@gmail.com on April 02, 2014 22:58:22

Hi,

I have gone through this problem and problem is with IE10 the way it uses XMLSerializer. It removes xmlns URI while serializing to string. I have used alternative js to overcome this situation.
Please try https://github.com/cburgmer/xmlserializer .

Hopefully that helps

[gabelerner]

From mikk...@gmail.com on April 10, 2014 02:08:56

Thank you. However in my case it does not solve the problem.
See also https://code.google.com/p/canvg/issues/detail?id=216#c2

[gabelerner]

From mikk...@gmail.com on April 10, 2014 06:05:20

Now I succeeded in executing canvg without errors.
I added these lines to the file just before the parseXML call:

xml = xml.replace(/xmlns:NS1=""/, '');
xml = xml.replace(/NS1:xmlns:xlink="http://www.w3.org/1999/xlink"/, 'xmlns:xlink="http://www.w3.org/1999/xlink"');
xml= xml.replace(/xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href/g, 'xlink:href');
xml = xml.replace(/<svg\s+[a-zA-Z0-9.=/:"-;\s]+>/, '' )

Now IE11, FF and Chrome can execute canvg without Syntax errors or attributes duplication and so forth...

BUT! While FF and Chrome create PNG images with embedded graphics, IE creates only "half" PNG and display a corrupt image (all white).

The SVG code cleaned an pre-processed (at parser.parseFromString(xml, 'text/xml'); line) is attached.

Thank you

Attachment: test.svg

[gabelerner]

From gabelerner@gmail.com on April 12, 2014 14:25:57

Issue 274 has been merged into this issue.

[gabelerner]

From gabelerner@gmail.com on April 12, 2014 14:27:13

Issue 216 has been merged into this issue.

[jiorgiodavis]

try this guys, its a mixture of codes i got here. and i modified it. it works for me.
var start = xml.indexOf("<svg");
var end = xml.lastIndexOf("/svg>");
xml = xml.substring(start,end+5);
xml = xml.replace(/xmlns="http://www.w3.org/2000/svg"/g, '');
xml = xml.replace(/xmlns:NS1=""/g, '');
xml = xml.replace(/NS1:xmlns:xlink="http://www.w3.org/1999/xlink"/g, 'xmlns:xlink="http://www.w3.org/1999/xlink"');
xml= xml.replace(/xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href/g, 'xlink:href');
xml = xml.replace(////g, '' );
xml = xml.replace(/Created with Raphaël 2.1.2</desc>/g,"");
/* FOR UNEXPECTED SPANS */
xml = xml.replace(/ undefined</span>/g,"");
xml = xml.replace(/undefined</span>/g,"");

[gabelerner]

closing this because it seems to be a problem w/ the svg generation instead of this library. please reopen if you feel otherwise.