57706 - Previous Lecture Using 2D Animation With SVG:...

Info iconThis preview shows pages 1–2. Sign up to view the full content.

View Full Document Right Arrow Icon
Using 2D Animation With SVG: Introduction to JSR 226 Murali Annavaram & Bhaskar Murali Annavaram & Bhaskar Krishnamachari Krishnamachari Ming Hsieh Department of Electrical Engineering Engineering USC USC Lecture notes based in part on slides created by Vidya Setlur , , Thanks also to Thanks also to Mikko Mikko H. H. Lipasti Lipasti for course suggestions. for course suggestions. Previous Lecture y In previous class we looked at Tiledlayers, Sprites for generating graphics in gaming y These API use Raster images (gif, jpeg) and transform them ¾ Raster stores pixel information ¾ Raster images are good for picture like quality on screen ¾ The disadvantage of Raster images is that they take more space – serious disadvantage in mobile domain ¾ Raster images cause distortion in zooming y How do we address these drawbacks? Vector Graphics y Vector graphics use mathematical equations to represent basic shapes ¾ Lines, points, curves, rectangles, circles, ovals… ¾ Much smaller file sizes y Vector graphics do not have a set resolution ¾ Better at zooming without distortion ¾ Independent of resolution – uses the best resolution based on the device screen resolution y Unfortunately, poor representation of images ¾ Most photo images are not simple shapes ¾ In raster graphics representation of images is a collection of pixels. Scalable Vector Graphics y XML -based graphics standard from W3C. y Allows three types of visual entities: ¾ Graphics shapes ¾ Text ¾ Bitmap graphics like PNGs embedded y Simple Example of SVG <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" viewBox="0 0 30 30"> <desc>Example SVG file</desc> <rect x="0" y="10" width="30" height="10" fill="blue"/> <text x="4" y="15" style="fill:#000000;stroke:none;font- family:Arial;font-size:3">Hello SVG World!</text> </svg> SVG Described As XML SVG Rendering Model on Mobile Phones y Uses hierarchical model to render the XML on display ¾ The XML file is parsed depth first and painted in that order ¾ The most shallow element is the top layer ¾ Old layers can be obscured by new layers, unless we set the transparency levels… y I am not a graphics person, so for more information read on your own ¾ More on SVG: http://www.w3.org/TR/SVGMobile12/struct.html ¾ More on Vector Graphics: http://en.wikipedia.org/wiki/Vector_graphics ¾ SVG Creation Tools: www.tinyline.com
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Image of page 2
This is the end of the preview. Sign up to access the rest of the document.

This note was uploaded on 12/22/2010 for the course EE 579 taught by Professor Krishnamachari/annavaram during the Spring '08 term at USC.

Page1 / 5

57706 - Previous Lecture Using 2D Animation With SVG:...

This preview shows document pages 1 - 2. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online