Live preview for SVG files

[core-ai-bot]

Issue by fr32c
Sunday Sep 08, 2013 at 02:33 GMT
Originally opened as adobe/brackets#5124

---

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

[core-ai-bot]

Comment by njx
Monday Sep 16, 2013 at 18:21 GMT

---

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).

[core-ai-bot]

Comment by gruehle
Monday Sep 16, 2013 at 18:21 GMT

---

Sounds like a simple fix. Medium priority to@couzteau

[core-ai-bot]

Comment by couzteau
Tuesday Sep 17, 2013 at 00:32 GMT

---

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?

[core-ai-bot]

Comment by fr32c
Tuesday Sep 17, 2013 at 04:56 GMT

---

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 !

[core-ai-bot]

Comment by couzteau
Tuesday Sep 17, 2013 at 16:25 GMT

---

Thanks@fr32c Will keep you posted.

[core-ai-bot]

Comment by couzteau
Tuesday Sep 17, 2013 at 16:28 GMT

---

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" ...

[core-ai-bot]

Comment by njx
Tuesday Sep 17, 2013 at 18:19 GMT

---

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.

[core-ai-bot]

Comment by couzteau
Tuesday Sep 17, 2013 at 18:54 GMT

---

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.

[core-ai-bot]

Comment by njx
Tuesday Sep 17, 2013 at 19:19 GMT

---

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.

[core-ai-bot]

Comment by couzteau
Tuesday Sep 17, 2013 at 19:20 GMT

---

SVG animations work fine.

[core-ai-bot]

Comment by njx
Tuesday Sep 17, 2013 at 19:21 GMT

---

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

[core-ai-bot]

Comment by fr32c
Tuesday Sep 17, 2013 at 19:48 GMT

---

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)

[core-ai-bot]

Comment by couzteau
Tuesday Sep 17, 2013 at 21:04 GMT

---

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.

[core-ai-bot]

Comment by njx
Tuesday Sep 17, 2013 at 21:49 GMT

---

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

[core-ai-bot]

Comment by couzteau
Wednesday Sep 18, 2013 at 18:01 GMT

---

@njx,@fr32c submitted PR adobe/brackets#5251

[core-ai-bot]

Comment by njx
Monday Sep 23, 2013 at 18:21 GMT

---

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).

[core-ai-bot]

Comment by njx
Tuesday Sep 24, 2013 at 17:40 GMT

---

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.

[core-ai-bot]

Comment by peterflynn
Monday Nov 25, 2013 at 22:05 GMT

---

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

[core-ai-bot]

Comment by thany
Monday Feb 17, 2014 at 13:28 GMT

---

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)

[core-ai-bot]

Comment by peterflynn
Wednesday Feb 19, 2014 at 06:31 GMT

---

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

[core-ai-bot]

Comment by thany
Wednesday Feb 19, 2014 at 08:46 GMT

---

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.

[core-ai-bot]

Comment by peterflynn
Saturday Jan 31, 2015 at 02:53 GMT

---

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

[core-ai-bot]

Comment by tigt
Wednesday Oct 07, 2015 at 20:04 GMT

---

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.)