Join Morten Rand-Hendriksen for an in-depth discussion in this video Optimize SVG with SVGOMG and SVGO, part of Web Icons with SVG.
- View Offline
- [Voiceover] One of the many reasons for using SVGs…is to improve the performance of web projects.…SVGs tend to be smaller files than graphics,…and the browser can render them quickly…in any size you want.…However, when you create custom SVGs,…the files generated by Adobe Illustrator…or Sketch or whatever tool you're using…are not well optimized.…That means you're potentially wasting valuable bandwidth…and time by using SVG files that are way more complex…than they need to be.…If you go to the exercise files for this movie,…02_03, you will find the SVG version…of the graphic I created in the previous movie,…and you'll see that this is a fairly well laid out…web document, it's quite easy to read for us humans,…but it's also really, really verbose and long,…and I'm sure this can be somehow optimized…to be shorter and smaller.…
To fix this issue, we can optimize SVGs…using a variety of different tools.…My two favorites are the command line tool SVGO…and its browser companion SVGOMG,…which I'm said to say stands for SVGO'S Missing Gui.…
SVG is an XML-based method for instructing the browser to draw scalable vector graphics based on defined shapes and coordinates. The challenge with SVGs is they are not like other graphic files: Rather than a grid of pixels, they are code instructions interpreted by the browser on the fly. This poses some unique challenges and unique opportunities when it comes to implementation. In this course, you'll learn various methods to deploy SVG icons in webpages, each with its own use cases, benefits, and drawbacks. Morten Rand-Hendriksen shows how to insert individual SVG images, add SVGs as inline elements and SVG sprites via the command line, and automate SVGs with Grunticon. Plus, get tips on making your graphics backward-compatible and accessible, and using SVG icons in WordPress.
- SVG vs. icon fonts
- Getting existing SVG icons
- Creating your own icons
- Adding individual SVG icons to webpages
- Adding SVG as an inline element or background image
- Using external and inline SVG sprites
- Automating SVG generation with Grunticon
- Using SVG icons in WordPress