Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Minify Your SVGs

victorzhou.com

Post reply on HN
Print view View original

41–50 of 66 posts

Re: Minify Your SVGs

#41

Post by est31 »

sheetjs wrote: post #20

Unfortunately the reference to the actual minifier, SVGO ( https://github.com/svg/svgo ), is buried in the middle of the post. SVGO is an incredible project driven by a single volunteer in spare time (originally Kir Belevich https://twitter.com/deepsweet , and for the last few years Lev Solntsev https://twitter.com/ruGreLI ). It's the type of project you probably use regularly behind another tool like Sketch or SVGOM…

Another svg optimizer (link contains comparison to svgo): https://github.com/RazrFalcon/svgcleaner

Re: Minify Your SVGs

#42

Post by s_m »

orisho wrote: post #34

Why? Why minify everything? It all gets gzipped at the HTTP layer anyway! I truly cannot understand this need to minify everything (JS included)

Did you read the article? SVGs are super crufty and extremely easy to optimize.

Re: Minify Your SVGs

#43

Post by qwerty456127 »

In general I'd recommend the opposite: don't minify anything unless necessary, prettify it instead. Every plaintext-based format file should be optimized for human readability unless you actually need to make it hard to read (e.g. you are developing a proprietary product not meant to be open-source) or your bandwidth is limited so severely that every single byte matters.

Nevertheless the kind of minification demonstrated in the example (removing Inkscape bloat) feels really great and actually makes the file more human-readable. This reminds me of HTML files generated by MS Word and other WYSIWG editors which included tons of bloat code that actually harmed rendering (needless to say human readability).

Re: Minify Your SVGs

#44

Post by spiralganglion »

I absolutely love ImageOptim for manually optimizing SVGs, JPGs, PNGs, and GIFs. It's a simple GUI that wraps some excellent compression libs (including SVGO), which I find much faster to use for one-off image optimization than the CLI. It does a clever job of trying multiple compressors and picking whichever one creates the smallest file for each image. You can run it in a lossless or lossy mode, and tune various compression options. It's free (gratis), OSS, and runs on Mac, Windows, and Linux.

I make it a habit of running images through ImageOptim before sending them via Messages or Slack, as a courtesy for people on slow connections.

https://imageoptim.com (by HN user pornel)

Bonus round: When it comes to optimizing SVGs, nothing beats hand-editing the SVG source. I've done a fair bit of that optimizing the artwork for https://www.lunchboxsessions.com and it's been totally worth the effort. Taking a detailed 10k SVG down to 500 bytes with no perceptual difference is a huge win when you have hundreds of those SVGs on the page and you serve people who still use dialup.

Re: Minify Your SVGs

#45

Post by pelagic_sky »

spiralganglion wrote: post #44

I absolutely love ImageOptim for manually optimizing SVGs, JPGs, PNGs, and GIFs. It's a simple GUI that wraps some excellent compression libs (including SVGO), which I find much faster to use for one-off image optimization than the CLI. It does a clever job of trying multiple compressors and picking whichever one creates the smallest file for each image. You can run it in a lossless or lossy mode, and tune various co…

I've been using ImageOptim for a while now. Saves me so much trouble when I get junky SVG's as well as exporting my own.

Re: Minify Your SVGs

#46

Post by basilgohar »

orisho wrote: post #34

Why? Why minify everything? It all gets gzipped at the HTTP layer anyway! I truly cannot understand this need to minify everything (JS included)

I started by downvoting your comment, and I realized I was choosing the cowardly way of reacting. I am saying this just to illustrate my own shallow reading of your comment at first and how I was avoiding actually being helpful.

The short answer is that 99% of the time no purpose is being served by that cruft except to be bloat. Minifiers remove that cruft and optimize for the intended audience, which is machines.

The longer answer is that in optimizing for machines, you're also optimizing for humans in the long run. Anyone stuck with a 2G connection, dial-up, or Bluetooth tethered device, or a new ultra low powered device on a different CPU architecture, will appreciate not having to operate solely in the world of gigabit+ connections, 8GB mobile devices, or 8 core hyperfast CPUs. Realize that such use cases still exist, and for very legitimate, not truly edge cases.

Think of pages with hundreds or thousands of vector images. Not everyone can afford to run a Blink-powered browser or have CPU cycles for days. Every little bit helps.

Edit to fix typo and add further clarity.

Re: Minify Your SVGs

#47

Post by bhousel »

orisho wrote: post #34

Why? Why minify everything? It all gets gzipped at the HTTP layer anyway! I truly cannot understand this need to minify everything (JS included)

Fun fact! SVG is one of those things that is often easy to minify down below your nginx/apache/cdn minimum gzip length.

If your SVG files are < ~1kb, it's usually faster to just not gzip them. If they're < ~150b, gzipping will probably make both slower _and_ bigger.

Re: Minify Your SVGs

#49

Post by discreditable »

Be aware that svgo is a lossy operation. One thing it does is round the digits in numbers to a certain precision. When I last worked with it, it also did some things I did not like such as mess with viewboxes. I found that it messed up the sizing of SVGs embedded with tags in certain browsers. It has been a while since I used it though.

Re: Minify Your SVGs

#50

Post by uxamanda »

spiralganglion wrote: post #44

I absolutely love ImageOptim for manually optimizing SVGs, JPGs, PNGs, and GIFs. It's a simple GUI that wraps some excellent compression libs (including SVGO), which I find much faster to use for one-off image optimization than the CLI. It does a clever job of trying multiple compressors and picking whichever one creates the smallest file for each image. You can run it in a lossless or lossy mode, and tune various co…

ImageOptim also strips out a lot of (all?) the image metadata which is often a place people leak data unintentionally.
Post reply on HN