Why viewBox="0 0 512 512" ? #504
Replies: 3 comments
-
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. |
Beta Was this translation helpful? Give feedback.
-
That
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> |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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
Can all be multiplied by 10, to get a
viewbox="0 0 5120 5120"
, making it 917 BytesMultiply by 5 and round everything to integers, a
viewBox="0 0 2560 2560"
saves 56 Bytes moreOnly 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
If you do want to keep the
viewBox="0 0 512 512"
then wrap content in a transform:706 bytes (curves not corrected)
Beta Was this translation helpful? Give feedback.
All reactions