Fantastic SVGsand Where to Find Them
Chris Yee@cmyee
https://chrisyee.ca/https://chrisyee.ca/https://chrisyee.ca/https://twitter.com/cmyeehttps://twitter.com/cmyee
Chris YeeWeb Developer at circus strategic communications inc.wearecircus.ca
@cmyee
wearecircus.ca/wcott17
@CircusStrategic
https://chrisyee.ca/https://chrisyee.ca/https://chrisyee.ca/https://wearecircus.ca/?utm_source=wcott17&utm_medium=presentationhttps://wearecircus.ca/?utm_source=wcott17&utm_medium=presentationhttps://wearecircus.ca/?utm_source=wcott17&utm_medium=presentationhttps://wearecircus.ca/?utm_source=wcott17&utm_medium=presentationhttps://wearecircus.ca/?utm_source=wcott17&utm_medium=presentationhttps://wearecircus.ca/?utm_source=wcott17&utm_medium=presentationhttps://twitter.com/cmyeehttps://twitter.com/cmyeehttps://wearecircus.ca/wcott17https://twitter.com/CircusStrategichttps://twitter.com/CircusStrategic
1. What are SVGs?
2. Benefits of using SVGs
3. Browser support
4. Using SVGs in themes
5. SVG uploads in the media library
6. Best practices
7. Finding SVGs
Overview
What are SVGs?
Scalable Vector Graphics
Adobe Illustrator$$$
Sketch$
InkscapeFree
http://www.adobe.com/ca/products/illustratorhttps://www.sketchapp.com/https://inkscape.org/en/http://www.adobe.com/ca/products/illustratorhttp://www.adobe.com/ca/products/illustratorhttps://www.sketchapp.com/https://www.sketchapp.com/https://inkscape.org/en/https://inkscape.org/en/
Benefits of using SVGs
Small file size
PNG (72kb) SVG (29kb)
Scalability
PNG100 x 100px
PNG375 x 375px
SVG375 x 375px
Styling with CSS
CSS styling demo
CSS animation
CSS animation demo
Where can I use SVGs?
logos illustrations
icons infographicsFox vector created by Freepik
https://wearecircus.ca/abouthttps://wearecircus.ca/abouthttps://wearecircus.ca/abouthttp://www.freepik.com/free-vector/hand-drawn-forest-animal-collection_845584.htmhttp://www.freepik.com/free-vector/hand-drawn-forest-animal-collection_845584.htm
Browser support
Source: caniuse.com
http://caniuse.com/#feat=svghttp://caniuse.com/#feat=svg
Using SVGs in themes
Image tag
Background image
Inline SVG
Inline SVG (a better way!)
wapuu.svg wapuu.php
Image Tag Background Image Inline SVG
CSS Styling
CSS Animation
Limited Limited Yes
Limited Limited Yes
Getting the most out of SVGs
SVG uploads in the media library
Plugins (free + easy!)
SVG SupportBy Benbodhi
Safe SVGBy Daryll Doyle
https://wordpress.org/plugins/svg-support/https://wordpress.org/plugins/svg-support/https://wordpress.org/plugins/svg-support/https://wordpress.org/plugins/svg-support/https://wordpress.org/plugins/svg-support/https://wordpress.org/plugins/safe-svg/https://wordpress.org/plugins/safe-svg/https://wordpress.org/plugins/safe-svg/https://wordpress.org/plugins/safe-svg/https://wordpress.org/plugins/safe-svg/
functions.php (advanced)
function allow_svg_upload($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes;}add_filter('upload_mimes', 'allow_svg_upload');
Source: css-tricks.com
https://css-tricks.com/snippets/wordpress/allow-svg-through-wordpress-media-uploader/
Best practices
295px
235px
88px 260px
Specify a width & height
Outline text
Right Click > Create Outlines
Fit to artboard
Object > Artboards > Fit to Artboard Bounds
Optimize your files
jakearchibald.github.io/svgomg
https://jakearchibald.github.io/svgomg/https://jakearchibald.github.io/svgomg/https://jakearchibald.github.io/svgomg/
Finding SVGs
simpleicons.org flaticon.com
https://simpleicons.org/https://simpleicons.org/http://www.flaticon.com/http://www.flaticon.com/https://simpleicons.org/https://simpleicons.org/http://www.flaticon.com/http://www.flaticon.com/
thenounproject.com freepik.com
https://thenounproject.com/https://thenounproject.com/http://www.freepik.com/http://www.freepik.com/https://thenounproject.com/https://thenounproject.com/http://www.freepik.com/http://www.freepik.com/
themify.me/themify-icons brandsoftheworld.com
http://themify.me/themify-iconshttp://themify.me/themify-iconshttps://www.brandsoftheworld.com/https://www.brandsoftheworld.com/http://themify.me/themify-iconshttp://themify.me/themify-iconshttps://www.brandsoftheworld.com/https://www.brandsoftheworld.com/
Thank You
@cmyee
wearecircus.ca/wcott17
https://chrisyee.ca/https://twitter.com/cmyeehttps://twitter.com/cmyeehttps://wearecircus.ca/wcott17https://wearecircus.ca/wcott17