Scalable Vector Graphics

UFCFHD-15-M Information Architecture and Web Design

Introduction

Uses

Example

Advantages

Disadvantages

Resources

UFCFHD-15-M Information Architecture and Web Design

Scalable Vector Graphics

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

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

Example

UFCFHD-15-M Information Architecture and Web Design

The Creepy Mouth

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

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

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].