Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 SVG Support check using JavaScript – the simple way

527 views

Published on

My last post talked about how you can detect whether your browser supports HTML5 Canvas or not using simple JavaScript technique. Based on the same principles, this post illustrates how you can detect if your browser supports SVG elements. You may note SVG is Scalable Vector Graphics and HTML5 has native support for SVG tags. The difference with Canvas is that in case of SVG elements, they become a part of the DOM and you can manipulate each SVG elements, whereas in case of Canvas, the entire <canvas></canvas> tag becomes one node in the DOM and anything inside the Canvas <canvas> tag (for eg. a Rectangle) cannot be manipulated individually using standard DOM methods. Browse the web and you will find a hell lot of topics on this.
For the full post download this file or visit the actual blog post link: http://jbkflex.wordpress.com/2013/05/05/html5-svg-support-check-using-javascript-the-simple-way/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

HTML5 SVG Support check using JavaScript – the simple way

  1. 1. HTML5 SVG Support check usingJavaScript – the simple wayFor the full post visit the actual blog post link: http://jbkflex.wordpress.com/2013/05/05/html5-svg-support-check-using-javascript-the-simple-way/My last post talked about how you can detect whether your browser supports HTML5 Canvas or not using simpleJavaScript technique. Based on the same principles, this post illustrates how you can detect if your browsersupports SVG elements. You may note SVG is Scalable Vector Graphics and HTML5 has native support for SVGtags. The difference with Canvas is that in case of SVG elements, they become a part of the DOM and you canmanipulate each SVG elements, whereas in case of Canvas, the entire <canvas></canvas> tag becomes one node inthe DOM and anything inside the Canvas <canvas> tag (for eg. a Rectangle) cannot be manipulated individuallyusing standard DOM methods. Browse the web and you will find a hell lot of topics on this.Alright, now back to the detection code. Just copy/paste this inside your window load / body load or in case ofJQuery the $(document).ready() method,if(!document.createElement(svg).getAttributeNS){document.write(Your browser does not support SVG!);return;}So, if your browser does not support SVG, then it will not process further (in case your application cannot livewithout SVG). But if you have a back up plan and you can live without SVG in your browser, then you canadd an else block along with the if so that you can write your backup logic.ExplanationWell, the code is very simple. Inside the if condition I create a SVG element using the standardDOM createElement()method. Now this will create a <svg></svg> object. Now next thing I do is to check ifthe getAttributeNS() method is defined or not. If you browser does not support <svg> then there is no way it willunderstand getAttributeNS() and that’s the catch.

×