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