Optimizing SVG6:58 with Guil Hernandez
Optimization is an important step before displaying SVG on the web. In this video, you'll learn one of the quickest ways to reduce the size of your SVGs, using a popular optimization tool called SVGO.
[MUSIC] 0:00 Hey, everyone. 0:03 I'm Guil, a front end development teacher here at Treehouse. 0:05 In this workshop I'll teach you ways to improve how you work with SVG, or 0:08 Scalable Vector Graphics. 0:12 You're gonna learn useful tools and techniques for optimizing, organizing, and 0:14 structuring your SVG files. 0:18 And I'll show you how to quickly create an SVG icon system using a bill 0:20 tool like Bolt. 0:23 So, let's get started. 0:25 Whether you're embedding SVG in your HTML including it as a CSS background image or 0:27 using it directly in an image tag. 0:32 Optimization is an important step before displaying as SVG on the web. 0:34 Producing the smallest possible file size makes your sites faster for users. 0:39 It also may save your company money by lowering the cost of bandwidth and 0:43 maintenance. 0:47 So in this video, I'll show you one of the quickest ways to reduce the size of your 0:48 SVGs using a popular SVG optimization tool called SVGO. 0:52 And you can download the starter files for 0:57 this workshop in the download section of this video. 0:59 SVGO or SVG Optimizer is a node based command line tool. 1:03 So you'll need to have Nodejs and 1:07 NPM installed on your computer before you begin using it. 1:08 Check the teachers notes for resources on installing those and 1:11 later also cover an SVGO web app that does not require node. 1:15 Some vector drawing tools and 1:20 SVG editors leave behind lots of extra information when exporting an SVG file. 1:21 For example lets say you received the file trucked that as SVG from a designer or 1:27 you just exported the SVG file using an editor like Adobe Illustrator. 1:32 Well, when you first open up the file it's a bit cluttered. 1:37 You see information like comments, metadata, meaningless IDs, 1:40 even unnecessary tags and attributes. 1:44 Well, this extra data can be removed without affecting how the svg renders. 1:47 Now in a small file like this you could remove the extra code manually. 1:53 But if you're dealing with new SVG files 1:58 manually deleting code is a time consuming and error prone process. 2:01 So SVGO is a valuable time saving tool that's easy to integrate into you and 2:06 your teams as SVG workflow. 2:12 So first, to install the SVGO command line tool globally open up your terminal or 2:14 consul and run the command npn install -g svgo. 2:22 You can view the list of commands and options available for 2:30 SVGO in the how to use section of the repository. 2:34 Currently the file truck.svg weighs in at about four kilobytes. 2:38 So to trim the file size I'll navigate to my project directory with the command cd 2:45 graphics and run the file through SVGO with the command svgo 2:51 truck.svg the name of the file. 2:57 And right away in the command line output, you'll see that the file 3:02 went from 3.599 kilbytes to 2.347 kilobytes. 3:06 So svgo reduced the file size by 34.8%. 3:11 So by default SVGO minifies the SVG markup 3:17 to keep the file size as small as possible. 3:21 So to bring back the line breaks and 3:24 spaces in the file you can pass the pretty option to the SVGO command. 3:26 So back in my terminal I'll type svgo dash, 3:32 dash pretty followed by the name of the file truck.svg. 3:37 Now this bumps the file size up from 2.347 to 2.466 kilobytes not a big change. 3:45 But now my code is nicely indented. 3:54 And easier to read. 3:57 Now, you can always save out a minified version of truck.svg like this. 4:01 This preserves the original SVG creates a new file called 4:15 truck.min.svg containing the minified SVG you'd use in production. 4:20 And what's even more amazing and 4:28 useful about as few SVGO is that it can convert an SVG to a data URI. 4:29 So for instance to convert truck.min to a base 64 data URI, 4:35 run the command using the data URI option like this. 4:41 And great so now I have a base 64 data URI. 4:57 I can use in my image tags or CSS background images. 5:03 Awesome. 5:06 So now say you have a folder full of SVG's. 5:09 For example the icons folder 5:12 contains several SVG files that need to be optimized. 5:15 Well don't worry you don't have to manually type each filename 5:20 in the svgo command. 5:22 Simply specify the folder option and the path to the folder. 5:24 And now each icon in the folder is instantly optimized and ready for use. 5:32 So I've just showed you the most common and 5:44 useful features of the SVGO command line tool. 5:47 But be sure to read the SVGO documentation to learn about some of the other 5:50 options and arguments you can pass to the SVGO command. 5:54 Finally if a node based command line tool is it for 6:00 you, SVGO also comes in the form of an in browser app. 6:02 Jake Archibald, a developer at Google created a delightful web app for 6:07 S-video called SVGOMG. 6:11 So to optimize an svg simply drag your file into the app 6:15 then it instantly trims all the excess code and minimizes your file. 6:20 And the best part is that you can preview the results to see if the changes affected 6:28 your graphic. 6:33 Over in the right panel, you can further customize your optimization. 6:35 For example, prettify the code, adjust the decimal position, 6:39 even other features which are mostly enabled by default. 6:44 And you can view your file savings at the bottom of the preview. 6:49 And when you're happy with optimization, 6:52 click the download button and you're all set. 6:54
You need to sign up for Treehouse in order to download course files.Sign up