D3 and SVG namespaces for custom svg elements or attributes to be valid?

Question

I created some custom svg attributes yet want to pass the svg validator test.

I saw the D3 > Namespace page, the previous How can I specify a custom XML/SVG namespace with D3.js? and thus processed as follow:

// d3.ns.prefix.geo = "http://www.example.com/boundingbox/";
// d3.ns.prefix.inkscape = "http://www.inkscape.org/namespaces/inkscape";
// SVG injection:
var width  = 600;
var svg = d3.select("#hook").append("svg")
        .attr("name", "Country's_name_administrative_map_\(2015\)")
        .attr("id", "Country_s_name")
        .attr("width", width)
        .attr(':xmlns:geo','http://www.example.com/boundingbox/')
        .attr(':xmlns:inkscape','http://www.inkscape.org/namespaces/inkscape')
        .attr(":xmlns:cc","http://creativecommons.org/ns#");
// Tags:
svg.append(":geo:g")
        .attr(':xmlns:geo','http://www.example.com/boundingbox/')
    .attr(":geo:id","geo")
    .attr(':geo:syntax', "WSEN bounding box in decimal degrees")
    .attr(':geo:west',  WEST)
    .attr('geo:south', SOUTH)
    .attr(':geo:east',  EAST)
    .attr(':geo:north', NORTH)
    .attr(':geo:title', title);

Produce :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" 
     name="Country's_name_administrative_map_(2015)" 
     id="Country_s_name"
     xmlns:geo="http://www.example.com/boundingbox/" 
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
     xmlns:cc="http://creativecommons.org/ns#"
     width="600" 
     height="579.2009758421691"
     version="1.1">
   <defs xmlns="http://www.w3.org/1999/xhtml">
     <style type="text/css"><![CDATA[
        svg { border: 1px solid rgb(100, 100, 100); }]]>
     </style>
   </defs>
   <geo:g xmlns:geo="http://www.example.com/boundingbox/"  
     geo:id="geo" 
     geo:syntax="WSEN bounding box in decimal degrees" 
     geo:west="-5.8" 
     south="41" 
     geo:east="10" 
     geo:north="51.5" 
     geo:title="Country's name" />
   <defs><pattern id="hash2_4" width="6" h… 
   …
</svg>

I still get all the errors (larger image) :

enter image description here

The first type of error is related to the custom <geo:g … > element itself, visible above. The 2nd type of errors is related to custom attributes such geo:west="…" or inkscape:group="…", which I expected to be valid due to the earlier xmlns declarations.

Am I walking the wrong road ? How to make custom attribute valid via d3js ?

EDIT: a minimal jsfiddle provide a demo of the buggy output.

Are you using an HTML document or XML (XHTML or SVG)? Custom namespaces and the `xmlns` attribute are only valid in XML. The unofficial way to go with SVG in an HTML document is to use HTML `data-*` attributes. However, it will probably still fail a validator. — AmeliaBR, Feb 10 '15 at 05:17
Well, it could be a limitation with the validator, or it could be that you're not correctly specifying the XML namespaces in the markup. The d3 DOM methods you use to build the web page are quite separate from the markup you're submitting to the validator. The namespaces you use to create the DOM are not automatically going to be translated into markup prefixes. Without seeing the markup you're currently creating, it's impossible to say what's wrong. — AmeliaBR, Feb 11 '15 at 06:21
@AmeliaBR: i added the markups and a jsfiddle demo where you can download the svg and send it to the validator. I cannot see what i do wrong. — Hugolpz, Mar 03 '15 at 13:01

score 3 · Answer 1 · edited May 23 '17 at 10:29

3

About d3js and namespaces. According to Selvin on D3 doesn't append xmlns:something namespace properly to svg element, it's a D3js know bug with known but not yet implemented solution. Also, current way to overcome it is via JQuery

edited May 23 '17 at 10:29

Community

1
1

answered Mar 02 '15 at 22:02

Hugolpz

17,296
26
100
187

D3 should not have to. If the document is an XML document then the parser will add it, if not then you can't use custom namespaces anyway. – Robert Longson Mar 02 '15 at 22:41
Indeed, I tried to apply @Selvin approach without success. http://jsfiddle.net/99dex43s/20/ – Hugolpz Mar 02 '15 at 23:14
@RobertLongson: Being expert, your explanations are not practical enough for people like me who just touch xml & svg. I litterally not sure to understand your technical explanations. – Hugolpz Mar 02 '15 at 23:44

score 1 · Answer 2 · edited May 23 '17 at 12:10

I made some mildly successful tries.

1) Reading: To produce valid svg document which could be saved, @Selim pointed out that d3.ns.prefix is NOT suitable (see d3 doesn't append namespace attributes to svg element ).

2) Reading more: So I read Namespaces Crash Course. The key point is that

[...] namespace prefixes are used to prefix attribute names and tag [element] names [...]

From the official doc with declaration and usages, for the attributes (<script> changed into <a>) :

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="space-rocket.html">...</a>
</svg>

and for elements:

<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:svg="http://www.w3.org/2000/svg">
  <body>
    <h1>SVG embedded inline in XHTML</h1>
    <svg:svg width="300px" height="200px">
      <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/>
    </svg:svg>
  </body>
</html>

2) Porting: So I went ahead, NOT d3.ns.prefix, but with the handmade custom namespace ("geo") declaration as an attribute to the svg element via :

d3.select("svg").attr(":xmlns:geo","http://www.example.com/something/")

together with usages such

svg.append("geo").attr("id","geo")
    .attr('manual', "WSEN bounding box in decimal degrees")
    .attr('WEST',  "-4.05")
    .attr('SOUTH', "40.5")
    .attr('EAST',  "10.0")
    .attr('NORTH', "54.5")
    .attr('Title', "Imaginary map of Kinglons ruling Europe");

or

svg.append("geo").attr("id","geo")
    .attr(':geo:manual', "WSEN bounding box in decimal degrees")
    .attr(':geo:WEST',  "-4.05")
    .attr(':geo:SOUTH', "40.5")
    .attr(':geo:EAST',  "10.0")
    .attr(':geo:NORTH', "54.5")
    .attr(':geo:Title', "Imaginary map of Kinglons ruling Europe");

or

svg.append(":geo:geo").attr("id","geo")
    .attr(':geo:manual', "WSEN bounding box in decimal degrees")
    .attr(':geo:WEST',  "-4.05")
    .attr(':geo:SOUTH', "40.5")
    .attr(':geo:EAST',  "10.0")
    .attr(':geo:NORTH', "54.5")
    .attr(':geo:Title', "Imaginary map of Kinglons ruling Europe");

and about 3 other variants, but none is valid, all fails the svg validator.

I have no more ideas how to get a valid svg.

enter image description here

Fiddle (downloadable) , svg validator

html does not support or allow namespaces in the way that you want. XML (i.e. xhtml) does. You'll never get this to work unless you serve your document as application/xhtml+xml and make your whole code xhtml. I already said this in http://stackoverflow.com/questions/24612067/ but you don't seem to believe it. — Robert Longson, Feb 15 '15 at 07:23
@robertLongson: Thanks for your feedback that i just have difficulties to understand, my apologies. In practice... 1) my host page receiving the d3 svg should be changed from html to xhtml, right? 2) Did you saw my fiddle let you download an XML svg file (where ns should work), which itself doesn t pass validity checks. — Hugolpz, Feb 15 '15 at 08:05

D3 and SVG namespaces for custom svg elements or attributes to be valid?

2 Answers2