Scalable Vector Graphics (SVG)

> Data Visualization (vis|viz|graphic|image) > Scalable Vector Graphics (SVG)

1 - About

SVG is a markup language describing two-dimensional image in XML .

SVG allows for three types of graphic objects:

Vector drawing software like Inkscape can be used to generate SVG files

The SVG element is conceptually similar to HTML’s canvas element.

Visual Element:


3 - Example

SVG - Circle

<svg >
    <circle cx="60" cy="60" r="50" fill="#D5D8CB" stroke="#ECDCC6" stroke-width="5"/>

4 - Support from the browser

With mordernizer.

If (Browser Supports Features: svg  and inlinesvg) then 
          d3 (that works only with Svg)
          an other script
<script src="js/modernizr.js"></script>
<script type="text/javascript">
                test: Modernizr.svg && Modernizr.inlinesvg,
                yep : [ 'js/d3.v3.min.js', 'js/script.js' ]

5 - Documentation / Reference