HTML5 SVG Support check using JavaScript – the simple way

73 %
27 %
Information about HTML5 SVG Support check using JavaScript – the simple way
Technology

Published on May 13, 2013

Author: jsphkhan

Source: slideshare.net

Description

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/

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.

Add a comment

Related presentations

Related pages

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 simple JavaScript technique. Based on the ...
Read more

HTML5 Canvas Support check using JavaScript – the simple ...

This is how you can check for HTML5 Canvas support in your browser by using JavaScript, there's no need of an external library like Modernizer ...
Read more

HTML5 Canvas vs. SVG: Choose the Best Tool for the Job

HTML5 Canvas vs. SVG: Choose the ... and can be manipulated using a combination of JavaScript ... In the event that the browser does not support SVG, ...
Read more

javascript - Best way to detect that HTML5 is not ...

The standard way to deal with situations where the browser does not support the HTML5 Read more

HTML5test - How well does your browser support HTML5?

HTML5test how well does your browser support HTML5? Your browser; Other browsers; Compare; News; Device Lab; About the test
Read more

Drawing a SVG file on a HTML5 canvas - Stack Overflow

Drawing a SVG file on a HTML5 ... Mozilla has a simple way for drawing SVG on canvas ... How to convert svg to png using html5 canvas/javascript/jquery ...
Read more

SVG Fundamentals - HTML5 Rocks

Vector graphics are a great way to ... support HTML5 and SVG, their screen resolutions and the file size of a background image of the HTML5 logo using ...
Read more

Using HTML5 Canvas vs. SVG - Safari Blog

Using HTML5 Canvas vs. SVG. ... you can create simple animations without using any JavaScript. SVG is supported in ... Check out these HTML5 books ...
Read more

HTML5 SVG - W3Schools

HTML5 SVG « Previous. ... The HTML element (introduced in HTML5) ... Sorry, your browser does not support inline SVG.
Read more