svg.import.js icon indicating copy to clipboard operation
svg.import.js copied to clipboard

Import doesn't work completely

Open dhardtke opened this issue 10 years ago • 3 comments

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

dhardtke avatar Jun 04 '15 14:06 dhardtke

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?

EternityForest avatar Sep 01 '16 11:09 EternityForest

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".

dhardtke avatar Sep 01 '16 11:09 dhardtke

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

Fuzzyma avatar Sep 01 '16 11:09 Fuzzyma