Svg Overview And Js Libraries

SVG Overview and JS Libraries Basics and review of available resources v1.0, Seamus Roche 1/5/2010

What is SVG? ,[object Object],[object Object]

How does SVG compare to Flash? ,[object Object]

Basic Shapes with SVG, Rectangles3 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],3. http://www.svgbasics.com/shapes.html

Basic Shapes with SVG, Circles3 <circle cx="100" cy="100" r="80" fill="orange" stroke="navy" stroke-width="10" /> ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],3. http://www.svgbasics.com/shapes.html

Basic Shapes in a SVG document ,[object Object]

SVG Transforms ,[object Object],<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" height="480" width="640">  <rect transform="rotate(-19, 181, 185)" stroke-opacity="1" fill-opacity="1" stroke-width="5" stroke="#000000" fill="#FF0000" id="svg_1" height="209" width="209" y="81" x="77"/> </svg> 4. http://www.svgbasics.com/rotate.html Note : transforms like these can also be used in SMIL animations and triggered via JS events. Reviewing some examples on svgweb or raphael demos to see how these work

Reusing elements with 'defs' and 'use' ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Lines and paths ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],5. http://www.svgbasics.com/lines.html

More core SVG features... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

JS Libraries for using SVG ,[object Object],[object Object],[object Object],[object Object],[object Object],6 http://techmatters.posterous.com/svg-in-internet-explorer-svgweb-and-raphael

A note on SVG and browser support ,[object Object],[object Object],[object Object],[object Object],[object Object]

Demos svgweb, Raphael and svg-edit ,[object Object],[object Object],[object Object]

SVG versus Canvas7 Canvas and SVG complement each other. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],7 Notes from Brad Neuberg presentation YouTube - SVG Web Library and Open Web Advocacy

SVG links, tools etc ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

SVG Overview and JS Libraries the end.

Svg Overview And Js Libraries

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (12)

Similar to Svg Overview And Js Libraries

Similar to Svg Overview And Js Libraries (20)

Svg Overview And Js Libraries