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.