Sense & SVG-ibility: Best Practices of SVG Usage

Talked presented at Connect.Tech 2017 in Atlanta, GA. Sept 22, 2017

Transcript

1. Best Practices of Scalable Vector Graphics Usage
2. What this talk is about ❖ A Brief History ❖ When is it suitable to use SVGs ❖ Some Examples from the web ❖ Best Practices & Common Mistakes ❖ Concluding Remarks
3. What this talk is NOT about ❖ An introduction to SVG design ❖ A workshop ❖ Critiquing/reviewing other forms of web animations ➢ ie. CSS, JS animation libraries, etc ❖ Exploring SVG-specific web libraries ➢ ie. Raphael, processing.js, snap.svg, etc
4. About Myself ❖ Georgia Tech graduate ❖ Freelance Web Developer ➢ Optimizing web animations ❖ Teacher ❖ Enjoys books Tamil Periasamy
5. A Brief History of SVGs ❖ Mid 1990s: Two competing vector languages ➢ PGML = Precision Graphics Markup Language ▪ Netscape ➢ VML = Vector Markup Language ▪ Internet Explorer ❖ 1999: the W3C [World Wide Web Consortium] unifies the two languages to create SVGs ❖ 2001: The current version (SVG 1.1) was ratified
6. SVGs vs Raster Images OUTPUT FILES SOURCE FILES jpg gif png tif ai eps pdf svg
7. Examples ❖ SVG filters on HTML5 video ➢ https://codepen.io/chriscoyier/pen/zbakI ❖ SVG clock ➢ https://codepen.io/icebob/pen/JYoQZg ❖ Animated Signature ➢ https://codepen.io/ghepting/pen/xnezB ❖ SVG Title/Hero Mask on Image ➢ https://codepen.io/fixcl/pen/CHgrn
8. Sense & SVG-ibility Marianne Elinor The Dashwood Sisters* * Illustrations by Laurie A. ❖ “Eager in everything” ❖ “No moderation” ❖ Impatient ❖ Copy-paste-solve ❖ Would own the latest & greatest tech ❖ “Sense of understanding” ❖ “Coolness of judgement” ❖ Prudent ❖ Optimizer ❖ Own an iPhone 4S
9. Creating a SVG Marianne <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/"> ]> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="200px" height="200px" viewBox="-15.146 -15.389 200 200" enable-background="new -15.146 -15.389 200 200" xml:space="preserve"> <defs> </defs> <path id="path_1_" d="M96.024,16.475c-21.967-21.966-57.582-21.967-79.549,0c-21.967,21.966-21.967,57.583,0,79.549 C18.83,18.829,47.677,21.503,69.371,8.055l64.864,64.863c5.077,5.077,13.308,5.077,18.385,0c5.077-5.0 76, 5.077-13.308,0-18.385, l-64.899-64.899C117.514,63.987,114.8,35.25,96.024,16.475z M80.01,80.01c-13.122,13.122-34.397,13.122-47.52,0,c-13.123-13.123-13.122-34.398,0-47.52c13.123-13.123,34. 397-13.123,47.52,0C93.132,45.611,93.133,66.887,80.01,80.01z"/> </svg>
10. Creating a SVG ❖ What was the problem? ❖ Copy-pasting the SVG code or importing the file directly from Illustrator ➢ Illustrator creates a lot of “bloat code” that isn’t pertinent to the SVG itself ➢ Different SVG creators produce different “bloat code” ❖ Solution ❖ Manually remove the “bloat code” ❖ Use a SVG image optimizer like Kraken.io
11. Creating a SVG Elinor <!DOCTYPE svg> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="-15.146 -15.389 200 200" enable-background="new -15.146 -15.389 200 200"> <path d="M96.02 16.48C74.06-5.5 ..."/> </svg>
12. Creating a SVG (Part 2) Marianne
13. Creating a SVG (Part 2) ❖ What was the problem? ❖ Single layer ➢ Leads to a very lengthy set of path coordinates ➢ Browser cannot discern the different shapes ➢ Unable to manipulate each shape via the DOM ❖ Solution ❖ Create multiple layers and sublayers ❖ Bonus: Give each layer a unique name & group by order of execution
14. Creating a SVG (Part 2) Elinor
15. Animated Frames Marianne The Doctor Dances
16. Animated Frames ❖ What was the problem? ❖ Treating photos (output files) as SVGs (source files) ➢ Too much complexity to vectorize! ➢ Actual SVG filesize of this is exponentially greater than GIF ❖ Solution ❖ Keep the GIF and photos as is OR ❖ Simplify the frames & artwork and then vectorize
17. Animated Frames Elinor The Doctor Dances
18. Animated SVGs ❖ Not only should the image be a good option for SVG, but the SVG should be a good option for the image ➢ Logos ➢ Non-complex vector-based illustrations ➢ UI controls (ie. buttons, dropdowns, etc) ➢ Infographics ➢ Icons
19. SVGs and WordPress Marianne ❖ Tries to upload SVGs directly into the Media Library ❖ Fails [‘File Not Supported’] ❖ Repeats x50 ❖ Gives up
20. SVGs and WordPress ❖ What was the problem? ❖ WordPress does not natively allow SVGs to be uploaded! ➢ Security threat due to its XML nature (unlike raster images) ➢ Source vs output files ❖ Solution ❖ Install a plugin that will allow SVGs into WordPress
21. SVGs and WordPress Marianne ❖ Downloads the first SVG plugin she finds Elinor Sister! You mustn’t be too hasty - what would Mother say?
22. SVGs and WordPress ❖ What was the problem? ❖ Not all plugins are created equal! ➢ Some SVG plugins (even popular ones) have malicious code in them that make your site vulnerable to attacks through your SVG files ❖ Solution ❖ Manually change the core via functions.php file in the child theme ❖ Sanitize the SVG before uploading via a trusted library
23. SVGs and WordPress Elinor ❖ SVG Sanitizer: ➢ https://github.com/darylldoyle/svg-sanitizer ❖ functions.php //add SVG to allowed file uploads function add_file_types_to_uploads($file_types){ $new_filetypes = array(); $new_filetypes['svg'] = 'image/svg+xml'; $file_types = array_merge($file_types, $new_filetypes ); return $file_types; } add_action('upload_mimes', 'add_file_types_to_uploads');
24. SVGs and WordPress ❖ If you are looking for a good plugin that sanitizes and adds SVGs: ➢ Safe SVG plugin (https://wordpress.org/plugins/safe-svg/)
25. In Conclusion ❖ There are way more use cases of SVGs than what was covered today ❖ Don’t be hasty when it comes to SVG design and implementation ❖ SVGs don’t work in ALL instances - know when they do! ❖ Don’t just copy and paste ❖ Find simpler and practical solutions BE MORE LIKE ELINOR
26. Any Questions?
27. Thank You! Tamil Periasamy tsperiasamy@gmail.com Twitter: @tsperiasamy