SVG attribute namespaces

I’m looking into using D3 to create <svg>s that I can convert to PDF, and I’ve been spending a lot of quality time learning about XML namespaces:

https://developer.mozilla.org/en/SVG/Namespaces_Crash_Course

I’d like to write a patch for D3 to prefix attribute namespaces explicitly, so that they show up in the DOM and exporting back to XML is easier. Quoting from that article,

For setting attributes that have a namespace, it is recommended (but not required) that you also include their prefix in the second argument so that the DOM can later be more easily converted back to XML (if for instance you want to send it back to the server). For example:

elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg');

Right now to get an explicit prefix one has to tell D3 twice:

div.append("svg").attr("xmlns", "http://www.w3.org/2000/svg")
  .attr("xmlns:xmlns:xlink", "http://www.w3.org/1999/xlink");

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

Is there anything that would go terribly wrong if we started using explicit prefixes on the attributes? If not, I’ll submit a pull request implementing this (and I’ll patch #272 as well).

[timiyay]

I am currently in the midst of this issue, and I find the use of .attr() to be unclear.

My use case is using an external <image> tag as a <pattern>, which is use the fill a <path>.

I try using attr() to set the image.href like so:

imageSelection.attr({ 'xlink:href': myUrl })

However, the resulting markup only has <image href="myUrl"> - the xlink namespace is dropped.

While this doesn’t affect the SVG in the browser, it breaks down when trying to do other stuff like:

• pre-render SVGs on the server, and convert them to JPG / PNG
• embed the SVGs inside PDFs

D3 being the brilliant library that it is, I have no doubt the functionality I need is in there somewhere. I’m not finding it intuitive, and would love some help from folks around this issue. I could use any working solutions to help improve the docs or something.

UPDATE

The answer is to use a prepending semi-colon, to make it :xlink:href, like so:

imageSelection.attr({ ':xlink:href': myUrl })

Found this on the D3 Google Group - https://groups.google.com/forum/#!topic/d3-js/4pOdrFpgjTo

[Fil]

My use case was making a svg compatible with Inkscape, I needed inkscape:groupmode="layer" inkscape:label="layer name". https://github.com/visionscarto/fonds-de-cartes/commit/a47ef7a5855f9fb4504cb7ad76194f15abfe6dde