SVG Optimisation Techniques
Learn how to optimise your SVG files for faster-loading websites
Quick Navigation
Why SVG Optimisation Matters
Learn how to use SVGMaker's SVG Viewer and code editor to optimise your SVG files for faster website performance.
SVG files exported from design tools like Illustrator, Figma, or Inkscape often contain unnecessary code that increases file size. Optimising your SVGs can reduce file sizes by 20-60%, leading to faster page loads and better user experience.
What You'll Learn
- How to clean up messy SVG code from design tools
- Techniques to reduce SVG file size
- Best practices for web-optimised SVGs
- Using SVG Viewer's built-in optimisation features
Benefits of Optimisation
Faster Loading
Smaller files mean faster page loads and better user experience.
Better SEO
Page speed is a ranking factor. Optimised SVGs help your SEO.
Reduced Bandwidth
Save server costs and improve mobile performance.
Cleaner Code
Easier to read, edit, and maintain your SVG files.
Common Issues from Design Tools
- Editor metadata and comments
- Unused definitions and gradients
- Excessive decimal precision in coordinates
- Redundant attributes and styles
- Empty groups and hidden elements
Getting Started with SVG Viewer
Open your SVG in SVGMaker's SVG Viewer to begin optimising.
Steps:
Go to the SVG Viewer
Upload your SVG file or paste the SVG code directly
The code appears in the Editor with the live preview on the right
Tip
The SVG Viewer uses the same editor as VS Code, so you get syntax highlighting, code folding, and error detection.
Technique 1: Format and Clean Up Code
The first step is to format messy, minified SVG code for better readability.
How to Format SVG Code:
Open your SVG in the SVG Viewer
Click the Format button in the toolbar
The code is automatically cleaned up with proper indentation
This uses Prettier to organise your code, making it easier to identify and remove unnecessary elements.
Example:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="400" height="400"><g><g><circle cx="50" cy="50" r="40" fill="#3B82F6"/></g></g></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="400" height="400">
<g>
<g>
<circle cx="50" cy="50" r="40" fill="#3B82F6"/>
</g>
</g>
</svg>Now you can clearly see there are unnecessary nested <g> groups that can be removed.
Technique 2: Remove Unnecessary Elements
Once your code is formatted, look for elements that can be safely removed.
Empty Groups
Remove <g> elements that contain only one child or no children at all.
<!-- Before: Unnecessary wrapper -->
<g>
<circle cx="50" cy="50" r="40" fill="#3B82F6" />
</g><!-- After: Direct element -->
<circle cx="50" cy="50" r="40" fill="#3B82F6" />Unused Definitions
Check the <defs> section for gradients, filters, or clip paths that aren't referenced anywhere in your SVG.
<!-- Remove if not used -->
<defs>
<linearGradient id="unusedGradient">
<stop offset="0%" stop-color="#fff" />
<stop offset="100%" stop-color="#000" />
</linearGradient>
</defs>Editor Metadata
Remove tool-specific metadata that browsers don't need:
<!-- Remove these -->
<metadata>...</metadata>
<!-- Illustrator, Inkscape, Figma comments -->
<!-- Generator: Adobe Illustrator 24.0.0 -->Tip
Use the live preview to verify your SVG still looks correct after each change.
Technique 3: Simplify Paths and Coordinates
Path data often contains excessive precision that isn't visible at normal viewing sizes.
Reduce Decimal Precision
Most SVGs don't need more than 1-2 decimal places for coordinates.
<!-- Before: Excessive precision -->
<path d="M10.123456 20.789012 L30.456789 40.123456" /><!-- After: Reduced precision -->
<path d="M10.12 20.79 L30.46 40.12" />Round to Whole Numbers When Possible
For simple shapes, whole numbers often work just as well.
<!-- Before -->
<rect x="10.00" y="20.00" width="100.00" height="50.00" /><!-- After -->
<rect x="10" y="20" width="100" height="50" />Technique 4: Optimize Colors
Colour values can be shortened without changing the appearance.
Use Shorthand Hex Colours
<!-- Before -->
fill="#ffffff"
fill="#000000"
fill="#aabbcc"<!-- After -->
fill="#fff"
fill="#000"
fill="#abc"Remove Default Values
Black fill and stroke are often defaults that don't need to be specified.
<!-- Before: Explicit defaults -->
<path fill="#000000" stroke="none" d="..." /><!-- After: Let defaults apply -->
<path d="..." />Technique 5: Consolidate Styles
When multiple elements share the same styles, consolidate them.
Use Group Styling
<!-- Before: Repeated styles -->
<circle cx="20" cy="50" r="10" fill="#3B82F6" stroke="#1E40AF" stroke-width="2" />
<circle cx="50" cy="50" r="10" fill="#3B82F6" stroke="#1E40AF" stroke-width="2" />
<circle cx="80" cy="50" r="10" fill="#3B82F6" stroke="#1E40AF" stroke-width="2" /><!-- After: Grouped styles -->
<g fill="#3B82F6" stroke="#1E40AF" stroke-width="2">
<circle cx="20" cy="50" r="10" />
<circle cx="50" cy="50" r="10" />
<circle cx="80" cy="50" r="10" />
</g>Use CSS Classes for Repeated Styles
<style>
.icon { fill: #3B82F6; stroke: #1E40AF; stroke-width: 2; }
</style>
<circle class="icon" cx="20" cy="50" r="10" />
<circle class="icon" cx="50" cy="50" r="10" />Technique 6: Use the Right ViewBox
A properly set viewBox ensures your SVG scales correctly and doesn't include unnecessary whitespace.
Remove Unnecessary Whitespace
<!-- Before: Large viewBox with small content -->
<svg viewBox="0 0 1000 1000">
<circle cx="100" cy="100" r="50" />
</svg><!-- After: Tight viewBox around content -->
<svg viewBox="25 25 150 150">
<circle cx="100" cy="100" r="50" />
</svg>Set Width and Height for Performance
Adding explicit dimensions helps browsers allocate space before the SVG loads.
<svg width="100" height="100" viewBox="0 0 100 100">
<!-- content -->
</svg>Using SVG Viewer's Export Options
After optimising your SVG code manually, use SVGMaker's export options for additional optimisation.
Steps:
Click the Download button in the SVG Viewer
Choose your export format
Available Export Formats
Pixel Perfect
Original unaltered SVG
Optimised
10-30% smaller file size with automatic optimisation
Compressed (.svgz)
60-80% smaller using gzip compression
Quick Optimisation Checklist
Before exporting your optimised SVG, verify these items:
- Code is formatted and readable
- No empty or unnecessary <g> groups
- No unused definitions in <defs>
- No editor metadata or comments
- Decimal precision is reduced where possible
- Hex colours use shorthand when available
- Shared styles are consolidated
- ViewBox is tight around the content
- Live preview shows the SVG renders correctly
Best Practices for Web SVGs
Follow these guidelines based on your SVG type.
For Icons
- Keep file size under 5KB
- Use simple paths without gradients
- Remove any embedded fonts
- Consider using an icon sprite for multiple icons
For Illustrations
- Balance quality with file size
- Use gradients sparingly
- Consider lazy loading for large SVGs
- Test on mobile devices
For Logos
- Ensure text is converted to paths
- Remove any hidden layers
- Test at various sizes
Troubleshooting Common Issues
Solutions for common problems you might encounter.
SVG looks different after optimisation
- Check if you removed a necessary definition
- Verify fill and stroke colours weren't accidentally changed
- Use the live preview to compare before and after
File size didn't decrease much
- The SVG may already be well-optimised
- Complex paths may need the precision they have
- Consider if the SVG can be simplified at the design stage
Browser shows an error
- Check for unclosed tags
- Verify all referenced IDs exist
- Look for invalid characters in paths
Need Help?
Get support and find answers to your questions
FAQ
Find answers to frequently asked questions about SVGMaker features and functionality.
Documentation
Check the full documentation for detailed guides and tutorials.
Support
Contact support through the chatbot for personalized assistance.
Ready to optimise your SVGs?
Start reducing file sizes and improving your website performance today. Open the SVG Viewer to begin!
