1. Scalable Vector Graphics UFCFHD-15-M Information Architecture and Web Design

2. Introduction Uses Example Advantages Disadvantages Resources UFCFHD-15-M Information Architecture and Web Design Scalable Vector Graphics

3. Introduction UFCFHD-15-M Information Architecture and Web Design SVG – Scalable Vector Graphics XML compatible mark-up language used for the creation of full resolution, scalable two-dimensional graphics Vector images are composed from shapes, bitmap images are composed from dots SVG coding can be embedded into a HTML or exist in its own.svg file SVG standard developed by World Wide Web Consortium

4. Uses UFCFHD-15-M Information Architecture and Web Design Interaction, animation, deliver specific domain requirements Supports events (mouse down, mouse up, mouse over etc) The ability to pan and zoom a graphic without loss of quality or resolution Creation of animated images and icons

5. Example UFCFHD-15-M Information Architecture and Web Design The Creepy Mouth

6. Advantages UFCFHD-15-M Information Architecture and Web Design SVG do not loss quality or resolution when scaled or zoomed The developer can have confidence in the usability of the image SVG are searchable, can be directly embedded into HTML or separate image file (.svg) The SVG file size is very small and can be compressed SVG can be used for high quality printing and large format displays SVG can be interactive and dynamic, through the usage of scripts

7. Disadvantages UFCFHD-15-M Information Architecture and Web Design SVG are not supported by all browsers, especially older versions of Android SVG are not suitable for complex photographic images

8. Resources UFCFHD-15-M Information Architecture and Web Design Anon. (2015) SVG Help. Available from: http://en.wikipedia.org/wiki/Wikipedia:SVG_help [Accessed 30th January 2015]. Anon. (2013) SVG Browser Support. Available from: http://www.svgeneration.com/learn/browser-support [Accessed 31st January 2015]. Dahlström, E., Dengler, P., Grasso, A., Lilley, C., McCormack, C., Schepers, D. and Watt, J. (2011) Scalable Vector Graphics (SVG) 1.1 (Second Edition). Available from: http://www.w3.org/TR/SVG/ [Accessed 1st February 2015]. Deveria, A. (2014) Can I use. Available from: http://caniuse.com/#cats=SVG [Accessed 31st January 2015]. Jenkov, J. (2014) A Simple SVG Eample. Available from: http://tutorials.jenkov.com/svg/simple-svg-example.html [Accessed 30th January 2015]. Morville, P. and Rosenfeld, L. (2006) Information Architecture for the World Wide Web [online]. Beijing; Farnham: O'Reilly. Moto Editorial (2013) Pros and Cons for each Type of Image Extensions. Available from: http://www.motocms.com/blog/web-design/pros-cons-types-image-extensions/ [Accessed 31st January 2015]. Pukhalski, I. (2014) Rethibking Responsive SVG. Available from: http://www.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/ [Accessed 31st January 2015].