CODEWITHSUNDEEP
javascriptcsssvg
Alexander Solonik
Alexander Solonik

Reputation: 10230

What is a correct way of declaring a SVG?

I just saw this simple svg online FIDDLE HERE.

The HTML looks as follows:

  <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>

Is the above a correct way to declare SVG? There is no xmlns="http://www.w3.org/2000/svg"?

Is the rotate animation cross browser ? I have tested in IE, FF, Chrome and Opera.

.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;
  }
}

?

Upvotes: 1

Views: 78

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

HTML does not have namespaces, XML has namespaces.

  • If you embed your SVG in a HTML file served as text/html you don't need xmlns attributes.

  • If you embed your SVG in a file served as XML e.g. application/xhtml+xml you will need xmlns attributes.

Regarding your second question: IE versions prior to edge do not support CSS animation of SVG.

Upvotes: 3

Related Questions