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

51–60 of 66 posts

Re: Minify Your SVGs

#51

Post by gregable »

discreditable wrote: post #49

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.

I was curious about this. It looks like it has numerous individual plugins that provide the actual functionality. Do you know if some of the plugins are lossless, while others lossy? It may be possible to pick and choose the lossless ones.

Re: Minify Your SVGs

#52

Post by gregable »

qwerty456127 wrote: post #43

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 demonstr…

I'm not sure I agree in the usual case. This is sort of what sourcemaps are for. Provide a link in a comment in the resource source to a prettified or at least non-minified version at a separate URL. The typical user won't need to download the extra bytes, but you can still access the original if you want.

Re: Minify Your SVGs

#53

Post by crazygringo »

qwerty456127 wrote: post #43

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 demonstr…

I completely disagree. It's trivial enough to run any minified file through a prettifier.

Even in the first world, on a spotty mobile connection every single byte matters, and some of your users are almost always going to be in that situation some of the time.

Think of minifying as "compiling" for the web. A good dev makes their site performant, and doesn't care about generating readable source code for end-users which 99.9% of them don't care about.

If you want to expose the site's source code to the world in a readable format, then just publish it on GitHub as well, which is the audience that might actually care.

Readable plaintext files are for developers on your team. Not for end users of your product.

Re: Minify Your SVGs

#54

Post by pcmaffey »

willis936 wrote: post #31

SVG optimization seems like a good choice for delivery, but oftentimes I find myself using SVG in a development context. Having human readable, annotated SVG files is useful when looking through previous revisions. In terms of compressed filesize: there's no serious practical gain.

svgo --pretty

Re: Minify Your SVGs

#55

Post by makapuf »

kazinator wrote: post #25

I've also noticed the cruft in Inkscape SVG's. The TXR logo SVG is cleaned with a TXR script: http://www.kylheku.com/cgit/txr/tree/win/cleansvg.txr The original looks like this: http://www.kylheku.com/cgit/txr/tree/win/txr.svg The cleaned one is not in the repo. It's obtained by "txr cleansvg.txr txr.svg":

Are you talking about inkscape SVG which also save many details for inkscape or raw/small svg saved by inkscape ? Those if needed could use a patch if theyre too big and there are low hanging fruits

Re: Minify Your SVGs

#56

Post by social_quotient »

mhe wrote: post #18
social_quotient wrote: post #9

Pro tip for people with SVGs that have an image inside. You can pull that base64 image out of the svg, convert to image, compress it (tinypng, pngcrush etc) then convert back to base64 and out back in the SVG. We automated this with a slackbot but it’s often overlooked with all SVG optimization scripts.

Somewhat related: a while ago realized that the SVGs that draw.io generates (exports) have an interesting property. If you include an SVG inside such a drawing and you export it to SVG, that SVG is actually embedded as base64. This is unfortunately not supported by some programs (e.g., Microsoft Office). A quick fix is to actually expand the SVG into the big SVG. I wrote a quick tool for this that does this for you (…

Interesting. Care to share one of these images? I’d love to check it out.

Re: Minify Your SVGs

#57

Post by discreditable »

gregable wrote: post #51
discreditable wrote: post #49

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.

I was curious about this. It looks like it has numerous individual plugins that provide the actual functionality. Do you know if some of the plugins are lossless, while others lossy? It may be possible to pick and choose the lossless ones.

It has a boat load of plugins. I looked at a few and after puzzling over which were default enabled and default disabled I decided I didn't want to use a program with unsafe defaults.

Re: Minify Your SVGs

#58

Post by burevestnik »

I love seeing efforts to make software more efficient, so I enjoyed this post, but at the same time your own blog has a 434kb 512x512 png favicon. I'm not at all a web developer and so I don't know if there is a technical reason for that, but it seems a bit absurd in juxtaposition to your goal to reduce a 2kb svg to 100 bytes.

I've seen this on a number of other blogs, which seem to focus on minimal design. Can anyone explain what the need is for these enormous favicons?

Re: Minify Your SVGs

#59

Post by Nadya »

burevestnik wrote: post #58

I love seeing efforts to make software more efficient, so I enjoyed this post, but at the same time your own blog has a 434kb 512x512 png favicon. I'm not at all a web developer and so I don't know if there is a technical reason for that, but it seems a bit absurd in juxtaposition to your goal to reduce a 2kb svg to 100 bytes. I've seen this on a number of other blogs, which seem to focus on minimal design. Can anyon…

512x512 is specifically for browser loading splash screens when the site is added as a launcher on a phone. It's required for Chrome to have an "Add to Home Screen" prompt and requires a 192x192 and 512x512 icon. I imagine most minimalist sites you browse are expecting people to add the website as an icon/app launcher on their phones. Not sure how common an experience that is for users, I sure as hell wouldn't but maybe other people might.

Was intended for web apps I believe but is usable by sites that aren't web apps.

Read more here: https://developers.google.com/web/fundamentals/web-app-manif...

Re: Minify Your SVGs

#60

Post by ambicapter »

pier25 wrote: post #15
v33ra wrote: post #2

Related: https://jakearchibald.github.io/svgomg/

I use it every time I'm using SVG for the web. My only problem is that when pasting SVG directly from Illustrator it finds an invalid character at the end and refuses to use it. I have to paste the SVG into an editor, remove some invisible character at the end, and then paste to svgomg. I reported this and offered to PR but never got an answer: https://github.com/jakearchibald/svgomg/issues/145

Why ask, just write the PR and see if they'll take it.
Post reply on HN