How To Minify / Optimize SVG Files By Hand

Channel:

quidsup

Subscribers:

54,700

Published on November 27, 2021 4:47:53 PM ● Video Link: https://www.youtube.com/watch?v=UvvxmW4BKOo

Category:

Tutorial

Duration: 16:54

7,482 views

136

Although you can minify Scaled Vector Graphics (SVG) images using online services, you may well find you can reduce the size of the file further without any detriment to quality.
In this video I discuss what you can remove from SVG / XML headers, removal of transforms, the impact of precision, and utilising groups.

Sources:
Automated Minifying SVGO: https://jakearchibald.github.io/svgomg/

Headers:
SVG Header: https://www.w3.org/wiki/SVG_Links
ViewBox and Initial Coordinates: https://www.w3.org/TR/SVG/coords.html#InitialCoordinateSystem

Precision
https://oreillymedia.github.io/Using_SVG/extras/ch08-precision.html
https://css-tricks.com/understanding-and-manually-improving-svg-optimization/

leading zero can be dropped, although it may cause issues:
https://github.com/jakearchibald/svgomg/issues/192

Basic Shapes: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes

Grouping: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g
Transforms: https://www.sarasoueidan.com/blog/svg-transformations/

Wallpaper:
https://www.pling.com/p/1583246

Like my channel? Please help support it:
Paypal: https://www.paypal.me/quidsup

Follow me on Social Media
Twitter: https://twitter.com/quidsup
MeWe: https://mewe.com/i/quidsup
Minds: https://minds.com/quidsup