SVG support

[Rich-Harris]

SVG support

[teleginzhenya]

Hi!
I'd like to work on this issue, however I've found, that there are many ways to make svg sprite.
What exactly do you want to see in PR?

[Rich-Harris]

Nice!

I'm not 100% sure what the best output is, though SVGs inside an SVG is probably the best starting point — e.g. for these inputs...

<!-- one.svg -->
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50" fill="red"/>
</svg>

<!-- two.svg -->
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50" fill="green"/>
</svg>

<!-- three.svg -->
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50" fill="blue"/>
</svg>

...something like this output:

<svg viewBox="0 0 200 200">
  <svg id="one.svg" x="0" y="0" width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" fill="red"/>
  </svg>

  <svg id="two.svg" x="100" y="0" width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" fill="green"/>
  </svg>

  <svg id="three.svg" x="0" y="100" width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" fill="blue"/>
  </svg>
</svg>

One problem is that any defs or styles inside one of the inputs will affect everything in the output:

<!-- three.svg -->
<svg viewBox="0 0 100 100">
  <style>
    /* this will affect one and two */
    circle { stroke: black }
  </style>
  <circle cx="50" cy="50" r="50" fill="blue"/>
</svg>

Not sure whether and how that's solvable.

[teleginzhenya]

Hi. sorry for not appearing for a long time.
I want to say that I have no time to solve this problem. So feel free to assign it to anyone else ^^