Reusser Design's UX Designer, Javon Bell, shares a keynote presentation describing the difference between SVGs and Font Icons, and why SVGs should be used in web design.

1. SVG
UX Designer: JAVON
1

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

3. 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. 4
VSSVG FONT ICON
SVG by Javon Bell

5. 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. 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. 7
Designing SVGs
Adobe Illustrator (Mac & PC)
Sketch (Mac Only)
Inkscape (Mac & PC)

8. 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. 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. 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. 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. 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. 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. 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. 15
Resources
1) Flat Icon (SVG Library)
2) CSS Tricks
3) Tympanus
4) David Walsh
5) Dribble

16. 16
Conclusion
If you are using a graphic on your web
development project, use SVGs. For everything
else, there’s MasterCard.

17. Fin
UX Designer: JAVON
www.reusserdesign.com