daniel:// stenberg://
The SVG logo on the curl.se front page shrunk from 8658 to 2787 bytes with @vsz's magic, with no visual difference!
Jan 6 at 9:38pmWeb
Show threadPsyhackologicalJan 6
@bagder @vsz any details on how?
Show threadvszJan 6
@psyhackological @bagder By manually merging same-color paths (I used Inkscape), then running two nice tools (the winning combination was svgcleaner and svgo in this case) on the file. It helps to keep the resolution low and align objects on even pixels if possible. More details in https://github.com/curl/curl-www/blob/04a61ba9477e198d8d06d37b87ce55909edeb530/logo/curl-logo-render.sh
curl-www/logo/curl-logo-render.sh at 04a61ba9477e198d8d06d37b87ce55909edeb530 · curl/curl-www

The curl.se website. Contribute to curl/curl-www development by creating an account on GitHub.

GitHub
Show threadPsyhackologicalJan 6

@vsz @bagder
> # requires rsvg-convert, imagemagick, svgcleaner, svgo, jpegoptim, mozjpeg, advpng

Woah, nice work.

Show threadPsyhackologicalJan 6
@vsz @bagder I wonder how this pipeline can be applied for example: https://github.com/Arcticons-Team/Arcticons
GitHub - Arcticons-Team/Arcticons: A monotone line-based icon pack for android

A monotone line-based icon pack for android. Contribute to Arcticons-Team/Arcticons development by creating an account on GitHub.

GitHub
Show threadvszJan 6
@psyhackological @bagder It certainly can be applied, keeping in mind that this is akin to a final rendering step: SVGs lose metadata and structure, which is practical for display (and not so for editing or archival). Pipeline/distribution needs to tackle this.
Show threadPsyhackologicalJan 7
@vsz @bagder same idea as minified files or "baked" for rendering purposes. The original project can be left the same. Still interesting, thanks.
Show threadJohn CurveJan 6
@bagder @vsz Do tell!
Show threadЙоте Jan 6
@bagder @vsz on my opinion it could be not more 200B (10x less). I will do it manually and let you know. It will be intresting investigation. If I am wrong I also let you know.
Show threadЙоте Jan 8

@bagder @vsz I would able to shrink curl logo to 898 bytes (if it will be in one line it will be 883 bytes) What was used:

  • not use decimal numbers
  • use a line instead a path poliigon for letters
  • use style to optimize size

A logo is not identical but very close.

Here is code and bellow is an attachment

<svg viewBox="0 0 343 103" xmlns="http://www.w3.org/2000/svg"> <style>path{fill:none;stroke:#093754;stroke-width:11.5;stroke-linecap:round;stroke-linejoin:round;} circle{fill:none;stroke:#093754;stroke-width:4}</style> <path d="m51,44c0,0-18,0-20,0-2,0-7-0-10,2-3,2-8,6-10,8C9,56 6,59 6,64 6,68 6,74 6,77c0,4 1,6 4,9 5,4 7,6 10,8 3,2 5,3 11,3 6,0 20,0 20,0 M68,44c0,0 0,41 2,46 2,5 4,6 9,7 3,1 6,1 11,0 8-4 15-10 23-14V97 44 m18,0v53l0-34c0,0 12-11 19-16 2-2 5-3 8-3 3,0 5-0 8,0 4,0 6,1 8,4 2,2 2,6 2,10 m4-38h17v77h-17 34"/> <path style="stroke-linecap:butt" d="M251,89 295,14"/> <circle cx="229" cy="34" r="7"/> <circle cx="229" cy="66" r="7"/> <circle cx="247" cy="94" r="7"/> <circle cx="297" cy="9" r="7"/> <path style="stroke:#0f564d;stroke-linecap:butt" d="M287,89 331,14"/> <circle style="stroke:#0f564d" cx="284" cy="94" r="7"/><circle style="stroke:#0f564d" cx="334" cy="9" r="7"/> </svg>
Show threaddaniel:// stenberg://Jan 8
@joter @vsz amazing!
Show threadЙоте Jan 8

@bagder @vsz Thank you, it could be converted to svgz by

gzip -k "curl-logo.svg" mv "curl-logo.svg.gz" "curl-logo.svgz"

and the size will be 468B

Show threaddaniel:// stenberg://Jan 8
@joter @vsz It gets 435 bytes for me, with -n
Show threadvszJan 8
@joter @bagder by removing newlines, applying svgo and removing the filename with gzip -n (or using stdin), and using -9 (not making a diff here), it goes to 399 bytes.
Show threaddaniel:// stenberg://Jan 8
@vsz @joter *faints*
Show threaddaniel:// stenberg://Jan 8
@vsz @joter the question is if a gzipped version of this is better than just using the plain version and allowing the brotli compression most browsers already use
Show threaddaniel:// stenberg://Jan 8
@vsz @joter it seems brotli can compress it even more
Show threadvszJan 8
@bagder @joter some webservers have the option to serve pre-compressed static files if they are present next to the original. nginx supports `gzip_static on;`, `brotli_static on;`. (zstd too but needed an external module last time I checked) They can be created with a build step.
Show threaddaniel:// stenberg://Jan 8
@vsz @joter in our case for curl.se, the actual files are cached by the CDNs for six months anyway, so having the compression done by the origin server on demand is a negligible "cost" I think.
Show threadvszJan 8
@bagder @joter question if the CDN supports this. In case of nginx files need to be named `filename.ext.gz` and `filename.ext.br`.
Show threaddaniel:// stenberg://Jan 8

@vsz @joter we don't need that trick. If we want to provide it compressed we just add that magic to our end's Apache config. My point is however that since it already is brotli compressed to most users, I don't think it does much use.

Did you check how small your svgo'ed version gets with the best brotli compression?

Show threadvszJan 8
@bagder @joter with `brotli -q 11` it goes to 349 bytes.
Show threadJoshixJan 8
@joter @bagder @vsz what about zopfli compression with e.g. `pigz -11`?
Show threadRamon Fincken 🇺🇦Jan 8
@joter @bagder @vsz now that is open source love
Show threadNils Goroll 🕊️Jan 8

@joter i compressed it to 7 bytes, see this:

curl://

(sorry, could not resist, i know already that i am not funny)

Show threadgen/EricJan 9
@joter @bagder @vsz Hehe "stroke-linecap:butt". Sorry.
Show threadЙоте Jan 9

@NTICompass @bagder @vsz Thank you. stroke-linecap default value is butt, so we can remove from style for path, remove explisit style for path in tow places and add style stroke-linecap:round only for letters. It will save extra 40B

A modified version is 858 bytes (40 byte less)

<svg viewBox="0 0 343 103" xmlns="http://www.w3.org/2000/svg"> <style>path{fill:none;stroke:#093754;stroke-width:11.5;stroke-linejoin:round;} circle{fill:none;stroke:#093754;stroke-width:4}</style> <path style="stroke-linecap:round" d="m51,44c0,0-18,0-20,0-2,0-7-0-10,2-3,2-8,6-10,8C9,56 6,59 6,64 6,68 6,74 6,77c0,4 1,6 4,9 5,4 7,6 10,8 3,2 5,3 11,3 6,0 20,0 20,0 M68,44c0,0 0,41 2,46 2,5 4,6 9,7 3,1 6,1 11,0 8-4 15-10 23-14V97 44 m18,0v53l0-34c0,0 12-11 19-16 2-2 5-3 8-3 3,0 5-0 8,0 4,0 6,1 8,4 2,2 2,6 2,10 m4-38h17v77h-17 34"/> <path d="M251,89 295,14"/> <circle cx="229" cy="34" r="7"/> <circle cx="229" cy="66" r="7"/> <circle cx="247" cy="94" r="7"/> <circle cx="297" cy="9" r="7"/> <path style="stroke:#0f564d" d="M287,89 331,14"/> <circle style="stroke:#0f564d" cx="284" cy="94" r="7"/><circle style="stroke:#0f564d" cx="334" cy="9" r="7"/> </svg>
Show threaddaniel:// stenberg://Jan 9
@joter @NTICompass @vsz Viktor made this 818 byte version: https://github.com/vszakats/curl-www/blob/d37882174fa14f4f3d1dbdeae7d48e8bc115bdae/logo/curl-logo-tiny.svg (based on your previous work)
Show threadЙоте Jan 9
@bagder Thank you. Excelent work.
Show threaderinaceusJan 9
@bagder @joter @NTICompass @vsz Cool, I love optimization. I got it down to 715 bytes, based on @joter's work: https://blog.strangerthanusual.de/blogposts/curl_logo_optimization
curl logo optimization

How small can you make the curl logo SVG?

Stranger Than Usual
Show threadvszJan 9
@erinaceus @bagder @joter @NTICompass Nice! PR was at 778 bytes. With your updates (if I did not miss something) applied, it's down to 746. Replacing two `style=...`s with direct attributes made it 734, /w svgo 717. Unexpected turn: brotli size is up now to 352 (from 345). https://github.com/curl/curl-www/pull/536/files
logo: refactor SVG sources by vszakats · Pull Request #536 · curl/curl-www

use original OCRAStd.otf glyph exports for characters (exported via FontForge). use native SVG shapes (replacing paths) where possible. use all-integer coordinates. retain existing shapes losslessl...

GitHub
Show threadvszJan 9
@erinaceus @bagder @joter @NTICompass Hm, deleting `fill="none"` leaves the output the same.
Show threaderinaceusJan 9
@vsz I tried to do that, but it changed some things. Are you sure you are not looking at the graphic in front of a black background?
Show threadvszJan 9
@erinaceus You are right, my bad, tested it, but opened the wrong SVG (in multiple tools even)! Back to the last known good state.
Show threadvszJan 9
@joter @NTICompass @bagder with further tweaks (and a little slash-fix that's adding 8 bytes), this goes down to 778 (w/ svgo 766, w/ brotli-11 345), tracked in PR: https://github.com/curl/curl-www/pull/536
Show threadsb arms & legsJan 6
@bagder @vsz
Wow, appreciable!