Building production-ready SVG images

SVGs, scalable vector graphics, are a great benefit to the web. A single file can be used small and big, and styled many ways just by changing the CSS. Most design tools can save vector art as an SVG file, but that file is not really ready for use on the web. In this post I’ll tell you how I make my SVGs ready for production use.

Good to know

Optimization apps may slightly alter the paths in the SVGs, so keep the original file separate from the production version that we create. If you ever want to modify your art, it is best to use your original file and rerun this workflow.

SVGs can scale up and down, but also have a default size. If the icon is meant to be used as a small icon, set the default size to be close to that. If the icon is meant to be used big, set the default to big.

This may not be true, but to be safe, I like a multiple of 2 so scaling is less likely to require subpixels. For small icons lets make them 32 pixels by default.

Icons can be shaped tall or wide, but because they are often used in sequence with other icons, I always put them in the center of a square container. This way they will align with each other horizontally and vertically.

You could make an exception when it comes to vertical centering for a series of icons that should all look like they sit on the same baseline.

Production SVGs should only contain outlined shapes and groups. Lines themselves cannot have a thickness. Masks and text should be converted to basic shapes.

Groups can be used liberally to bundle shapes and bundle other bundles. This enables you to easily color an entire group with CSS.

If an icon contain separate shapes on the top level, group them together. Having a single object on the top level will make sure you maintain the position relative to each other when resizing and positioning the art.

We want to keep color and other CSS choices out of the production SVG file whenever possible. An icon that has no color can be used in many places and colorized by CSS. An icon that is used as a background-image cannot be colorized by CSS, and thus needs its own unique copy of the SVG that does contain the fill colors.

The walkthrough

1. Open the original SVG in a vector editing tool. (Affinity Designer, Adobe Illustrator)

2. Simplify the SVG:

  1. Remove all groups.
  2. Expand Strokes.
  3. Remove shapes that are not visible because they are covered up.
  4. Merge overlapping shapes that will always be the same color.
  5. Convert masks and other complex things to simple shapes.
  6. Group logical bundles of shapes.
  7. Group multiple top level shapes to end up with 1 element.
  8. Copy the element.

3. Create a new document based on a web profile. For icons I’m going with 32×32.

4. Paste in your element, and resize it:

  1. Go to the Transform panel and make sure the Aspect Ratio is locked.
  2. Check the Width and Height values, we need to change only the one that is the largest.
  3. Change the value to 32.

5. Find your Alignment tools and center it horizontally and vertically to the canvas. It should now be exactly as wide or tall as the canvas, and not look stretched.

6. Open the Save or Export panel (depending on your app) to save our new SVG. Important options are:

  • Flatten transforms.
  • Keep the viewbox.

7. Name your icon with clarity. If your source is icon-building.svg, this version can be icon-building-prod.svg.

Optimization

We have now created a new SVG, but it is not yet optimized. We do that with the legendary SVGOMG. Visit and bookmark the Playground of SVGO.dev.

1. Drag your production SVG onto the website.

2. On the side panel, scroll all the way down and click Reset All.

3. Then scroll back up, and make the following changes:

  • [OFF] Remove viewBox
  • [ON] Prefer viewBox to width/height
  • [ON] Remove style elements

4. Click the download icon and name your new file with clarity. Following our previous example, icon-building.min.svg would be good, because this SVG is minified.

SVGOMG is missing a feature, so we need to fix something manually.

5. Open the new file (icon-building.min.svg) in a text editor or IDE. That is VS Code, Sublime Text, WebStorm, Notepad. Not Microsoft Word, Google Docs etc!

6. The file will be one very long line, so to read it more easily enable word wrapping/line wrapping. This may already be the default.

7. Remove inline style tags wherever you see them: style="they can contain anything". Don’t empty them, remove the entire tag.

8. Save the file.

You are done!

Automation

To speed up the process, I have written a Python script that leverages SVGO’s CLI to perform all optimization steps in one “click”. It can also do this for an entire directory of files at once. So if you are going to be making production SVGs a lot, it is definitely worth setting up.

On the web

As you now know, SVGs are made up of text. And on the web, we can simply dump them in our HTML. Although this will create a messy source code, the alternative – linking to an SVG file with an img tag – greatly reduces the styling we can apply to the SVG with CSS.

Therefore, when working with SVGs in your content, you may want to abstract the way they are inserted. In WordPress this could be through a shortcode. In PHP you can directly use file_get_contents() on the file.

Styling

Our SVGs now behave themselves. We can style them to be the right size via width or height using aspect-ratio. Color via fill. And all other CSS properties you want. Like this:

.socials svg {
    aspect-ratio: 1;
    width: 2rem;
    fill: #99ff00;
    margin-right: 1rem;
}

Posted on 2025-01-09.