SVG

UX Designer: JAVON

1

2

Scalable Vector Graphics

XML-based vector image format for two-

dimensional graphics with support for

interactivity and animation. The SVG

specification is an open standard developed

by the World Wide Web Consortium (W3C)

since 1999.

” …Baby One More Time” — Britney Spears

Why SVG?

Browsers: IE 9+, Firefox 4+, Chrome 4+,

Safari 4+, and Opera4+

Scale: Fits any size on a web page

XML Format: Shapes not dots

File Size: Saved as small as possible

3

4

VSSVG FONT ICON

SVG by Javon Bell

5

Vectors? Winner: SVG SVG icons are 100% vector. Font icons are considered text and the browser treats it as such. This means your font icons will not be as sharp as you may expect them to be.

CSS? Winner: SVG The options are unlimited as you have the ability to control multiple parts of the SVG. Font icons are limited to the font CSS, nothing more.

Browser Fails? Winner: SVG If the SVG is part of the HTML, it will display. No worries about call backs to the server because its already part of the HTML. Not every browser supports @fontface, and blocking applications may prevent your font from showing.

Accessibility? Winner: SVG SVG has many attributes within the file (ex. <title><desc>) to help you better define your graphic. Font icons use pseudo and span elements to display the font. Additional labor is needed for any screen reader to know it is an icon.

6

Winner: SVG

Bottom line, SVGs are viewable on almost

every browser (except for IE 8 and below if

you want to get technical).

7

Designing SVGs

Adobe Illustrator (Mac & PC)

Sketch (Mac Only)

Inkscape (Mac & PC)

8

SVG Setup

(Sketch Example)

1) Select the vector.

2) Change the name of the layer as this

will become your id or class name for

browser customization.

3) Export as SVG.

9

SVG Development

HTML: Paste this file into the document

and make needed edits. Delete

commented out data and make any

needed changes to the class or id.

CSS: Use the SVG id or class name to

call the specific part to style.

10

SVG Examples (Reusser Design)

www.wpartners.org (Developed by Nick Johnson)

www.neindiana.com (Developed by Javon Bell)

www.iotron.com

www.polarleasing.com

11

World Partners

World Partners wanted a way to show all of

their ministries around the world. Nick Johnson

(@thebrawnyman) used an existing SVG of the

world and customized each country with its

own class name based on the country, ministry

type (missionaries, national partners, national

churches, and projects). He also added

javascript click function to display each

ministry type for the user to view.

[ View Live SVG ]

12

Northeast Indiana Regional

Partnership

NEIRP wanted to display their counties as a

clickable graphic. Javon Bell (@javonbell) took

the graphic and converted it to a SVG in Sketch

to organize each county by class names. Link

tags were added to each county along with the

URL path.

[ View Live SVG ]

13

Clickable SVG

In Safari, you have to modify the link in

the SVG in order to make the click

function work. You will need to add

xlink: right before the href in the link tag.

Example: <a xlink:href="/northeast-

indiana/member-county-profiles/

steuben-county">

“I’m afraid I just blue myself”- Tobias Fünke

14

Future of SVG

(Personal Opinion)

1) UI (user interface) designers and

front-end developers will be work closer

on projects.

2) Online ads will utilize SVG for

advertisements flexibility.

3) PNG graphic images will see a major

decrease in usage.

4) Larger increase in SVG animated

graphics over the use of video.

15

Resources

1) Flat Icon (SVG Library)

2) CSS Tricks

3) Tympanus

4) David Walsh

5) Dribble

16

Conclusion

If you are using a graphic on your web

development project, use SVGs. For everything

else, there’s MasterCard.

Fin

UX Designer: JAVON

www.reusserdesign.com