6

I wonder why D3.js doesn't add the namespace attributes to the SVG element.

d3.ns.prefix.ex = 'http://example.com/';
var chart = d3.select('#chart').append('svg:svg');

I think the output should something like:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:ex="http://example.com/">

Actually its just 

<svg>

See this fiddle for a complete example: http://jsfiddle.net/7kWDK/

Slevin
  • 4,268
  • 12
  • 40
  • 90
  • I'm wondering how you solved the problem. I've been struggling with a similar problem. You can see the result with a working example in the thread: http://stackoverflow.com/questions/27929742/how-to-embed-svg-styling-with-javascript – Dmitry Jan 16 '15 at 15:16
  • 1
    You have to add the attribute manually (but you should add the namespace to `d3.ns.prefix` too): https://github.com/gopeter/semantic-diagrams/blob/ad630ba1566bbaba622e317732d9d90a2f281fab/static/js/app.js#L132 – Slevin Jan 18 '15 at 08:52
  • @Slevin: what have been your exact code for namespace injection and use so the file is valid and downloadable ? I'am struggling with this too http://jsfiddle.net/99dex43s/5/ – Hugolpz Feb 14 '15 at 22:28
  • Did you seen the link above your comment? Check line 132, that's all :) – Slevin Feb 17 '15 at 08:57
  • Slevin: Cool ! Please add this as the valid solution and validate it so it's more visible. – Hugolpz Mar 02 '15 at 22:31
  • @Selvin: I tried to apply your approach but without success so far http://jsfiddle.net/99dex43s/21/ , the resulting svg is still invalid due to each custom attributes. The xml code seems ok as far as I understand (see it via `$head -c 750 ./test.svg` ). But doesn't pass the validator. I surely miss something in your way to do it. Could you provide a working jsfiddle ? – Hugolpz Mar 02 '15 at 23:25
  • Note: Selvin's Jquery `$('svg').attr('xmlns:my_ns', 'http://example.com/'); ` solution is a **practical solution** (svg do to display in browsers), not a strict solution (code stays invalid). But is does work ! : ) – Hugolpz Mar 06 '15 at 11:38

1 Answers1

1

namespace attributes are only relevant when documents are served as some XML mime type e.g. image/svg+xml.

namespaces don't do anything in html markup such as jsfiddle so d3 doesn't need to create them.

If you want namespaces then you could add the attributes manually in html or alternatively switch to xhtml where the attributes will be automatically created.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • But I want to save the generated SVG, so I need the attributes. – Slevin Jul 07 '14 at 14:02
  • You could add them manually or alternatively switch to xhtml rather than html – Robert Longson Jul 07 '14 at 14:05
  • When using an XHTML doctype D3.js would add the namespace attributes?? – Slevin Jul 07 '14 at 14:06
  • No, it would be automatically present based on the fact that its creating elements in the SVG namespace. – Robert Longson Jul 07 '14 at 14:08
  • 5
    OK, but thats not the point. The SVG should be exported as file. I want to include the SVG code in HTML as preview for the user, but the SVG file itself should be a valid document with namespace attributes. So I'm going to add them manually. But why does D3 provide functions to declare namespaces? Whats the point about `d3.ns.prefix`? Just to let D3 know I'm using namespace (even if D3 does not really matter?). I'm confused. – Slevin Jul 07 '14 at 14:12
  • I thought it was the point, in xhtml the attributes will be present automatically. Neither D3 or you would need to do anything. D3 works with XML documents e.g. svg or xhtml as well as html so it provides functions that are needed for xml documents. – Robert Longson Jul 07 '14 at 14:18
  • Still confusing (for beginners) – Hugolpz Feb 14 '15 at 22:14
  • @RobertLongson: In practice, what do you means by "switch to xhtml" , how to do it ? – Hugolpz Mar 02 '15 at 21:48
  • Per the first line in the answer. – Robert Longson Mar 02 '15 at 22:08