Why an SVG Should be Used in Web Design

UX Designer, Javon Bell, shares a presentation on why he uses SVGs instead of Font Icons in designs. Check it out - maybe you should be using them, too!

Transcript

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 VS SVG 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