Question

I’m trying to inline SVG in a HTML4 doc. I was suggested that there might be some problem since HTML4 does not support inline SVG, so I should do it in XHTML instead.

Interestingly, although supporting inline SVG is not part of HTML4 standard, browsers using WebKit should be happy with inline SVG because its parser is capable of parsing HTML5, which duly supports inline SVG. Unfortunately, Firefox is not in the same league.

However, it’ll be fine for FF as well if I use JavaScript to append a SVG node to a container in the runtime(see below. I got this idea from jquery svg, a plug-in for jquery). Why is it ok to do so? It just seems to me too good to be true.
(I’m a complete novice in JavaScript programming and probably missing something very obvious……)

function onloadSVG(div_container) {
    var svgE = document.createElementNS('http://www.w3.org/2000/svg',
        'svg');
    svgE.setAttribute('version', '1.1');
    svgE.setAttribute('width', div_container.clientWidth);
    svgE.setAttribute('height', div_container.clientHeight);
    div_container.appendChild(svgE);

    var node = svgE.ownerDocument.createElementNS('http://www.w3.org/2000/svg',
        'circle');
    node.setAttribute('cx', '100');
    node.setAttribute('cy', '100');
    node.setAttribute('r', '50');
    node.setAttribute('fill', 'red');
    node.setAttribute('stroke', 'black');
    node.setAttribute('stroke-width', '5');
    svgE.appendChild(node);
}

Answer 1

Couple of reasons:

HTML4 and DOM are not exactly the same thing.

HTML is just a way of saying what DOM nodes need to be created, but DOM can do much more than that. It’s like unzipping files to a filesystem. Your filesystem can support symlinks, hardlinks, fifos, permissions and all the fancy stuff that ZIP can’t.

Even without SVG you can create DOM that has no HTML syntax. You can nest <optgroup>, put <ol> in <p>, insert text into <br></br>, etc.

Browsers (with exception of IE) have just one engine

It takes extra effort to disable things that browsers support, but weren’t required back when some spec was written. Browsers will support CSS and <table> when given HTML 3.2. They will support <font> even in HTML4 Strict.

Browsers only special-case some behaviors of quirks mode and application/xhtml+xml mode, which are minimum required for compatibility/conformance. Since lack of support SVG in HTML DOM is not required for compatibility nor conformance, there’s no point spending time on disabling it.