SVG Issues

[PaulBGD]

I'm having trouble displaying my SVG. There's a few issues that I'm seeing occurring:

1. The namespace ends up being [object Object]? Examples:

var svg = document.createElementNS( '[object Object]', 'svg' );
var defs = document.createElementNS( '[object Object]', 'defs' );
var path = document.createElementNS( '[object Object]', 'path' );

2. My defs object doesn't get populated with styles:
   Input:

        <defs>
            <style>.dev-1{fill:#38aecc}.dev-2{fill:#022f40}.dev-3{fill:#fff}.dev-4{fill:#5f5}</style>
        </defs>

Output:

	var defs = document.createElementNS( '[object Object]', 'defs' );
	
	svg.appendChild( defs );

3. For some reason there's this random text node thing occurring after every single element:

	svg.appendChild( document.createTextNode( "\n        " ) );

[Rich-Harris]

1. That's very odd. Can you reproduce the issue in the REPL? The SVG example there is working correctly
2. Looks like Svelte doesn't like it if you have more than one <style> tag – in this example, if you delete the second one, the styles inside the <defs> are used, otherwise they're ignored. Hmm. We should figure out exactly how to handle multiple <style> tags (is there a good reason to have more than one within a component? Is there a good reason to disallow more than one?)
3. Yeah, whitespace matters in HTML (a bit) but not in SVG. We should discard whitespace inside SVG elements

[Rich-Harris]

Oh, I've reproduced part 1 now – it's because the xmlns attribute is being incorrectly handled. On it.

[PaulBGD]

2. That's a good point, there isn't a reason that you really would need two style tags. The reason I had two was because I was copying the SVG from the exported file that AI makes. I don't think there's a good reason to disallow it however.

[Rich-Harris]

I don't think there's a good reason to disallow it however.

Thinking on it further, it does make life slightly harder – it'll probably make it slightly trickier to create CSS sourcemaps when we eventually get round to that, and you have to ensure that rules appear in the correct order, etc. All doable, but a bit more work. It turns out the parser was already supposed to be disallowing duplicate <style> and <script> tags but there was a typo, so for now I've just fixed that in #143, meaning the compiler will now yell at you for having two <style> tags. We can definitely revisit that restriction in future

[Rich-Harris]

Released 1.1.3 with these fixes