Scalable Vector Graphics Dietz Ellis 04/17/06

SVG SVG is a language for describing two- dimensional graphics in XML. SVG is a language for describing two- dimensional graphics in XML. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text.

SVG advantages over bitmap or raster formats such as: Zooming: Users can magnify their view of an image without negatively affecting the resolution. Zooming: Users can magnify their view of an image without negatively affecting the resolution. Small file size: SVG files are typically smaller than other Web-graphic formats and can be downloaded more quickly. Small file size: SVG files are typically smaller than other Web-graphic formats and can be downloaded more quickly. Display independence: SVG images always appear crisp on your screen, no matter the resolution. You will never experience “pixilated” images. Display independence: SVG images always appear crisp on your screen, no matter the resolution. You will never experience “pixilated” images. Superior color control: SVG offers a palette of 16 million colors. Superior color control: SVG offers a palette of 16 million colors. Interactivity and intelligence: Since SVG is XML- based, it offers dynamic interactivity that can respond to user actions. Interactivity and intelligence: Since SVG is XML- based, it offers dynamic interactivity that can respond to user actions.

SVG vs. Flash Macromedia has been the dominant force behind vector-based graphics on the web for the last 10 years. It is apparent, however, that SVG provides alternatives to many of the functions of Flash and incorporates many others. Macromedia has been the dominant force behind vector-based graphics on the web for the last 10 years. It is apparent, however, that SVG provides alternatives to many of the functions of Flash and incorporates many others.

Advantages to SVG SVG can easily be created by ASP, PHP, Perl, etc and extracted from a database. SVG can easily be created by ASP, PHP, Perl, etc and extracted from a database. It has a built-in ECMA-script (JavaScript) engine, so you don't have to code per browser, and you don't need to learn Flash's action-script. It has a built-in ECMA-script (JavaScript) engine, so you don't have to code per browser, and you don't need to learn Flash's action-script. SVG is XML, meaning it can be read by anything that can read XML. Flash can use XML, but needs to convert it before use. SVG is XML, meaning it can be read by anything that can read XML. Flash can use XML, but needs to convert it before use. Text used in SVG remains selectable and searchable. Text used in SVG remains selectable and searchable. You only need a text editor to create SVG, as opposed to buying Flash. You only need a text editor to create SVG, as opposed to buying Flash.

Advantages of Flash Use Flash if you want complex animations, or complex games (SVG's built in SMIL animation engine is extremely processor intensive.) Use Flash if you want complex animations, or complex games (SVG's built in SMIL animation engine is extremely processor intensive.) Use Flash if your users will not be so computer literate, for instance a children's site, or a site appealing to a wide audience. Use Flash if your users will not be so computer literate, for instance a children's site, or a site appealing to a wide audience. Use Flash if sound is important - SVG/SMIL supports sound, but it's pretty basic. Use Flash if sound is important - SVG/SMIL supports sound, but it's pretty basic.

Getting a SVG Viewer Internet Explorer: recommend using Adobe SVG viewer plug-in: ain.html Internet Explorer: recommend using Adobe SVG viewer plug-in: ain.html ain.html ain.html FireFox: verison 1.5 comes with a SVG installed. Download newest version of FireFox: FireFox: verison 1.5 comes with a SVG installed. Download newest version of FireFox:

Getting started Basic syntax of SVG: Basic syntax of SVG: …….</svg>

SVG : Text This is SVG. This is SVG. </svg>Result:

Shapes : Rectangle </svg>Result:

Shapes : Circle </svg>Result:

SVG : Paths </svg>Result:

Path explanation Moveto (M) Start a new sub-path at the given (x,y) coordinate. Lineto (L) Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. Closepath (Z) Close the current sub path by drawing a straight line from the current point to current sub path’s initial point.

SVG in HTML 3 Methods: embed, object, iframe 3 Methods: embed, object, iframeEmbed: Object: Iframe:

Assignment Using SVG make a picture of a house, using Circle, Rectangle, and at least one Path. Using SVG make a picture of a house, using Circle, Rectangle, and at least one Path.

Questions/Concerns? (678) Feel free to contact me either way….