search

w0rm / gulp-svgstore

Combine svg files into one with symbol elements
https://www.npmjs.com/package/gulp-svgstore
646 stars 33 forks source link

Fix namespaces #49

Closed w0rm closed 9 years ago

w0rm commented 9 years ago

Did code style fixes on top of @ghetolay code.

Still missing image tests, for this I would like to get an example of simple svg sources that do not work with current version of svgstore. @ghetolay are you able to give me an example?

ghetolay commented 9 years ago

What about the one I already used on the tests ? 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
    <rect id="a" width="50" height="10"/>
    <use y="20" xlink:href="#a"/>
    <use y="40" xlink:href="#a"/>
</svg>
w0rm commented 9 years ago

@ghetolay can you bundle a page with embedded svgstore result that is not working because of missing namespaces? I would like to have an example close to real-world scenario. You can put something on codepen.io or similar resource, this would be helpful. I'm really trying to understand what is the meaning of namespaces in html5 and it seems that it is different from xml.

@ghetolay your example works for me in chrome and firefox http://codepen.io/anon/pen/YywzwR

ghetolay commented 9 years ago

Well I also came across that, sometimes it works and sometimes it doesn't :) From my test when svg is external to the page it doesn't work, I guess it's related to some sort of context. From your link I understand that this list of namespace are automatically resolved inside an html5 page. If we remove the svg namespace it still works.
So you may try

svg :

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="namespace" viewBox="0 0 50 50">
        <path id="namespace--a" d="M0 0h50v10H0z"/>
        <use y="20" xlink:href="#namespace--a"/>
        <use y="40" xlink:href="#namespace--a"/>
    </symbol>
</svg>

html :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <svg><use xlink:href="test.svg#namespace"></svg>
  </body>
</html>

You may know it but you won't be able to test with file:// protocol, browser will complain about svg not having same protocol as source page. It's also why I can't create a codepen, html and svg both must be serve by same protocol, port and domain name.

Not related to svgstore : If you use an <img> tag to import svg with missing namespace, it will also fail.

ghetolay commented 9 years ago

Here is a live example :

https://imbasoft.fr/tests/gulpsvgstore_namespace/

Source : https://imbasoft.fr/tests/gulpsvgstore_namespace/src/test.svg

gulpfile : https://imbasoft.fr/tests/gulpsvgstore_namespace/gulpfile.js

w0rm commented 9 years ago

@ghetolay aha! So it is not broken when it is inside html5, because it doesn't care about namespaces, but when svg is an external one, it becomes an xml document with strict policy regarding namespaces.

w0rm commented 9 years ago

@ghetolay thanks for the example, I added it to the test. Will release the new version soon! 0004screenshot

w0rm commented 9 years ago

@ghetolay just released 5.0.5, thanks for contribution, and sorry for the delay from my side!