self closing svg elements - html

Question

I recently had an svg element that I created, and it was working locally with the self-closing tags like this:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 25px; width: 300px; display: inline-block;">
<circle cx="10" cy="10" r="4" stroke="black" stroke-width="1" fill="none" />
<line x1="14" y1="10" x2="286" y2="10" stroke-width="2" stroke="black" />
<circle cx="290" cy="10" r="4" stroke="black" stroke-width="1" fill="none" />
</svg>
but when rendered on the production server it came out with everything nested. The first circle was correctly nested in the svg element, but the line was nested within the first circle, and the second circle was nested within the line. The ending closing tag lines looked like: </circle></line></circle></svg>
I had to change the svg elements to use closing tags like so:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 25px; width: 300px; display: inline-block;">
<circle cx="10" cy="10" r="4" stroke="black" stroke-width="1" fill="none" ></circle>
<line x1="14" y1="10" x2="286" y2="10" stroke-width="2" stroke="black" ></line>
<circle cx="290" cy="10" r="4" stroke="black" stroke-width="1" fill="none" ></circle>
</svg>
Everywhere i look it suggests that closing tags on svg elements are optional. What gives?

Answer 1

There is nothing wrong with your initial markup (as you can see: http://jsfiddle.net/6b0fv1a2/), so that makes me believe that it's your server's mime types.
Apache:
"Though the SVG MIME Type has been included by default in the list of supported MIME Types in the Apache Web server since version 1.3.x, older versions may need to be updated."
.htaccess
Perhaps the easiest way to set the correct MIME Type is to use an ".htaccess" file. This is a configuration file that is often hidden. If your server does not have such a file, create a file and name it ".htaccess", and associate the SVG file extensions with the correct MIME Type; if the file already exists, you can simply add the correct entries to it. The particular lines you should add are:
AddType image/svg+xml svg
AddType image/svg+xml svgz
Read more (and other servers): http://www.w3.org/services/svg-server/