Extra characters ]> added to the span tag

[ameego]

Hi,

I'm getting a couple of extra characters "]>" added to the span tag.

Here's the code:

var Isvg = require('react-inlinesvg');
<Isvg src="./img/icons/my-icon.svg"></Isvg>

The output is as follow:

<span class="isvg loaded" data-reactid=".0.1.2.0">
   <!--?xml version="1.0" encoding="utf-8"?-->
   <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
   ]>
   <svg>
      ...
   </svg>
</span>

Do you have any idea why this extra characters appears?

Cheers!

[matthewwithanm]

That's really weird. Can you create a test case where I can reproduce the issue?

[ameego]

Hi there,

I've changed my export settings in Illustrator and it does work fine now.
Let me know if you still need information.

Cheers,

[matthewwithanm]

Any chance I can get the original file?

[ameego]

Sure, here you go: https://drive.google.com/file/d/0B4i5pei2tx48bTJGMEJoeWlUUGs/view?usp=sharing.

I've just tried it and I can reproduce the issue with it.

[tnrich]

I'm running into this issue as well

[scriptin]

These characters are closing tag for DOCTYPE. Here is an example file I use: 04eba.svg. When I remove DOCTYPE from this file, these two characters do not appear.

When I inspect the DOM, I see this:

<span class="isvg loaded" data-reactid=".0.1.0.1.1.$0">
<!--?xml version="1.0" encoding="UTF-8"?-->
<!--
... XML comments
-->
<!--ATTLIST path
xmlns:kvg CDATA #FIXED "http://kanjivg.tagaini.net"
kvg:type CDATA #IMPLIED -->
]>
<svg xmlns="http://www.w3.org/2000/svg" width="109" height="109" viewBox="0 0 109 109">

So, <?xml> turns into a comment, comments are left as-is, but DOCTYPE turns into a mess: one part of it is removed, other part turns into a comment, and the last bit is interpreted as text node.

[scriptin]

This is actually an issue of React: facebook/react/issues/1035 - in short, React does not support doctypes and things like conditional comments by design.

The best solution in this case is to strip doctype from a loaded document, or maybe even stripping everything before opening <svg> tag.

[gilbarbara]

spring cleaning