edent
[Request] Update W3C logo
The W3C have announced a new logo! The old one needs to be updated.
The icon I want is:
- Name: W3C
- Website: https://www.w3.org/press-releases/2025/new-logo/
- Link to SVG version of icon: https://www.w3.org/assets/logos/w3c-2025/svg/w3c.svg
@Himans40 have you read https://github.com/edent/SuperTinyIcons/blob/master/CONTRIBUTING.md ?
@Himans40 have you read https://github.com/edent/SuperTinyIcons/blob/master/CONTRIBUTING.md ?
Apologies, it was my first time raising a pr, and I'll make sure it doesn't happen again.
Please let me try this one. I will be careful this time as to not to mess this up.
I tried using multiple tools but have hit a wall around 20kb. Can you please share any hint for compressing? I have used all the tools mentioned in the CONTRIBUTING.md to compress svg as much as possible.
After many tries I was able to achieve to about 12 kb after using inkscape, minimized number of points.
Can you assign this to me please. I have already created some websites.
@Samarth1719 did you read https://github.com/edent/SuperTinyIcons/blob/master/CONTRIBUTING.md ?
Yes! Can you assign me?
On Sun, 5 Oct 2025, 4:39 pm Terence Eden, @.***> wrote:
edent left a comment (edent/SuperTinyIcons#923) https://github.com/edent/SuperTinyIcons/issues/923#issuecomment-3368978190
@Samarth1719 https://github.com/Samarth1719 did you read https://github.com/edent/SuperTinyIcons/blob/master/CONTRIBUTING.md ?
— Reply to this email directly, view it on GitHub https://github.com/edent/SuperTinyIcons/issues/923#issuecomment-3368978190, or unsubscribe https://github.com/notifications/unsubscribe-auth/BL3AOSX7XB3KYS4HI36CBGL3WD35TAVCNFSM6AAAAACIDK5646VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTGNRYHE3TQMJZGA . You are receiving this because you were mentioned.Message ID: @.***>
@edent i actually got the svg but the size is around 12kb, not able to reduce it further. Could you please guide on how to compress the icon more?
@GlyphicGuy There's many tricks that may be applicable. Look at this section of the README. This logo is particularly tricky with the text, at a minimum you'll probably need to use some <use>s to duplicate letters. Worst case you might need to use a <textPath> to avoid modelling the letters entirely, but I'd avoid that to start with because font inconsistencies can be quite problematic (I'm not sure if we actually use <text> anywhere else in the repo).
We use text in jQuery - and it works well enough at a small size.
I think text here could work - but it would need fine adjusting.
@MaleeshaShashini did you read https://github.com/edent/SuperTinyIcons/blob/master/CONTRIBUTING.md ?
@edent I'm working on optimizing the new W3C logo. I've reduced it from 42KB to about 4KB, but struggling to get under 1KB while keeping it recognizable.
The circular text "WORLD WIDE WEB CONSORTIUM" is the main size issue. Could you help guide me on the best approach? Should I use text elements or focus on path optimization?
Any tips would be appreciated!
If you've given path optimization a good go and it's still not really close, probably switch over to text. I wouldn't be too surprised if it's just not doable as path.
@DipakHalkude < If it had been me, I would have been happy with the W3C favicon version; without the text; ie: https://www.w3.org/assets/logos/w3c-2025/favicons/favicon-180.png
@romain-dartigues I don't know exactly. I guess we need to include the text also. Without the text it is not acceptable
I don't think we need the text particularly. It'll be incredibly difficult with it to get down to <1024 bytes. I've got to 1039 bytes on a quick first go...
<svg xmlns="http://www.w3.org/2000/svg"
aria-label="W3C" role="img"
viewBox="0 0 512 512"><path
d="m0 0H512V512H0"
fill="#fff"/><path fill="#005a9c" d="m389 150c-13 0-24 4-32 11-5 4-7 12-2 18s11 7 20 2c3-2 8-3 14-3 10 1 13 10 13 14 0 1 0 15-14 14h-5c-6 0-12 5-13 12s5 13 11 13l7 1c18 1 17 17 16 19 0 7-12 19-32 6-7-5-57-67-57-67-24-31-64-36-95-13-4 3-6 6-6 11-1 4 0 9 3 12s6 6 11 6c4 1 9 0 12-3 22-16 41-6 51 6 0 0 53 69 67 76 9 5 18 8 28 8 29 2 47-14 52-36 3-14-6-32-21-39 10-5 19-14 19-26 2-20-14-38-38-41-2 0-4 0-5 0zm-257 10c-3 0-5 0-8 1-22 3-40 17-50 40-10 22-7 46 9 64 27 31 50 57 77 82 11 10 24 15 38 15 9 0 23-1 37-11 6-4 12-8 14-15 3-7 0-14-6-19-6-4-14-4-19 1-1 1-1 1-2 2-9 8-20 17-42 1-20-15-36-34-54-56-6-7-12-15-19-22-7-8-9-19-4-29 4-9 12-19 26-22 11-2 23 3 30 11 19 21 38 41 56 61 9 9 17 19 26 28 5 5 10 11 15 16 10 11 21 23 32 34 20 20 45 25 70 14 12-5 23-14 33-27 6-7 4-17-3-23s-17-4-23 3c-7 9-13 14-20 17-13 6-24 3-35-7s-21-22-31-33c-5-5-10-11-15-16-8-9-17-18-25-27l-1-1c-18-20-37-40-56-61-13-14-32-22-51-22z"/></svg>
I don't like having to put the text because it either will look wildly different depending on what is available on the rendering side or be quite heavy if transformed to path… Here a working example slightly over 700 bytes, using an external resource (cheating and not wanted!) and not polished (the path is ugly around the 3c):
<svg xmlns="http://www.w3.org/2000/svg"
aria-label="W3C" role="img"
viewBox="0 0 512 512"
fill="none"><defs><style type="text/css">@import url(http://fonts.googleapis.com/css?family=Carlito);</style></defs><path
d="m0 0H512V512H0"
fill="#fff"/><path
id="c"
d="M79 326a190 190 0 113 7"/><text
fill="#002a56"
font-family="Carlito,sans-serif"
font-size="2.6em"
font-weight="bold"><textPath
href="#c">· WORLD WIDE WEB CONSORTIUM · WORLD WIDE WEB CONSORTIUM</textPath></text><path
d="M239 322q-27.62 22.83-43 8l-65-67a1 1 0 0158-56L291 320q28 28 62-10M237 206q27-21 52 5l47 57q24 24 45 2t-24-40q39-11 24-33t-39-4"
stroke="#005a9c"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="26"/></svg>
I definitely think that leaving out the text is the way forward (and it's outside the "safe" green area in the guidelines in this version). With that saving hopefully the main path can be improved with the spare bytes! Nice one!