SVG not rendering on the browser when defining a XML namespace

Question

I'm having troubles rendering an inline SVG on the browser (Google Chrome) when adding a "xmlns" namespace to the svg elements.

The following code doesn't render (0x0px);

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <div>
      <svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="100px" viewBox="1015, 895, 32, 18">
        <svg:g transform="matrix(1 0 0 -1 0 2384)">
          <svg:g transform="">
            <svg:path d="M 1033.56 1472.84 L 1033.8 1472.84 L 1034.04 1472.84 L 1034.28 1472.84 L 1034.64 1472.84 L 1034.88 1472.96 L 1035.12 1472.96 L 1035.36 1473.08 L 1035.72 1473.08 L 1035.96 1473.2 L 1036.2 1473.32 L 1036.44 1473.44 L 1036.68 1473.56 L 1036.92 1473.68 L 1037.16 1473.8 L 1037.4 1474.04 L 1037.64 1474.16 L 1037.88 1474.28 L 1038 1474.52 L 1038.24 1474.64 L 1038.48 1474.88 L 1038.6 1475.12 L 1038.84 1475.24 L 1038.96 1475.48 L 1039.2 1475.72 L 1039.32 1475.96 L 1039.44 1476.2 L 1039.56 1476.44 L 1039.68 1476.68 L 1039.8 1476.92 L 1039.92 1477.16 L 1040.04 1477.4 L 1040.16 1477.64 L 1040.16 1478 L 1040.28 1478.24 L 1040.28 1478.48 L 1040.4 1478.72 L 1040.4 1479.08 L 1040.4 1479.32 L 1040.4 1479.56 L 1040.4 1479.8 L 1040.4 1480.16 L 1040.4 1480.4 L 1040.4 1480.64 L 1040.28 1481 L 1040.28 1481.24 L 1040.16 1481.48 L 1040.16 1481.72 L 1040.04 1481.96 L 1039.92 1482.32 L 1039.8 1482.56 L 1039.68 1482.8 L 1039.56 1483.04 L 1039.44 1483.28 L 1039.32 1483.52 L 1039.2 1483.76 L 1038.96 1483.88 L 1038.84 1484.12 L 1038.6 1484.36 L 1038.48 1484.6 L 1038.24 1484.72 L 1038 1484.96 L 1037.88 1485.08 L 1037.64 1485.32 L 1037.4 1485.44 L 1037.16 1485.56 L 1036.92 1485.68 L 1036.68 1485.8 L 1036.44 1485.92 L 1036.2 1486.04 L 1035.96 1486.16 L 1035.6 1486.28 L 1035.36 1486.4 L 1035.12 1486.4 L 1034.88 1486.52 L 1034.64 1486.52 L 1034.28 1486.52 L 1034.04 1486.64 L 1033.8 1486.64 L 1033.44 1486.64 L 1033.2 1486.64 L 1032.96 1486.64 L 1032.72 1486.52 L 1032.36 1486.52 L 1032.12 1486.52 L 1031.88 1486.4 L 1031.64 1486.4 L 1031.28 1486.28 L 1031.04 1486.16 L 1030.8 1486.04 L 1030.56 1485.92 L 1030.32 1485.8 L 1030.08 1485.68 L 1029.84 1485.56 L 1029.6 1485.44 L 1029.36 1485.2 L 1029.12 1485.08 L 1029 1484.96 L 1028.76 1484.72 L 1028.52 1484.48 L 1028.4 1484.36 L 1028.16 1484.12 L 1028.04 1483.88 L 1027.8 1483.64 L 1027.68 1483.4 L 1027.56 1483.16 L 1027.44 1482.92 L 1027.32 1482.68 L 1027.2 1482.44 L 1027.08 1482.2 L 1026.96 1481.96 L 1026.84 1481.72 L 1026.84 1481.48 L 1026.72 1481.12 L 1026.72 1480.88 L 1026.72 1480.64 L 1026.6 1480.4 L 1026.6 1480.04 L 1026.6 1479.8 L 1026.6 1479.56 L 1026.6 1479.32 L 1026.6 1478.96 L 1026.72 1478.72 L 1026.72 1478.48 L 1026.72 1478.12 L 1026.84 1477.88 L 1026.96 1477.64 L 1026.96 1477.4 L 1027.08 1477.16 L 1027.2 1476.92 L 1027.32 1476.68 L 1027.44 1476.44 L 1027.56 1476.2 L 1027.68 1475.96 L 1027.92 1475.72 L 1028.04 1475.48 L 1028.28 1475.24 L 1028.4 1475 L 1028.64 1474.88 L 1028.76 1474.64 L 1029 1474.52 L 1029.24 1474.28 L 1029.48 1474.16 L 1029.6 1473.92 L 1029.84 1473.8 L 1030.08 1473.68 L 1030.32 1473.56 L 1030.56 1473.44 L 1030.92 1473.32 L 1031.16 1473.2 L 1031.4 1473.08 L 1031.64 1473.08 L 1031.88 1472.96 L 1032.12 1472.96 L 1032.48 1472.84 L 1032.72 1472.84 L 1032.96 1472.84 L 1033.32 1472.84 L 1033.56 1472.84" fill="none" stroke="#000000" stroke-opacity="1" stroke-miterlimit="0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.32px" stroke-dasharray="" stroke-dashoffset="0px" style="stroke: red;"></svg:path>
          </svg:g>
        </svg:g>
      </svg:svg>
    </div>
  </body>
</html>

https://jsfiddle.net/9vsodk18/

Whereas the "non-namespaced" equivalent does;

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" width="100px" viewBox="1015, 895, 32, 18">
        <g transform="matrix(1 0 0 -1 0 2384)">
          <g transform="">
            <path d="M 1033.56 1472.84 L 1033.8 1472.84 L 1034.04 1472.84 L 1034.28 1472.84 L 1034.64 1472.84 L 1034.88 1472.96 L 1035.12 1472.96 L 1035.36 1473.08 L 1035.72 1473.08 L 1035.96 1473.2 L 1036.2 1473.32 L 1036.44 1473.44 L 1036.68 1473.56 L 1036.92 1473.68 L 1037.16 1473.8 L 1037.4 1474.04 L 1037.64 1474.16 L 1037.88 1474.28 L 1038 1474.52 L 1038.24 1474.64 L 1038.48 1474.88 L 1038.6 1475.12 L 1038.84 1475.24 L 1038.96 1475.48 L 1039.2 1475.72 L 1039.32 1475.96 L 1039.44 1476.2 L 1039.56 1476.44 L 1039.68 1476.68 L 1039.8 1476.92 L 1039.92 1477.16 L 1040.04 1477.4 L 1040.16 1477.64 L 1040.16 1478 L 1040.28 1478.24 L 1040.28 1478.48 L 1040.4 1478.72 L 1040.4 1479.08 L 1040.4 1479.32 L 1040.4 1479.56 L 1040.4 1479.8 L 1040.4 1480.16 L 1040.4 1480.4 L 1040.4 1480.64 L 1040.28 1481 L 1040.28 1481.24 L 1040.16 1481.48 L 1040.16 1481.72 L 1040.04 1481.96 L 1039.92 1482.32 L 1039.8 1482.56 L 1039.68 1482.8 L 1039.56 1483.04 L 1039.44 1483.28 L 1039.32 1483.52 L 1039.2 1483.76 L 1038.96 1483.88 L 1038.84 1484.12 L 1038.6 1484.36 L 1038.48 1484.6 L 1038.24 1484.72 L 1038 1484.96 L 1037.88 1485.08 L 1037.64 1485.32 L 1037.4 1485.44 L 1037.16 1485.56 L 1036.92 1485.68 L 1036.68 1485.8 L 1036.44 1485.92 L 1036.2 1486.04 L 1035.96 1486.16 L 1035.6 1486.28 L 1035.36 1486.4 L 1035.12 1486.4 L 1034.88 1486.52 L 1034.64 1486.52 L 1034.28 1486.52 L 1034.04 1486.64 L 1033.8 1486.64 L 1033.44 1486.64 L 1033.2 1486.64 L 1032.96 1486.64 L 1032.72 1486.52 L 1032.36 1486.52 L 1032.12 1486.52 L 1031.88 1486.4 L 1031.64 1486.4 L 1031.28 1486.28 L 1031.04 1486.16 L 1030.8 1486.04 L 1030.56 1485.92 L 1030.32 1485.8 L 1030.08 1485.68 L 1029.84 1485.56 L 1029.6 1485.44 L 1029.36 1485.2 L 1029.12 1485.08 L 1029 1484.96 L 1028.76 1484.72 L 1028.52 1484.48 L 1028.4 1484.36 L 1028.16 1484.12 L 1028.04 1483.88 L 1027.8 1483.64 L 1027.68 1483.4 L 1027.56 1483.16 L 1027.44 1482.92 L 1027.32 1482.68 L 1027.2 1482.44 L 1027.08 1482.2 L 1026.96 1481.96 L 1026.84 1481.72 L 1026.84 1481.48 L 1026.72 1481.12 L 1026.72 1480.88 L 1026.72 1480.64 L 1026.6 1480.4 L 1026.6 1480.04 L 1026.6 1479.8 L 1026.6 1479.56 L 1026.6 1479.32 L 1026.6 1478.96 L 1026.72 1478.72 L 1026.72 1478.48 L 1026.72 1478.12 L 1026.84 1477.88 L 1026.96 1477.64 L 1026.96 1477.4 L 1027.08 1477.16 L 1027.2 1476.92 L 1027.32 1476.68 L 1027.44 1476.44 L 1027.56 1476.2 L 1027.68 1475.96 L 1027.92 1475.72 L 1028.04 1475.48 L 1028.28 1475.24 L 1028.4 1475 L 1028.64 1474.88 L 1028.76 1474.64 L 1029 1474.52 L 1029.24 1474.28 L 1029.48 1474.16 L 1029.6 1473.92 L 1029.84 1473.8 L 1030.08 1473.68 L 1030.32 1473.56 L 1030.56 1473.44 L 1030.92 1473.32 L 1031.16 1473.2 L 1031.4 1473.08 L 1031.64 1473.08 L 1031.88 1472.96 L 1032.12 1472.96 L 1032.48 1472.84 L 1032.72 1472.84 L 1032.96 1472.84 L 1033.32 1472.84 L 1033.56 1472.84" fill="none" stroke="#000000" stroke-opacity="1" stroke-miterlimit="0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.32px" stroke-dasharray="" stroke-dashoffset="0px" style="stroke: red;"></path>
          </g>
        </g>
      </svg>
    </div>
  </body>
</html>

https://jsfiddle.net/xLbtjrqc/

I have read the Namespaces Crash Course several times, any ideas would be appreciated!

score 3 · Accepted Answer · answered Dec 14 '19 at 08:43

If you want to use xhtml you must serve the page with an approprate mime type i.e. application/xhtml+xml, application/xml or text/xml

A non XML mime type such as text/html won't allow you to use namespaces in markup at all.

jsfiddle uses text/html as its mime type so you can't use namespaces and xhtml there only html.

There are many other differences too e.g. your document must be valid XML if you use an XML mime type. Forgetting a close tag isn't fatal in HTML, it is in XML.

SVG not rendering on the browser when defining a XML namespace

1 Answers1