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>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s