html - self closing svg elements -

html - self closing svg elements -

i had svg element created, , working locally self-closing tags 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 production server came out nested. first circle correctly nested in svg element, line nested within first circle, , sec circle nested within line. ending closing tag lines looked like: </circle></line></circle></svg>

i had alter svg elements utilize closing tags 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 suggests closing tags on svg elements optional. gives?

there nil wrong initial markup (as can see: http://jsfiddle.net/6b0fv1a2/), makes me believe it's server's mime types.

apache: "though svg mime type has been included default in list of supported mime types in apache web server since version 1.3.x, older versions may need updated."

.htaccess

perhaps easiest way set right mime type utilize ".htaccess" file. configuration file hidden. if server not have such file, create file , name ".htaccess", , associate svg file extensions right mime type; if file exists, can add together right entries it. particular lines should add together are:

addtype image/svg+xml svg addtype image/svg+xml svgz

read more (and other servers): http://www.w3.org/services/svg-server/

html html5 svg