Make interactive examples suitable for SVG

[JeremiePat]

Hi!

I open that issue to discuss what is needed to make interactive example infrastrucutre suitable for SVG elements and attributes.

As far as it looks, the current HTML editor template looks good to be used for SVG but it would require a bit of investigation to make sur it is fully suitable. Here is a list of a few things that worth discussing to better suite SVG examples:

• Do we want SVG examples output to be embedded into HTML or as standalone SVG documents?
• If embedded into HTML we need to provide a default stylesheet that will make sure the example will be rendered always nicely (so far my tests indicate that the minimum required is (but it depend on how we want to do the embedding):

  html,body,svg {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

• Do we want to freeze the SVG root element?

I'm sure there will be more, I'll add them here as they pop.

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

[SebastianZ]

Do we want SVG examples output to be embedded into HTML or as standalone SVG documents?

I assume it's easier to embed them into HTML, i.e. reuse the existing logic. How would you update the standalone SVG documents on the fly?

If embedded into HTML we need to provide a default stylesheet that will make sure the example will be rendered always nicely

Yep, maybe also .output should have overflow: auto; instead of overflow: scroll; to avoid the scrollbars being shown, but that's also something for HTML.

Do we want to freeze the SVG root element?

What do you mean by that? If you mean to somehow disallow editing it, I tend to say yes, maybe even not show it at all, so the view is focused on the element the example covers.
Though I'm not sure about that. Users may want to copy the whole SVG, so maybe it should be shown. Or there might be a copy or download button that returns the full SVG.

That's probably something user testing can help to decide on.

Another question is whether to force the tabbed view or just show the editor without tab bar. Many examples will only need pure SVG without any CSS or JS.
That would mean to either create a new "single editor" template or adjust the tabbed template to hide the tab bar if only one source is given, i.e. there's no cssExampleSrc or jsExampleSrc.

Sebastian