fantastic svgs - chris yee · 2018. 7. 5. · 1. what are svgs? 2. benefits of using svgs 3....
TRANSCRIPT
-
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