svg.import.js
svg.import.js copied to clipboard
Import doesn't work completely
Hey,
apparently some commit broke the import of the following SVG string:
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100" viewBox="0 0 500 100"><defs><linearGradient id="s4a" x1=".5" x2=".5" y2="1"><stop offset=".307"/><stop offset=".916" stop-color="#990b0b"/></linearGradient></defs><ellipse rx="249" ry="49" cx="250" cy="50" stroke="#000" fill="url(#s4a)" data-angle="180"/><rect width="109" height="51" stroke="#000" rx="0" ry="0" x="43" y="20"/></svg>
The rect doesn't appear with the latest version, but with the one on the Amazon CDN it works: https://s3-eu-west-1.amazonaws.com/svgjs/svg.import.js
Have a look at this diff: https://www.diffchecker.com/ojcpdhyf
After further investigation I found out that if I swap
well.innerHTML = raw
.replace(/\n/, '')
.replace(/<([^\s]+)([^<]+?)\/>/g, '<$1$2></$1>')
with
well.innerHTML = raw
.replace(/\n/, '')
.replace(/<(\w+)([^<]+?)\/>/g, '<$1$2></$1>')
everything works as expected.. mmh..
This commit introduced that change: https://github.com/wout/svg.import.js/commit/db0156c3da38f0bb294c2b46a24024d2eb241a1e
What are elements with namespaces? Can't find anything about them in the docs
That's a great bug writeup! I think I was able to find the problem.
Using the regex101.com tool, I was able to find that the broken version of the regex will match this entire substring:
</linearGradient></defs><ellipse rx="249" ry="49" cx="250" cy="50" stroke="#000" fill="url(#s4a)" data-angle="180"/>
The reason being the new one will match any non whitespace char, and there is no whitespace until the ellipse tag, which has a slash at the end, completing the pattern.
If the point really is to allow XML namespaces and other symbols with special meaning in SVG, maybe you could specify them explicitly as [\w-.:] or some such?
For me it does not matter anymore since I've switched to SVG.js version 2, where you don't need an export or import plugin anymore - it comes "out of the box".
Iam sorry that you used so much effort to find that bug. The svg.import.js plugin is obsolete because its feature was introduced in the core since svg.js v2