Scalable Vector Graphics (SVG)

About

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

You just have to declare the visuals that you want.

SVG allows for three types of graphic objects:

• vector graphic shapes (e.g., paths consisting of straight lines and curves),
• multimedia (such as raster images, video, and audio),
• and text.

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

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

Articles Related

Example

A circle

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

• Output:

Visual Element

• SVG - Shape and Path ie rect, circle, ellipse, …
• text

Support from the browser

With mordernizer.

If (Browser Supports Features: svg  and inlinesvg) then 
    load 
          d3 (that works only with Svg)
          an other script

<script src="js/modernizr.js"></script>

<script type="text/javascript">
        Modernizr.load({
                test: Modernizr.svg && Modernizr.inlinesvg,
                yep : [ 'js/d3.v3.min.js', 'js/script.js' ]
        });
</script>

Documentation / Reference

• TR/SVG/
• Scalable Vector Graphics (SVG) Tiny 1.2 Specification
• Scalable Vector Graphics (SVG) 1.1 (Second Edition) Erik Dahlström; et al. 16 August 2011.
• Book SVG