Why viewBox="0 0 512 512" ?

[Danny-Engelman]

You are already using https://yqnn.github.io/svg-path-editor/ It is the best around to scale and round paths.

Then why not play with the viewBox?

Your 1016 Bytes

<svg xmlns="http://www.w3.org/2000/svg" aria-label="freeCodeCamp" role="img" viewBox="0 0 512 512">
<rect width="512" height="512" rx="15%" fill="#fff"/>
<path d="M376.8 128.6c-2.2 0-3.3 3.3-3.3 4.5 0 3.3 4.4 7.7 11 15.5 29 27.8 44.6 62.3 44.6 103.5 0 45.6-16.7 83.5-46.7 111.3-5.6 5.5-9 10-9 14.4l3.4 4.5a8.9 8.9 0 005.6 3.3c6.6 0 16.7-7.8 28.9-24.5 24.5-30 35.6-63.4 36.7-109 0-45.6-13.3-76.8-42.3-109-10-11.2-17.8-16.7-23.3-16.7-2 .1-4 .9-5.6 2.2zm-87.9 131.3c-11.1-2.2 33.4-55.6-46.7-119 0 0 11 33.3-42.3 107.9-52.3 74.5 23.4 118 23.4 118s-35.7-19 6.6-86.9c6.7-11.1 16.7-22.2 29-49 0 0 11 15.6 5.5 48-8.9 50 35.6 36.6 36.7 36.6 15.6 17.8-13.3 51.2-14.4 52.3s81.2-51.2 22.2-128c-4.4 4.5-10 23.4-21.1 20zM135.3 128.6a6.7 6.7 0 012.3 4.5c0 3.3-3.4 7.7-11.2 15.5A137.7 137.7 0 0083 252.1c0 45.6 15.6 82.3 45.7 111.3 6.6 5.5 8.9 11.1 8.9 13.3l-2.3 5.6a8.9 8.9 0 01-5.5 3.3c-7.8 0-16.7-8.9-30-24.5a164.7 164.7 0 01-35.7-109c0-45.6 13.4-76.8 41.2-109 11.1-11.2 19-16.7 24.5-16.7 2 .1 4 .9 5.5 2.2z" fill="#0a0a23"/>
</svg>

Can all be multiplied by 10, to get a viewbox="0 0 5120 5120", making it 917 Bytes

<svg xmlns="http://www.w3.org/2000/svg" aria-label="freeCodeCamp" role="img" viewBox="0 0 5120 5120">
<rect width="5120" height="5120" rx="15%" fill="#fff"/>
<path d="M3768 1286c-22 0-33 33-33 45c0 33 44 77 110 155c290 278 446 623 446 1035c0 456-167 835-467 1113c-56 55-90 100-90 144l34 45a89 89 90 0056 33c66 0 167-78 289-245c245-300 356-634 367-1090c0-456-133-768-423-1090c-100-112-178-167-233-167c-20 1-40 9-56 22zm-879 1313c-111-22 334-556-467-1190c0 0 110 333-423 1079c-523 745 234 1180 234 1180s-357-190 66-869c67-111 167-222 290-490c0 0 110 156 55 480c-89 500 356 366 367 366c156 178-133 512-144 523s812-512 222-1280c-44 45-100 234-211 200zM1353 1286a67 67 90 0123 45c0 33-34 77-112 155A1377 1377 90 00830 2521c0 456 156 823 457 1113c66 55 89 111 89 133l-23 56a89 89 90 01-55 33c-78 0-167-89-300-245a1647 1647 90 01-357-1090c0-456 134-768 412-1090c111-112 190-167 245-167c20 1 40 9 55 22z" fill="#0a0a23"/>
</svg>

Multiply by 5 and round everything to integers, a viewBox="0 0 2560 2560" saves 56 Bytes more

Only the original creator of the freeCodeCamp logo will notice (when displayed full screen)

I played some more with dimensions, with human AI on the premise that (for example) '27' divided by 3 is one less decimal

Changed the rect to use % percentage notation: <rect width="100%" height="100%" rx="15%" fill="white"/>
so I only had to play with the path d='....'

From 1016 Bytes original (red) to 682 Bytes (green) in 5 minutes tinkering

Those curves can be adjusted in https://yqnn.github.io/svg-path-editor/ I only played with dimensions here.

Precision now in the viewBox notation: 0 0 189.7 189.7

<svg xmlns="http://www.w3.org/2000/svg" aria-label="freeCodeCamp" role="img" viewBox="0 0 189.7 189.7"><rect width="100%" height="100%" rx="15%" fill="white"/>
<path d="M141 48c-1 0-1 1-1 2c0 1 2 3 4 6c11 10 17 23 17 39c0 17-6 31-18 42c-2 2-3 4-3 5l1 2a3 3 90 002 1c2 0 6-3 11-9c9-11 13-24 14-41c0-17-5-29-16-41c-4-4-7-6-9-6c-1 0-2 0-2 1zm-33 49c-4-1 13-21-18-45c0 0 4 12-16 40c-20 28 9 44 9 44s-13-7 2-33c3-4 6-8 11-18c0 0 4 6 2 18c-3 19 13 14 14 14c6 7-5 19-5 20s30-19 8-48c-2 2-4 9-8 8zm-58-49a3 3 90 011 2c0 1-1 3-4 6a52 52 90 00-16 39c0 17 6 31 17 42c2 2 3 4 3 5l-1 2a3 3 90 01-2 1c-3 0-6-3-11-9a62 62 90 01-13-41c0-17 5-29 15-41c4-4 7-6 9-6c1 0 2 0 2 1z" fill="black"/></svg>

If you do want to keep the viewBox="0 0 512 512" then wrap content in a transform:

706 bytes (curves not corrected)

<svg xmlns="http://www.w3.org/2000/svg" aria-label="freeCodeCamp" role="img" viewBox="0 0 512 512"><rect width="100%" height="100%" rx="15%" fill="white"/>
<g transform="scale(2.7)"><path d="M141 48c-1 0-1 1-1 2c0 1 2 3 4 6c11 10 17 23 17 39c0 17-6 31-18 42c-2 2-3 4-3 5l1 2a3 3 90 002 1c2 0 6-3 11-9c9-11 13-24 14-41c0-17-5-29-16-41c-4-4-7-6-9-6c-1 0-2 0-2 1zm-33 49c-4-1 13-21-18-45c0 0 4 12-16 40c-20 28 9 44 9 44s-13-7 2-33c3-4 6-8 11-18c0 0 4 6 2 18c-3 19 13 14 14 14c6 7-5 19-5 20s30-19 8-48c-2 2-4 9-8 8zm-58-49a3 3 90 011 2c0 1-1 3-4 6a52 52 90 00-16 39c0 17 6 31 17 42c2 2 3 4 3 5l-1 2a3 3 90 01-2 1c-3 0-6-3-11-9a62 62 90 01-13-41c0-17 5-29 15-41c4-4 7-6 9-6c1 0 2 0 2 1z" fill="black"/></g></svg>

[edent]

The 512 was entirely arbitrary. Mostly on the assumption that these would be used at icon size, rather than being printed on billboards.

I think the Linux icon uses the transform strategy quite well.

I'm happy for you to experiment with this. Very excited to see what it yields.

[Danny-Engelman]

That matrix in Linux is not required, looks it was there to prevent a stroke-width="2"

• Run it throuh SVGO https://jakearchibald.github.io/svgomg/
• Note that all notations are even numbers (because Jake removed the ``matrix`), so divide all paths by 2
• set a 256 viewBox

And you go from 970 Bytes to 907 Bytes

<svg xmlns="http://www.w3.org/2000/svg"
aria-label="Linux" role="img"
viewBox="0 0 256 256" fill="#333"><rect
width="256" height="256"
rx="15%"
fill="#fff"/><path d="M96 103c-3 7-24 29-22 51c8 92 36 30 78 53c0 0 75-42 15-110c-17-24-2-43-13-59s-30-17-44-2s6 37-14 67"/><path fill="#eee" d="M170 149s9-18-8-31c16 17 6 32 6 32h-3c-1-35-10-16-23-78c15-17-14-32-14-4h-9c1-24-20-12-8 5c-1 37-23 52-23 78c-7-18 6-32 6-32s-18 15-7 37s31 17 17 27c22 15 56 5 55-27c1-8 22-5 24-3s-3-4-13-4M114 71c-7-2-5-11-2-11s8 7 2 11m19 1c-5-7-1-14 4-13s5 13-4 13"/><path fill="#fc2" stroke="#333" d="M87 159l21 30c11 7 5 35-25 21c-17-5-31-4-33-13s4-10 3-14c-4-22 14-11 19-22s5-16 15-2m112 14c-4-6 0-17-14-16c-6 12-23 24-24 0c-10 0-3 24-7 35c-9 27 17 29 28 16l26-18c2-3 5-6-9-17M107 81c-3-6 11-14 16-14s12 4 19 6s4 9 2 10s-13 10-21 10s-10-8-16-12M107 80c8 6 17 11 35-3z"/><path d="M118 74c-2 0 1-2 2-1m7 1c1-1-1-2-3-1"/></svg>

[TPS]

Have you tried https://github.com/RazrFalcon/svgcleaner or https://github.com/RazrFalcon/svgcleaner-gui before SVGO(MG), either before or after manual tweaking? I've found that gives some amazing results.