This document provides an introduction to Scalable Vector Graphics (SVG). It begins with an agenda that outlines topics including what SVG is, why it should be used, tools for working with SVG, and sample artwork. The document then discusses the history and standards behind SVG, how it works as a vector format, and why it may be preferable to other formats like JPEG, PNG, Flash or Silverlight. Browser support, manual and programmatic production of SVG files, and related resources are also covered. The document concludes with an invitation for questions.
4. My Background
• Java, (Smalltalk)
• (Perl), Ruby
• XML
– XSLT
– XSD
– Namespaces
• HTML
– CSS
4
5. Introduction to SVG
History of SVG
What's SVG?
Why use SVG?
Related and Competing Standards
6. History of SVG
• 1999: Version 1.0
– PGML (Precision Graphics Markup Language)
– VML (Vector Markup Language)
• 2001: Version 1.0 recommendation
• 2003: Version 1.1 recommendation
– SVG Mobile: SVG Basic & SVG Tiny
• 2008: SVG Tiny 1.2 recommendation
• 2011: SVG 1.1 SE recommendation
• Version 1.2 working draft
• SVG 2.0 in progress
6
7. What's SVG?
• Scalable Vector Graphics
– Vector based graphics on the net
– No quality loss after scaling
• XML based
– Integrates with DOM and XSL
• Animation on every element
7
9. Why SVG? (cont'd)
• Smaller files
– Better compression than JPEG or PNG
– Even better with SVGZ
• Open standard, part of HTML 5
– Pure XML
– Can be read and manipulated by many tools
– Extensible
• Text based
– Text manipulation
– Indexing
9
10. Why SVG? (cont'd)
• In-line in HTML possible
– Shared CSS
• Animation and interaction
– SMIL
– ECMAScript
– Other scripting languages
10
16. Manual Production
• Drawing tools
– Inkscape
•http://www.inkscape.org/
– Export from other drawing tools
• Any XML editor
• Any text editor
• Any browser to view/check the result
16
44. Elliptic Arc
• Rx and ry: radius
• X-axis-rotation: Rotation of the X axis
• Large-arc-flag:
– 0 if less than 180°
– 1 if more than 180°
• Sweep-flag:
– 0 if negative direction
– 1 if positive direction
• X and y: end points
44
82. Color Transformations
• Matrix:
– Transformation per color channel (r, g, b and α)
– 0 is black (no color)
• Alternatives:
– Saturate, HueRotate, LuminanceToAlpha
82