Using SVG in a WordPress Context

Basic overview of SVG! Some pro's and con's! Some WordPress considerations.

Transcript

1. SVG brian meyer brian@monopine.com and some WordPress
2. SVG facebook relationship status: it’s complicated me +
3. Modern Browser XML Vector Graphics SVG Simple SVG implementation SVG
4. Javascript Su ering Pain SVG SVG with all the bells and whistles SVG
5. SVG Why bother? - Looks good on retina - Small file sizes (vs. raster) - SVG's are stylable (but it can be tricky) - SVG’s are animatable (even more tricky!) - More consistancy than icon fonts
6. SVG Thar be Dragons! - There are at least 10 di erent methods to use SVG in HTML/CSS. - Each have there idiosyncrasies, pro/cons - SVG's are fraught with caveats - Inconsistent and downright weird
7. SVG When to use SVG - Icons - Backgrounds - Logos
8. SVG How to use an SVG in HTML/CSS Option 1: CSS Backgrounds .my-div { background: url(’my-img.svg’); } Pros - Responsive (media queries) - Don’t have to deal with SVG code in template files Cons - Can’t control styling “directly” as they’re treated as image files - Lots of SVG’s means lots of HTTP requests - Limited hover e ects (you’re just changing the image)
9. SVG How to use an SVG in HTML/CSS Option 2: SVG using<img> <img src=”my-svg.svg” /> Pros - Straight forward to add Cons - Least “feature rich” option
10. SVG How to use an SVG in HTML/CSS Option 3: Inline SVG Pros - SVG code is right there! (in the DOM) - Fully stylable through CSS - Fully animatable through CSS - Renders on page load (no waiting on external requests) Cons - Turns template files in to a mess - A pain to maintain - No caching <svg ....> <rect id=”rect-big” x="11.272" y="68.902" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 77.0389 113.4108)" fill="#124663" width="7.518" height="7.518"/> <polygon id=”poly-sml” fill="#124663" points="0,67.345 5.316,72.661 0,77.977 "/> .... </svg>
11. SVG How to use an SVG in HTML/CSS Option 4: Inline SVG with <use> tag (defs in page) <svg><use xlink:href="#icon-home"></use></svg> <svg display="none" version="1.1"....> <defs> <symbol id="icon-home" viewBox="0 0 1024 1024"> <title>home</title> <path class="path1" d="M1024 590.444l-512-397.4v-256...> </symbol> <symbol id="icon-arrow" viewBox="0 0 20 37"> <title>arrow</title> <path class="path1" d="M1024 590.444l-512-397.4v-256...> </symbol> </defs> </svg>
12. SVG How to use an SVG in HTML/CSS Option 4: Inline SVG with <use> tag (defs in page) Pros - You can style sub-elements! - Clean template files - Maintainable through a <defs> file <?php include ‘my-defs.svg’; ?> - Stylable sub-elements Cons - Lacks caching of next method (external defs file) - Adds SVG bulk to template files, but better than previous inline method - Sub-element styling doesn’t support changes via hover - Can’t fire hover or animation events on SVG sub-elements
13. SVG How to use an SVG in HTML/CSS Option 5: Inline SVG with <use> tag (defs in seperate file) Pros - Clean markup - You get your svg defs file cached! - Maintainable through a <defs> file Cons - Crome can’t style sub-elements (shadow dom). Safari, FF - OK. - Limited animations because you don’t have sub-element access - Doesn’t work in any IE (but you’re probably already using fallbacks) - Defs file has to be on the same domain (annoying with JSFiddle, Codepen assets) <svg><use xlink:href="my-defs.svg#home-icon"></use></svg>
14. SVG SVG’s in WP Admin Does WordPress use SVG’s? Yes, view source on about.php! The WordPress logo on the login / about pages: wp-admin/images/wordpress-logo.svg
15. SVG User supplied SVGs in ‘content’ Once you get your SVG’s up- loaded to the Media Manager, they have blank icons. Problems that need solvin’ Media Library doesn’t support uploading SVG’s, but it can (next slide) 1 2 Those icons don’t show up in the Content Editor because of a width / height attribute of 1 3 4 Uhm.. This is awkward but.. SVG’s have major security risks so core is/seems/maybe is *re- luctant to embrace user sup- plied SVG’s * based on some comments as seen in trac threads: https://core.trac.wordpress.org/ticket/26256
16. SVG User supplied SVGs in ‘content’ There are probably other additional problems I’m un- aware of! (just being honest!) Problems that need solvin’ They don’t show up in your ‘featured image’ meta box which is a great possible use for SVG’s 5 6
17. SVG Security? By default (4.1 at time of writing) .SVG is not on the MIME/- TYPE Whitelist. Which means it cannot be uploaded through the Media Library. Workarounds? (this can be bad - *security* - see next slide) function add_svg( $mime ) { $mime['svg'] = 'image/svg+xml'; return $mime; } add_filter( 'upload_mimes', 'add_svg' );
18. SVG Security? <svg version="1.1" xm- lns="http://ww- w.w3.org/2000/svg" xmlns:x- link="http://ww- w.w3.org/1999/xlink" width="52" height="32" view- Box="0 0 52 32"> <script> alert('We have injected javascript! WAT'); </script> <path fill="#444444" d="M20.183 19.571"...</path> In short, you can insert javascript in to SVG’s. This... is a problem Think about your user permissions specific to your project!
19. SVG Exporting SVG’s - Illustrator makes things bloaty (clean up your paths) • Search the webz for appropriate export settings • Object -> Paths -> Simplify • Online compression tools • Command J in SublimeText is your co-pilot - Sketch for OS X is becoming popular - Inkscape is an option. Free and cross platform - Use "Copy" in Illustrator! (Chris Coyier super trick) - IcoMoon is great for creating SVG template files, “sprites”
20. SVG Browser Fallbacks A simple concept: Show a png if browser doesn’t support svg Recommendation depends on your specefic situation: - How are we loading SVGs? (inline, CSS background, etc) - What does browser support look like? - What does our IE demographic look like? - Dependency issues / requirements? Modrnzr / jQuery Tools: - Grumpicon (CSS Background) - SVG for Everybody (Polyfills and PNG’s for IE users)
21. SVG Additional Resources Todd Parker’s seminal SVG primer (google this horrible URL) https://docs.google.com/presentation/d/1PMX-uhIwfS-n2kQozEJDf2cmFyQyrRfLqwkqX99ojbo/pub?start=true&loop=false&delayms=3000&slide=id.p - Chris Coyier’s SVG Primer https://css-tricks.com/using-svg/ Chris Coyiers SVG Talk from BlendConf https://css-tricks.com/video-screencasts/137-svg-is-for-everybody/ SVG Selectable Text https://css-tricks.com/svg-text-typographic-designs/ Understanding Viewbox and Viewport http://jonibologna.com/svg-viewbox-and-viewport/ - Grumpicon / Grunticon (Uses CSS background images and generates PNG fallbacks) http://www.grumpicon.com IcoMoon (Great for automatically creating a defs file + demo) https://icomoon.io