 I'd like to introduce Sarah Seymark. She works for Automatic, making themes, and she is going to talk to us today all about how she learned to stop using iConfense and love SVG. Sarah, quick mic adjustment, connect to Wi-Fi or something in the meantime. We're good. Give her a round of applause. Welcome, Sarah, to the stage. Hope you enjoy her talk. I'm Sarah, and I love to travel. I've been to over 50 different countries at this point, most of them I visited by myself. Even when you're not alone, travel can be an incredibly vulnerable experience. You're often jet lagged. You're usually lost in unfamiliar surroundings. You don't know anyone. You don't know the rules. You don't know the culture. And on top of that, most places don't speak English. There are lots of different languages. There are lots of different scripts, and it's impossible to learn them all. The end result is that a lot of essential information is missing when you need it the most. Lucky for me, most airports are really good about using English, even when it's not the first language of the country the airport is in. But I always wonder, what about people who don't speak English? Or people for whom English is the second, third, or fourth language? Travel can be challenging enough already. It's extra hard when the information around you isn't parsable. Fortunately, places of transit have ways to make information more accessible to everyone. This, for example, is a pretty vital piece of information, although this might be a bit more straightforward. Symbols are a universal way of communicating that transcends language. Human beings have been using symbols to communicate for thousands of years. Before we had alphabetic writing systems, we used symbols to communicate. The earliest written languages comprise of pictographic representations of physical objects. So we have Egyptian hieroglyphs and Sumerian cuneiforms. The Mayans and the Almecs both had pictographic writing systems. And even as we transitioned to more alphabetic languages, symbols were still a part. So you have Chinese, which is one of the oldest continually used writing systems still in use. And it's generally logographic, but it still has characters that are quite pictographic in nature. Writing icons to communicate, though, isn't just a relic of the past. During the Great Depression in America, the homeless population increased exponentially. And they developed this called the hobo code. These were temporary messages written in charcoal on utility poles on rocks on the sides of buildings in order to indicate safe places or unsafe places. This nonverbal communication made a vulnerable experience safer. If we fast forward to the 60s, Mexico City was in the middle of developing their rather complicated metro system, but they had a unique problem that a high percentage of the population was illiterate. In the 60s, 38% was completely illiterate, and very few people were educated beyond the fifth grade. So they used colors and icons to draw out the system so that you could find your way without needing to understand the words. These icons are still used today, even though literacy rates are now high in the city. You may not be designing wayfinding in an airport or trying to help illiterates understand how to navigate a metro system, but website navigation is kind of just like wayfinding online. That's how people find their way to the information that they need to access. You're helping users find their way. This is the Israel Railways website. I don't speak Hebrew. It runs right to left, which confuses my brain. This sort of looks like squiggly boxes to me. But because they're using icons, I can sort of understand where to go to find vital information. So I know where to go to find a person to talk to. I know where to go to find schedules. And I'm fairly certain I could find where to go to buy tickets from here. So icons can improve that. But using them alone isn't necessarily a great choice, because then we have things like this. If you've ever tried to do laundry, you may have seen one or any of these symbols. I don't know what any of these mean. I think one's an iron. But they're pretty unclear. Using an icon alone can often lead to unclear meaning. And the web is full of laundry icons like these. This one you're probably familiar with. You may love it or hate it. You've probably had an argument with somebody about it at some point. I think that users are starting to get used to the hamburger menu. But you know what makes this clear? Combined with text, icons are a great way to communicate important information. It basically gives your audience an additional way to understand your message and allows them to parse it in a way that makes sense and is most accessible to them. When used intelligently, icons can improve your communication. And they give emphasis to important information. As a result, we use them an awful lot on websites. The trouble is that can often mean a lot of images. This is a screenshot of my WordPress admin. There are 38 icons on that screen alone. If you scroll down, there's actually more. If those were all unique images, that would be 38 plus HTTP requests just for those images. And that can really slow down your performance and lead to a bad experience. So if you want to use icons, we need a way to combine them into a single file. Does anyone here remember CSS image sprites? That is actually fewer than I would have thought. So they originated from video games. And they looked something like this. This is actually stolen from Flickers' website. They still use these. So basically, you put all of your images in one big flat PNG file. And then you create sort of window with a box. So you use a span or a pseudo element. And you give it a height and a width. And then it acts as a window over this giant image. And it shows selectively different icons at different times. It's pretty fiddly. You have to position the image using a negative background position in CSS. And you can't access anything with CSS, so you can't change the colors. If I wanted to have a Twitter icon that was white but turned blue when I hovered over it, I would actually need to put two different Twitter icons in my Big Master Sprite. And that Flicker image has at least three Twitter icons. So as responsive design and high-res displays became more commonplace, this method became harder and harder to work with. So we moved on. Icon fonts solved a lot of these problems. They were actually vectors, which meant you could scale the image without getting all jagged or losing quality. You could also style them in CSS. So you could easily change a color on hover or any other effects like that. This is great for a while. And it did solve a lot of those problems that we had before. The thing is, icon fonts are still a hack. Fonts are designed to communicate text, not images. And browsers treat them as such. This causes a number of different problems. Best practices on the web change quickly. And icon fonts I don't think are the best option anymore. I think SVG is. SVG stands for scalable vector graphic. It's basically a math-based graphic that you can reliably embed in a website. And it looks something like this. If this looks familiar, that's because SVG is a derivative of XML. HTML also is. So SVG in a lot of respects looks quite similar to what you're used to with HTML. This means that you can access it via code. If you've ever tried to do that with an EPS or an InDesign document, it probably wouldn't have worked as well. So in order to make this map image, for instance, I went to a website that allows you to enter all of the countries you've ever visited in check boxes. And then it will allow you to download that map in colors as an SVG file. A download of the SVG. I opened it in Illustrator and I removed a couple of stray interface elements that weren't relevant. But then I wanted to change the colors of the countries I hadn't been to, which is actually quite a lot, from this gray color to a blue color. I looked at doing this in Illustrator. And in order to do it, I would have had to have selected 150 odd different individual elements one by one and change the colors. So instead of what I did, because this is an SVG, I just opened it in my code editor, changed one line of code, and I had blue countries. I ironically, after that, I had to convert it to PDF because Keynote hates SVGs. But I could have put it on a website. This is sort of one of the most magical things about SVG. You can edit and manipulate it in two different ways, depending on what's easier or what you're most comfortable with, via code or via a graphics program. InDesign doesn't have this kind of find and replace that a code editor does. And being able to access your image in two different ways means you can work with it more effectively. So when I first learned about SVGs, I was really excited and I thought they seemed great. And I noticed that it really seems like a zeitgeist thing. Everyone's switching, GitHub just switched. But I looked into it a little bit and it sort of seemed like a lot of work. And I wasn't initially sure if it would be worth it or if it was time. I think there are lots of reasons to make the switch. And here are my top five. Semantically, icon fonts aren't really that great. You're usually injecting an icon via a pseudo element on an empty span. Depending on how you look at that, it either has no semantics or bad semantics. With SVG, you don't have that problem. SVG says it's an image and it acts like an image. If you don't care about semantics, though, you should care about accessibility. Icon fonts can be accessible, but it requires a bit more work to do that. Inline SVG is pretty good for accessibility straight out of the box. And when SVG 2.0 comes around, it's still in spec right now. It's supposed to be even better. Screen readers can be unpredictable in the way they deal with reading out icon fonts. The hidden spans can confuse them. Sometimes they'll just say unpronounceable instead of saying anything. Sometimes it'll be black favorite star. With an SVG, you just tell the screen reader exactly what to say. There's a title and a description attribute and you just fill that in and that's what the screen reader reads out. Super straightforward. There are also better for some dyslexic users. Some people will use a browser extension to change the typeface to one that is more comfortable to read. And the browsers can't differentiate between a font that is used for text and a font that's used for symbols. So you just get all these empty boxes and your meaning disappears. SVG looks better. Because the browser thinks it's an image and it treats it like an image, it doesn't do any weird faunty stuff to it. So you won't have your font rendering in a slightly stronger weight in Firefox than it does in other browsers. There's no anti-aliasing. You can position it in a less fiddly way because you don't have to worry about line height or letter spacing or kerning or things like that. And SVG is just a little box and there you go. You can also control it better with CSS. So you can change the color. But you can also add a stroke and change the width of that stroke. You can select different elements individually and color them differently. And you can animate them. Icon fonts are also fairly prone to failure. There are lots of weird bugs with cross origin requests, issues where all the fonts get unloaded and revert to default. There are caching issues. Some users, particularly on mobiles, will block font face entirely. This is one of my favorite icon font bugs. At some point, Etsy sellers found themselves raided four into horse stars. This happens because icons are often mapped to the private use area of Unicode. And this is where emoji live. So sometimes this happens. It's kind of cute here and it fits for Etsy. It can manifest a bit more aggressively. For ESPN, this works, right? Punchy fist icon kind of. But like for a funeral site, this would be maybe more of a PR problem. The most common scenario you'll come across is this. You've probably seen it before. And it just looks sad. Reminds me of this. Because SVG isn't a hack, it has better fullbacks and it has fullback behavior that you can control better. Finally, browser support for SVG has been improving and will continue to improve. At this point, the browser support for SVG looks something like this. It's actually pretty green. And support for icon fonts isn't as good as you'd think and it's not getting any better. Some versions of Windows Phone don't support font face. And there's a browser called Opera Mini that's popular in Africa, the Middle East, India, other places where people are often on restricted data plans and that has no support whatsoever for font face. If you don't think Opera Mini is important or relevant, it has 4.7% of global browser usage. IE 8 in comparison has 0.84. That 4.73 is more than 8, IE 8, 9 and 10 put together. So if you care what your website looks in IE 10, you should also care about Opera Mini. So I haven't used an icon font yet this year. I'm still kind of new to SVG. But it's actually been pretty easy. So I recommend switching. And if you do, here are a few things to keep in mind. Unlike icon fonts, there are a few different ways of implementing SVG icons. And it really depends on what you need. I'm going to try to cover three of the most popular options here. There are lots more you can use. React components, you can do all kinds of different things. And these may be out of date in a year from now. The data URI method is quite popular, but I'm not particularly crazy about it. It basically inlines your icons in a style sheet using data URIs. Data URIs are basically this gobbledygook number, which is an image encoded as a base 64 string. They look something like this. This is actually shortened because it didn't fit on my screen. So you can't generate this manually. You need to use grunt icon or grump icon to generate this. And basically your CSS file becomes a sprite. It looks and works a lot like old fashioned CSS sprites. To use it, you just use an empty span like this. I don't like this for a few different reasons. You can't style it with CSS because it's an SVG embedded as a background image. You can only access SVG animations, not CSS animations. You have the same sort of semantic accessibility problems of that empty span. But this can be useful in certain contexts, like a social menu. It's also easier to access because it's more closely aligned to the way a lot of us are used to working with icons in the context for the website. The fragment identifier method uses SVG fragment identifiers and views to show a window on a particular icon. Again, it's really similar to the CSS sprite method. Basically, you have this big SVG and it holds all of your icons and all of the elements within your icon. And then you use the native view box method to crop to a particular icon based on the SVG coordinate system. So each view down here is a window that shows a particular icon and references it via a fragment identifier. To use it on the front end, you would just use this little bit of code using an image tag. This is pretty good because it's a bit more visual. You can open that SVG file in Illustrator and see all the icons. But I find the SVG elements and the component elements of that SVG less accessible via CSS. So I like the symbol method. It gives you more direct access to the elements within your SVG. So your SVG would look something like this. Again, all your icons are inside it. You wrap each icon in a symbol. The symbol defines the element without rendering it. So if you opened it in Illustrator, you wouldn't see anything. Once the symbol is defined, though, you can reuse it anywhere else in your document. So you just put this SVG in line in the HTML document, and then you use this little bit of SVG code to show your icons elsewhere on the page. You can leverage browser caching by referencing the SVG elements externally. There are a few difference between those different methods, but they're a bit persnickety. Both work more or less the same way. Using this method, you can style individual elements via the shadow DOM, which is a bit tricky, but quite possible. Animations work. It's easy to style things via CSS. And the browser support is quite good. You can use a plug-in called SVG for everybody to make sure that you get good IE support, and it works pretty well. So I like this method. But SVG stuff changes pretty fast, so that might be irrelevant a year from now. So I use a modular bit of code, one PHP file, that I drop into all my themes. This does a few things. Packages, scripts like SVG for everybody injects references, implements a social menu, and it means in order to show an icon, I just use a simple PHP function. If I change my mind later and want to use a different method to show SVGs, all I need to do is change that one piece of PHP code. I also use short codes. This is good for custom client work, because it makes the icon accessible to users on the front end. But it could be considered plug-in territory in a .org theme review context, so I would be wary of using it there. This code, by the way, is available at GitHub. It's still a work in progress. But if you want to take it and use it and adapt it for your own uses, feel free. It's a good habit to get into using task runners if you aren't currently. Gulp and grunt are the most popular options. They just run in the background to do some automatic tasks. I use SVG min and cheerio to clean up the SVG sources, and then use SVG store to generate the sprite. Again, code available on GitHub. So this is my process now. I have a template. I export my artboards, save them to a folder, and it builds my sprite out, and I wait a minute to refresh the page because it takes forever, and my icons are there. This means it's easier to fiddle with my icons. It's easier to add new ones. It's easier to change my mind. So everybody wins. The biggest challenge when I was working on implementing this was dealing with social menus. I haven't met a client who doesn't want a social menu, and most modern themes now need social menus. Usually, you implement a social menu by using generated content in CSS. But this doesn't work in SVG unless you're using the data URI method that I mentioned earlier. So I figured out a way of doing it. You can filter WP nav menu, use a regex function, and look for supported networks in the links. So if I see this link, the function will see that there's a social menu, figure out that I have a Twitter icon, and replace it with this, hide the text, and the icon will appear. This means the code all stays in one place. It's more semantic, and any menu, so long as it's styled properly, can be used as a social menu. This means you have more user choice. That's been my journey into SVG so far. As I mentioned, I haven't used an icon font yet this year, and I'm actually really enjoying it. It's made my process better. Icons are a great way to communicate more effectively. SVG is a way of making those icons more accessible to users, and better for the future. They're also easier to work with as a developer. So you should start using them today. Thank you. Thank you, Sarah. Again, another great and really informative talk on the topic of using SVG instead of icon fonts. We've learned a lot here this morning. Does anyone have any questions about what Sarah has just spoken about? If you do, put your hand up nice and high so we can see it. The mic runners will come to you to bring you a mic so we can record your question. Let's continue the discussion a little bit if we can. Hi. I wonder if you've noticed any difference in performance between switching from icon fonts to SVG? The short answer is no. There's no measurable performance difference. Is there a specific method that you use that is better for performance than others? Sorry? Which methods of using SVG in your site would be better for performance than others? I'm not certain about that. The method that I'm using right now, I use an external caching method with the symbol method. That does help in terms of because the browser caches the element, the SVG sprite. But I haven't noticed significant performance differences between the methods, honestly. Thank you. I just say thanks for your talk. I think for me personally I've known that SVG icons are much more flexible and better than font icons for those kind of things. I think for me it was just more about trying to get my head around the adjustment to my workflow. I think I've learned a lot about how you've talked about that today. I just wanted to point out that if, like me, anyone in the audience is trying to figure out their ideal workflow, only literally about a couple of days ago I noticed that there was an article published on CSS Tricks talking about how to use SVG icons with an icon web app called IcoMoon. That's what I've been using for font icons. If anyone else is using that or they want an easy way in, then there's an article published on CSS Tricks to tackle that. You can export directly from IcoMoon either to Icon fonts or as an SVG. That's a really easy way to access it. I really don't like that method because, again, it's really manual. I like to actually go in and change my icons so that they're down one pixel or up one pixel. I was going to say that there is a premium kind of plan on IcoMoon where you can get a live hotlink. If you have prototyping different icons, you can kind of move things up and down. It'll just automatically upload the latest version. That's not to be used in production. It's just for playing around with things. Cool. There's lots of different ways to generate sprites. Don't let that be the thing that scares you off a lot of SVG. We had a question back and then there's another at the front here, Matt, on my left and your right. Hi. Hello. Thanks for your talk. Sorry, over here. Hi. I just wanted to ask, do you have a preferred method for fallbacks for browsers that don't support SVG? To be 100% honest, I have not experimented with fallbacks just yet. In my testing, the methods I have been using have been working in older versions of SVG, of IE. Generally speaking, I think what I'd like to set up is a PNG fallback and, again, using the task runner and using the gulp script that I have already used to generate a PNG from the SVG that I already have saved into a folder and then basically, yeah, you would just call that PNG. But that's on my to-do list. Okay. Cool. Thank you. So ask me in a month. Sorry. Just another thing to go back to the whole spriting thing and the caching thing. I've never used SVG for everybody, so I might be talking total rubbish, sorry. But I was talking a few months ago with a developer from Brainly and they couldn't use SVG for everybody for some reason. I don't know. I think because in Opera Mini or something, they can't use the X link, external HF or something. So it, yeah, it tends to be a bit fiddly. So there's two methods, right? There's that internal method or the external method and the internal method is better supported out of the box by older versions of IE. So if you're looking to support older versions of IE, that will be the way to go. I've had good experience with SVG for everybody, which generally will help you polyfill using the external method for IE. I want to say 8 plus, but I don't know exactly. I think the best approach is to figure out which browsers you need to support and then that will determine which method you use. The nice thing is there are lots of different methods and lots of different tools. So it's really about choosing the one that's most appropriate to your needs. Yeah, I think what they've done is, which might be, I don't know if it's a great example, but what they've done I thought was very clever as well because they couldn't use the SVG for everybody. So what they decided to do is actually they created basically a JS file that appends an SVG element, all of the SVGs, and actually that file was cacheable and it embeds it in the HTML and then you just reference it through symbols. So actually that solved them. I thought that was clever. I never used it, but that's one method I guess. It sounds neat. I'd love to see it. It's on Brainly, I think. It's on Sorry? Brainly. They do some education stuff, but on their source code you can see the, it's literally jQuery script that appends all the SVG elements into the HTML and because it's an external file, they cache it so they don't have to load it obviously all the time and they just use it as symbols whenever they need and they can style it inside their CSS because it's embedded in the HTML. Something like that. I don't know. Lots of different methods. Thank you very much. It's amazing. Cool. I think there's a question in the middle over there. There's one at the front and there's another one at the back afterwards. Is it me? Okay. Just two questions. For generating, I'm web developers, but I've been in contact a lot with the web designer in the company and we're just trying to speed up the workflow and sometimes just naming things are, you know, exporting and all this kind of stuff slows things down and one thing I noticed in Illustrator, I'm not too sure if this is correct, but if you have ID tags, I hadn't seen sprites used like that and that's very useful to have all of them just in one file, but you can't see those IDs easily in Illustrator if I understand correctly. Can you? Sorry, you can't see those IDs? So when you named all the different kind of sets in the SVG graphic and you're able to call them like icons, hash, skull, you can't, can you see those names in Illustrator? Do you know? I usually don't open the sprites themselves in Illustrator. So I tend to use gulp to generate my sprites and then I generally never look at it or open it. I don't think those would be accessible in Illustrator, but I could be wrong. Generally speaking, if you're using the symbol method, that won't be, you won't actually see them in Illustrator anyway because symbol defines it but doesn't show it. It defines it for reuse. So you're generating your images individually in files? I would recommend as a workflow to try not to work with the final sprites, to let a task runner generate that sprite for you from the sources that you already feed it. There's, ideally you shouldn't need to fiddle with the final sprite at all. You should just need to work with the sources and then you don't have to worry about a lot of that stuff. It's generated for you. And do you use, prefer Sketch or Destiny? I have been trying to switch all my workflow over to Sketch. In my experience, Illustrator actually outputs better SVGs right now. Sketch can output a lot of cruft. There's a weird command you can run in your terminal to prevent some of it, but I still find it pretty messy. It really is about what you're most comfortable with though. And again, if you use an automated task runner, you can use things like SVG Min or Cheerio to basically clean up any noisy bits that were left behind by your graphics editor. Cool. And then just a quick second question is, just with putting icons in fields, in forms. I'm using gravity forms on WordPress and all I want is little, nice little user icons and for the moment I'm using font icons but they're problematic on IE. And if you worked with that with SVG, putting them in fields. Sorry, I missed the end point. Sorry, just putting icons in the actual fields of forms. So you might have like a username, just a word username and a little icon for the person but it's in the field rather than, so font icons work for that. Sure. I'm just wondering if there's, yeah, if you've come across that with your method. So again, you'd need to look at that and determine which method would be best for you. I mean, you could just take an SVG and absolutely position it within the inside of your input box and that would work just as well. So long as the input box is still accessible and stuff. You can also use the data URI method that I mentioned where it basically inlines the SVG inside your CSS and then you can just position it as a background element. Thanks. Hi. Yeah, okay. Hi. Thank you for a great presentation. I really like the design of the slides, by the way. And the question is Jetpack recently released a feature for themes that adds the support for social menus. So the question is, did you have a chance to try yourself and what method does that feature use? It's an icon font or a SVG or you can choose it yourself. So that social menus feature is using, it's using genericons, which is an icon font. So that's certainly one way of going about it. I can't necessarily say if that would change or not at some point. But you can definitely write your own things outside of that. And it may well be that in some time, the icon font way of doing that becomes deprecated and favor of SVG. I suspect that will happen at a certain point for sort of everybody, not just Jetpack specifically. Yeah, I know because the idea of not fighting the line height issue is just amazing. Thanks. A few minutes left. There's one question at the back. Let's see how we go for time. Thanks for speaking. We've been trying some SVG icons over the font versions. And at the moment, we're just including them straight in line, opposed to having the symbol method. Am I right in thinking that when you're generating the file with goal footprint, it's effectively creating a massive block of code, say 50 icons that you've output. And then it's putting it in line at the bottom of every page. And then you're referencing that symbol in wherever you want it to appear. If that's the case, why are you doing that over just including it in line in that if you're loading it every time on each page, you're obviously loading the whole icon set each time so you're not really caching because you're not referencing a separate file. So if you're using only three icons on that page, which not just include those three icons kind of just straight in line opposed to everything at the bottom of the reference net. So I don't know offhand why you why you wouldn't necessarily I think it's helpful to have an icon system. I tend to use the external method rather than internally embedding the the full sprite into each HTML page. What I do is I just reference the sprite externally. So icons.svg and then the hashtag and fragment identifier. That actually does leverage browser caching. Sometimes people don't like to use that method because it does have more restricted IE support and you need to deal with more polyfilling type stuff. But I prefer the external method because then you do get that information cached. How do you if it's an external method I'm assuming that the SVGs are kept in a separate file that's not part of the page and then you'll reference in it as if like you'd include a CSS file. Well it's basically the same SVG sprite. So the SVG sprite looks the exact same. The only thing is you're not actually injecting it into your HTML document. What you're doing is you're just saving it somewhere else and then your use xlink href instead of saying use this is really poor to describe like this but instead of use xlink href fragment identifier skull icon you would have use xlink href icons.svg skull icon. Okay and that becomes fully accessible so you can manipulate it with CSS then as well. Yes you need to use the shadow DOM which is a mystery thing I'm still learning about but yes you can. Okay cool thank you. I think one of our microtons has a question really quickly before lunchtime one question from Matt and then I'll tell you where to all go to get your food. Thanks I just had an observation in terms of social menu as well that WordPress doesn't have SVG support built into the media uploader and I've just over the last couple of days developed a method to if you add SVG the SVG support plugin in then the media upload can take and show SVGs and then we created an ACF repeater field to take in to take SVGs and the link and then we can safely output those using a small function and then those SVGs are output in line and you can target them with CSS so it's an alternative method to come up with the same sort of thing but it seems to be working quite well it's actually client friendly way to allow them to choose their own icons. Yeah the lack of ability to upload an SVG kind of bums me out that sounds like a core ticket somebody should chase up. It's a great plugin I'll tweet it. Great stuff we're at our end of track a time for the morning. First of all give your thanks to Sarah for her brilliant talk.