SVG

SVG (Scalable Vector Graphics) defines vector-based graphics in XML format


SVG Shape

            <!--An SVG image begins with an <svg> element-->
            
            <svg width="100" height="100">
                <!--If cx and cy are omitted, the circle's center is set to (0, 0)-->
                <circle cx="50" cy="50" r="41" stroke="#00b0f0" stroke-width="4" fill="#ccc" />
                <circle cx="50" cy="50" r="20" stroke="#00b0f0" stroke-width="3" fill="#fff" />
                Your browser does not support inline SVG.
            </svg>
            <svg width="100" height="100">
                <!--The rx and the ry attributes rounds the corners of the rectangle-->
                <rect width="100" height="100" rx="20" ry="20" style="fill:#ccc; stroke-width: 3; stroke: #00b0f0; " />
                Your browser does not support inline SVG.
            </svg>
            
Your browser does not support inline SVG. Your browser does not support inline SVG.

SVG Line

            <svg height="200" width="200">
                <line x1="0" y1="0" x2="100" y2="100" style="stroke:#483d8b;stroke-width:2" />
                <line x1="100" y1="0" x2="0" y2="100" style="stroke:#b22222;stroke-width:4" />
                Your browser does not support inline SVG.
            </svg>
            
Your browser does not support inline SVG.

SVG Text

            <svg height="50" width="100">
                <text x="0" y="15" fill="red">Kitty says meow!</text>
                Your browser does not support inline SVG.
            </svg>
            
Kitty says meow! Your browser does not support inline SVG.

SVG with Javascript



Original Source: http://msdn.microsoft.com/en-us/library/ie/gg193979(v=vs.85).aspx