Rules Hub
Coding Rules Library
Optimize SVG assets before committing
Always optimize SVG files using tools like SVGO to remove unnecessary metadata and reduce bundle size.
Bad example
| 1 | <!-- Exported directly from Figma/Sketch/Illustrator --> |
| 2 | <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
| 3 | <title>Icon</title> |
| 4 | <desc>Created with Sketch.</desc> |
| 5 | <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> |
| 6 | <g id="Artboard" transform="translate(-10.000000, -10.000000)"> |
| 7 | <path d="M12,2 L12,22" id="Path" stroke="#000000"></path> |
| 8 | </g> |
| 9 | </g> |
| 10 | </svg> |
Explanation (EN)
Raw SVG exports often contain editor metadata, comments, hidden groups, and verbose attributes that are unnecessary for rendering in the browser. This bloats the application bundle.
Objašnjenje (HR)
Sirovi SVG izvozi često sadrže metapodatke editora, komentare, skrivene grupe i opširne atribute koji nisu potrebni za prikazivanje u pregledniku. To nepotrebno povećava veličinu aplikacije.
Good example
| 1 | <!-- Optimized via SVGO --> |
| 2 | <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
| 3 | <path d="M12 2v20" stroke="#000"/> |
| 4 | </svg> |
Explanation (EN)
The optimized SVG has stripped metadata, shortened path data, and removed redundant attributes, significantly reducing the file size without affecting the visual output.
Objašnjenje (HR)
Optimizirani SVG ima uklonjene metapodatke, skraćene podatke o putanjama i uklonjene suvišne atribute, čime se značajno smanjuje veličina datoteke bez utjecaja na vizualni prikaz.
Notes (EN)
You can run 'pnpm dlx svgo path/to/file.svg' or use an online optimizer like SVGOMG before adding the file to the project.
Bilješke (HR)
Možete pokrenuti 'pnpm dlx svgo path/to/file.svg' ili koristiti online optimizator poput SVGOMG prije dodavanja datoteke u projekt.