How to Optimize SVG Code by Hand

Scalable Vector Graphics (SVG) are inherently lightweight. However, when you export an SVG from a design program like Adobe Illustrator or Figma, the resulting file is rarely optimized. Design tools stuff SVGs with hidden metadata, editor-specific tags, and unnecessary precision decimals that do nothing but bloat your file size.

While automated tools like SVGO are fantastic for bulk processing, understanding how to read and manually optimize SVG code is a superpower for any front-end developer. In this guide, we will open up an SVG file in a text editor and learn exactly what we can delete to create the cleanest, fastest-loading graphics possible.

Understanding the XML Structure

Unlike a JPG or PNG, which looks like a wall of gibberish when opened in a text editor, an SVG is written in XML (eXtensible Markup Language). It looks very much like standard HTML. You will see an opening <svg> tag, followed by various shape tags like <path>, <circle>, or <rect>, and a closing </svg> tag.

Because it is just text, you can literally backspace away the parts you don't need. Let's look at the most common culprits for SVG bloat.

Step 1: Strip Out the Metadata and Comments

When exporting from Illustrator, the top of your SVG file will often be polluted with XML declarations, generator comments, and DOCTYPE tags. None of this is required for modern web browsers.

Action: Delete all of it. Your file should simply start with the <svg> tag. Modern browsers already know how to render SVG; they do not need instructions from Adobe.

Step 2: Clean Up the SVG Tag Attributes

The opening <svg> tag often contains unnecessary namespaces and hardcoded dimensions.

Look for attributes like xmlns:xlink="...", xml:space="preserve", x="0px", y="0px", and enable-background="...". These are relics of older SVG specifications and are generally useless for standard web icons.

More importantly, remove hardcoded width and height attributes. Instead, rely on the viewBox. A viewBox tells the browser the internal coordinate system of the graphic, allowing it to scale responsively via CSS.

Step 3: Remove Empty Groups and Useless IDs

Designers love grouping layers. Unfortunately, those folders translate into <g> tags in your code. If a <g> tag doesn't contain a specific transform or fill attribute (e.g., <g fill="#ff0000">), it is doing nothing but adding extra bytes. You can safely remove the opening <g> and closing </g> tags while keeping the shapes inside them.

Similarly, delete any automatically generated id="..." attributes like id="Layer_1" unless you specifically plan to target them with CSS animations or JavaScript.

Step 4: Reduce Decimal Precision in Paths

The bulk of an SVG's file size is located in the d="..." attribute of its <path> elements. These are the mathematical coordinates that draw the shape. Design software often exports these coordinates to four or five decimal places.

On a web screen, you cannot see the difference between 10.12345 and 10.1. While doing this by hand for a massive illustration is tedious (which is where tools like SVGO come in), if you are fixing a simple icon, you can manually round off excessive decimals. Dropping the decimals can instantly halve the file size.

Conclusion

Manually optimizing SVG code is a brilliant exercise for understanding how vector graphics work under the hood. By stripping away Adobe generator metadata, deleting useless groups, converting hardcoded dimensions to a responsive viewBox, and rounding off excessive decimal points, you can take an exported file from a bloated 15KB down to a sleek, lightning-fast 2KB.

While you will still want to use automated optimizers for large, complex illustrations, having the knowledge to jump into the code and manually fix a stubborn, unscalable icon is a crucial skill for any modern web developer.