Get my new tutorials in your inbox every week

Inline SVG support in HTML5 compatibility test

We know that we can write inline SVG or SVG tags directly in HTML5 document, but not all browsers support that. Here is a compatibility table that displays the support of inline SVG in HTML5 in modern desktop and mobile web browsers.

Inline SVG support in HTML5 in browsers

Image courtesy : http://caniuse.com

You can try running this small piece of code in browsers other than the ones that support inline SVG (this should run fine in latest versions of Firefox, IE and Google Chrome).

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Test - Inline SVG compatibility</h1>

      <svg id="mySVG" width="200" height="150" style="border: 1px solid black;">
        <g id="myGroup">
          <rect
             id="myRect"
             width="36.416"
             height="36.416"
             x="30"
             y="30"
             fill="red"/>
          <text id="myText"
                x="80"
                y="80"
                font-family="Verdana"
                font-size="24"
                fill="blue">hello world</text>
        </g>
      </svg>

  </body>
</html>

Write a Comment

Your email address will not be published. Required fields are marked *