New Icon LibreSpeed

[TheVetter]

The icon I want is:

• Name: librespeed
• URL: https://github.com/librespeed/speedtest
• Link to icon: https://github.com/librespeed/speedtest/tree/master/.logo

• Vector version of the logo:
• Official style guide or brand guide:

[csobrien90]

Can I try this one?

[csobrien90]

Getting close! Going to keep at it - but any thoughts on the best way forward?

[Eiim]

Sure! Looking at the source:

• It looks like you have three 512x512 rounded rects - just use one with a black background.
• The needle has some extra nodes on the straight parts, and angles sharpely on the sides when the original doesn't. It also has a circle cut out in the middle, which is unnecessary since you're drawing the circle on top.
• Maybe consider doing the segments as clones with rotation and overridden fill.

[csobrien90]

Thanks for the suggestions, @Eiim - I shaved off just over a third of a KB implementing those. I'm at about 1.4KB when I remove whitespace. Going to keep cracking on. Was hoping I wouldn't have to change the logo at all but I may be running out of ideas 😛

<svg xmlns="http://www.w3.org/2000/svg" 
aria-label="Arch Linux" role="img"
viewBox="0 0 512 512" 
style="--f:#d0d2d3">
    <rect width="512" height="512" rx="15%"/>
    <circle fill="#d0d2d3" cx="256" cy="256" r="192"/>
    <circle cx="256" cy="256" r="159"/>
    <defs><path id="a" d="M393.4 236.4c1.5 12 1.6 24.2 0 36.2l-21.4-2.8c1.3-10.1 1.3-20.4 0-30.5l21.4-2.9" style="fill:var(--f);transform:rotate(calc(var(--r)*1deg))translate(var(--c))"/></defs>
    <use href="#a" style="--f:#be1e2d;--r:20;--c:71.5px,-103px"/>
    <use href="#a" style="--f:#ec1c24"/>
    <use href="#a" style="--f:#ee4036;--r:-20;--c:-102.5px,72px"/>
    <use href="#a" style="--f:#f05a28;--r:-40.1;--c:-224px,105px"/>
    <use href="#a" style="--f:#f6921e;--r:-60.2;--c:-349.5px,94.5px"/>
    <path fill="#d0d2d3" d="m297.6 122.2-6.5 20.5c-9.2-2.9-18.7-4.6-28.2-5.2l-1.4-9.8.5-11.8c12 .6 24 2.7 35.6 6.3m-47.7-6.3.6 12.3-1.4 9.3c-9.6.6-19.1 2.3-28.3 5.2l-6.5-20.6c11.6-3.5 23.5-5.6 35.6-6.2M199 339h16v16h-16m32.5-16h16v16h-16m32.5-16h16v16h-16m32.5-16h16v16h-16"/>
    <use href="#a" style="--r:240;--c:-604.2px,-160.1px"/>
    <use href="#a" style="--r:220;--c:-615.55px,-284.9px"/>
    <use href="#a" style="--r:200.1;--c:-583.7px,-405.7px"/>
    <use href="#a" style="--r:180.1;--c:-512.3px,-508.8px"/>
    <use href="#a" style="--r:160.1;--c:-410px,-581.2px"/>
    <path fill="#1b75bb" d="m274.6 242.3 1.8 12c0 16.2-9.1 29.3-20.3 29.3-11.2 0-20.3-13.1-20.3-29.3l1.7-11.9L256 115.9l18.6 126.4"/>
    <circle fill="#d0d2d3" cx="256" cy="256" r="9"/>
</svg>

[Eiim]

That's getting pretty optimized! Which also means it's harder to shave off those extra bytes...

• There's some improvements to be made with the paths themselves. For example, the path in the <def> can be just M393.4 236.4a140 140 0 010 36.2l-21.4-2.8a120 120 0 000-30.5z, which is 15 bytes shorter.
• Here's a suggested path improvement for the needle, which saves something like 60 bytes: m256 115.9 20.4 138.4a20.8 29.3 0 11-40.8 0z
• You've got one style which is just the fill, I think that can be replaced with just fill="#ec1c24".

Those aren't really helpful for getting to 1kb though. More aggressive ideas:

• Can you change the center of rotation for the def object? I think that's possible but don't remember how. Then you shouldn't need to do the translations, I think.
• Maybe consider doing the two boxes at the top as <use>s as well, and putting an outline around the needle.
• If those don't work, perhaps do something crazy like combine all the wedges into one arc which is broken up by black bars and filled with a gradient.

[Eiim]

Oh, and don't forget to change your aria-label – I don't think this is Arch 😉

[csobrien90]

Getting a little loose with it now. Just about 1.096 after cutting out the whitespace. So close I can taste it!

<svg xmlns="http://www.w3.org/2000/svg"
aria-label="LibreSpeed" role="img"
viewBox="0 0 512 512"><style>:nth-child(n+10){fill:#d0d2d3}</style>
<rect width="512" height="512" rx="15%"/>
<circle cx="256" cy="256" r="175.5" stroke="#d0d2d3" stroke-width="33.5"/>
<path fill="#1b75bb" d="m256 116 20.4 138.4c2.6 13.7-9.1 29.3-20.3 29.3-11.2 0-23.1-12.6-20.3-29.3L256 116"/>
<path id="a" d="M393.4 236.4a140 140 0 0 1 0 36.2l-21.4-2.8a120 120 0 0 0 0-30.5z"/>
<use href="#a" fill="#ec1c24" transform="rotate(10 256 254.5)"/>
<use href="#a" fill="#ee4036" transform="rotate(-12 256 254.5)"/>
<use href="#a" fill="#f05a28" transform="rotate(-34 256 254.5)"/>
<use href="#a" fill="#f6921e" transform="rotate(-56 256 254.5)"/>
<use href="#a" transform="rotate(-78 256 254.5)"/>
<use href="#a" transform="rotate(-102 256 254.5)"/>
<use href="#a" transform="rotate(-124 256 254.5)"/>
<use href="#a" transform="rotate(-146 256 254.5)"/>
<use href="#a" transform="rotate(-166 256 254.5)"/>
<use href="#a" transform="rotate(-188 256 254.5)"/>
<path d="M200.5 337h16v16h-16m32-16h16v16h-16m32-16h16v16h-16m32-16h16v16h-16"/>
<circle cx="256" cy="256" r="9"/>
</svg>

Hmm...now that I'm looking at it though, not sure that nth-child is going to work like I want it in Safari. Any Mac users care to confirm?

[Eiim]

I think fill inherits, so you could put fill="#d0d2d3" on a <g> containing those elements. Or maybe that only works if it's in a style? Or maybe it doesn't work at all and I'm misremembering.

Looks like the needle path can still be a bit shorter with my version, although not by a lot. My version might be slightly less accurate though, not certain.