Was ist eine korrekte Art, ein SVG zu deklarieren?

Question

Ich sah gerade diese einfache Svg online FIDDLE HERE.

Das HTML sieht wie folgt aus:

<div class="burger-ring is-open"> 
       <svg class="svg-ring"> 
        <path class="path" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="4" d="M 34 2 C 16.3 2 2 16.3 2 34 s 14.3 32 32 32 s 32 -14.3 32 -32 S 51.7 2 34 2" /> 
       </svg> 
    </div> 

Ist über eine korrekte Art und Weise SVG zu erklären? Es gibt keine xmlns="http://www.w3.org/2000/svg"?

Ist die Animation drehen Browser cross? Ich habe in IE, FF, Chrome und Opera getestet.

.path { 
    stroke-dasharray: 240; 
    stroke-dashoffset: 240; 
    stroke-linejoin: round; 
} 

@-webkit-keyframes dash-in { 
    0% { 
    stroke-dashoffset: 240; 
    } 
    40% { 
    stroke-dashoffset: 240; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    } 
} 

@keyframes dash-in { 
    0% { 
    stroke-dashoffset: 240; 
    } 
    40% { 
    stroke-dashoffset: 240; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    } 
} 
@-webkit-keyframes dash-out { 
    0% { 
    stroke-dashoffset: 0; 
    } 
    40% { 
    stroke-dashoffset: 240; 
    } 
    100% { 
    stroke-dashoffset: 240; 
    } 
} 
@keyframes dash-out { 
    0% { 
    stroke-dashoffset: 0; 
    } 
    40% { 
    stroke-dashoffset: 240; 
    } 
    100% { 
    stroke-dashoffset: 240; 
    } 
} 

?

Answer 1

HTML hat keine Namespaces, XML hat Namespaces.

Wenn Sie Ihr SVG in eine HTML-Datei einbetten, die als text/html geliefert wird, benötigen Sie keine xmlns-Attribute.

Wenn Sie Ihr SVG in eine Datei einbetten, die als XML z. application/xhtml + xml benötigen Sie xmlns-Attribute.

In Bezug auf Ihre zweite Frage: IE-Versionen vor Edge unterstützen keine CSS-Animation von SVG.