Live preview for SVG files

[fr32c]

Working on svg these days, i installed @peterflynn 's SVG extension which does a great job at displaying static svg.

But since i'm playing with interactive, i need that svg to interact with a .js file, linked via <script language="JavaScript" xlink:href="svg.js"></script>

After reading: Live Preview should work for .xhtml files #5058 , one comment says that to be able to open a file in the live preview, I just needed to update FileUtils.js

So i replaced:
var _staticHtmlFileExts = ["htm", "html"],
by
var _staticHtmlFileExts = ["htm", "html", "svg"],

(and subsequent line, of course)

the svg file structure seems to be ok with that.
Now i can wether display my static svg in brackets via the extension or live preview in chrome at file saving.

PS: i read the guidelines for contributing, i don't know where to start, especially since i added 7 characters in Brackets Sprint 30.app/Contents/www/file/FileUtils.js

[njx]

We should also fix #5101 while fixing this (trivial fix and it seems like it's likely to be correct to allow "-" in tag names anyway).

[gruehle]

Sounds like a simple fix. Medium priority to @couzteau

[couzteau]

Confirmed that SVGs are happily served by Live Preview, given the change to FileUtils suggested by @fr32c - needs some more testing though.

@fr32c do you want to submit the pull request or would you prefer me to set up the PR?

[fr32c]

Sorry, i haven't been further than filling issues and commenting others… i'll someday watch the "pull" process, but so far, @couzteau don't hesitate to do it !

[couzteau]

Thanks @fr32c Will keep you posted.

[couzteau]

There is an issue with live preview and undefined namespaces on XML-elements, i.e.

<svg version="1.1" width="640" height="387">
<image x="0" y="0" width="640" height="387" opacity="0.6"
            xlink:href="http://bla.blub"/> ...

error: Namespace prefix xlink for href on image is not defined

However, I don't think that this is a live preview issue, because the SVG document should generally declare the tag

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" ...

[njx]

We probably don't deal with namespaces properly at all when updating attributes. That would be nontrivial to fix, I think. So we might want to hold off on this if there are often going to be namespaced attributes in SVG docs.

[couzteau]

There are a few namespaced tags in SVG:
xlink:actuate
xlink:arcrole
xlink:href
xlink:role
xlink:show
xlink:title
xlink:type
xml:base
xml:lang
xml:space

ref: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#XLink_attributes

I don't know how common it is among SVG coders to properly define namespaces. Doing a bit more research.

[njx]

Even if they define them properly, I think we might have to make other changes in order to apply any changes to these attributes. We currently always just use setAttribute to add/modify attributes, and for namespaced attributes I would guess we have to use setAttributeNS. That would also require us to find the appropriate namespace declaration to figure out the appropriate namespace URL to use, I think. So it's not trivial work.

[couzteau]

SVG animations work fine.

[njx]

(Although maybe we could just hardcode the namespace URLs for "xlink:" and "xml:". That would be easy.)

[fr32c]

Hi all, i've been reading this conversation today, and i'm thinking you're being very precise and technical with the tool, certainly much more than i expected it, the namespace problem, i didn't even arrive that far in svg, I was just trying to get svg displayed with some js related to that, and that's the reason i needed a "live preview".

My trick was "good enough", as long as i was not looking for complicate stuff. Hope i'm not deviating you from other serious work, and i don't know how many user cases this is. (and thanks a lot for digging deeper)

[couzteau]

To be clear, Live Preview does happily serve SVG files, however it's not live as for HTML, where you change attributes in Brackets and see the changes in the browser on the fly. If you make a change to the SVG file you do have to save the file before you can see the change in the preview.

That said, I'm with @fr32c and do think the fix is worth taking, because it helps people working on SVG documents. However to get live updating working will probably be a significant amount of extra work.

[njx]

Oh! I was assuming we were talking about live as-you-type updating. If it's just preview, yes, that should work :)

[couzteau]

@njx, @fr32c submitted PR #5251

[njx]

Hey--we have an open pull request for this, and if that pull request doesn't work out we wouldn't scramble to fix this in this sprint. So we're removing the milestone from the bug, but leaving the pull request on the pull request card (that way we're not double-counting).

[njx]

Turns out we would need to do more work to suppress live HTML editing for this case, so we can't just merge the simple fix. Removing fix in progress.

[peterflynn]

@njx Is this complex enough that we should just MTB it at this point?

[thany]

Is this still coming? Would be awesome.
Currently, I just keep IE11 open while hand-editing SVG... (yes, IE11. It's become quite good at SVG)

[peterflynn]

@thany You can use the SVG Preview extension in the meantime, which shows an inline preview in a panel above the code.

[thany]

Yes, that's the one I found too :)
I suppose it's a difficult matter what sort of functionality should be in the main package, and what may be left to plugin developers. Especially now that Brackets is not yet finished and plugins already exist for it.

On a sidenote: it would be nice if the Live Preview feature would also work for SVG. That way we can live preview svg's in a layout engine other than built-in webkit/blink.

[peterflynn]

Changing to 'move to backlog' since this is an enhancement (not a bug) and not trivial to implement.

[tigt]

The SVG Preview plugin is wonderful (thanks @peterflynn!), but it would be great to have the preview served as image/svg+xml. The plugin displays inline HTML5 SVG for the preview, so it can show things working that don't when the SVG is used as a standalone image. (Missing namespaces, uncaught typos, unencoded ampersands, etc.)

Though, maybe this should be solved in some larger bit for the Live Preview architecture. I'd like to use the browser for debugging things like RSS feeds (+XSLT) and other assorted XML that snuck its way into the web at large. (Microsoft's browserconfig.xml, Open Search Description, crossorigin.xml, and so on.)