Optimize SVG images for the Web

Cole Turner
Cole Turner
3 min read
Cole Turner
Optimize SVG images for the Web
Blog
 
LIKE
 
LOVE
 
WOW
 
LOL

Scalable Vector Graphics (SVG) images are the bee's knees, that cat's meow. For those unfamiliar with those idioms, what I mean to say is that I love to use SVG images whenever possible.

There are a few reasons why SVGs are great:

  • They can be scaled up and down without distortion.
  • Vector graphics are usually smaller in file size.
  • The ability to use animations and transitions on layers.

As you develop your web application, the SVG files are usually exported from programs like Sketch or Adobe Illustrator. On the other hand, you could also be using icons from websites like Iconfinder or Flaticon. These files usually contain a rich set of metadata and paths that include points used by designers. Unless you are using those specific paths and points in your application, they can be optimized to further reduce the file size.

There is a really awesome tool called SVGO which will process and optimize your SVG files. It can remove excessive markup and metadata, optimize and clean paths, and minify the output. It can be included in your build process, or run independently.

Even better than the command line interface, is a website created by Jake Archibald (@jaffathecake), called "SVGO Missing GUI" or SVGOMG.

Demo of SVGOMG optimizing an SVG image.

From here we can upload or paste our source code into the REPL, toggle the options, and easily gather the output for use in our HTML and JavaScript.

In the example above, we can see how it saved 68% for such a small icon. When you're working with a lot of icons, or larger vector graphics, it can make a noticeable impact on your overall application.

Better bundle sizes mean your web app is faster, more responsive, and reaches more customers around the world. 68% is great!

Try it for yourself!

If you're building your web application with React, it is not as easy to copy and paste the SVG output into your application. React uses the naming convention from JavaScript objects to create HTML elements. Instead of stroke-width, we use strokeWidth in JSX.

Fixing all of those attributes takes too much time, and so enter: React SVGR

Demo of React SVGR Playground

Similarly, React SVGR is also a node API, command line client, and most importantly - a GUI playground. Using this tool, we can paste our SVG output from SVGO and it will output a React component.

In the example above, we can see that SVGR does have an integration with SVGO if you have a JSON config object on hand. However, I rarely carry that around with me as I am developing - so I generally optimize with SVGO first and then paste the output into SVGR.

With these tools, you can deliver the most optimized version of vector graphics in your web application. Whether you're using React.JS, or vanilla HMTL and JavaScript - these tools have you covered.

Now we're cooking with some gas - You



Photo by Andrej Lišakov

 
LIKE
 
LOVE
 
WOW
 
LOL

More Stories

Melt of the Day: Brisket, Muenster, & Grilled Onions

2 min read

You can't go wrong with brisket. This recipe uses Snow's BBQ, Texas Monthly's #1 Pick, and grilled onions for the perfect brisket and grilled cheese melt.

Lessons Learned in Freelancing

12 min read

If you want to become a freelance web developer, these are the lessons that will help you have a great time working with clients and being effective.

See more posts

Read it before anyone else. Subscribe to my newsletter for early access to the latest news in software engineering, web development, and more.