chore: Optimize SVGs with the latest svgo (v3.2.0) #1037
Conversation
|
@XhmikosR is attempting to deploy a commit to the Package Phobia Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -120,7 +120,7 @@ export default () => ( | |||
| viewBox="100 120 300 300" | |||
| > | |||
| <title>Vercel Logo</title> | |||
| <path fill="#fff" d="M254 156.459L367 356H141z" /> | |||
There was a problem hiding this comment.
Does removing the "L" actually change the size? I would expect that to be the same as a space (1 byte).
There was a problem hiding this comment.
I don't get into the internals of SVGO, it's just an optimization the newer version has.
| @@ -1,4 +1,4 @@ | |||
| export default (id: string) => { | |||
| //const id = Math.random().toString().slice(2) | |||
| return `<svg xmlns="http://www.w3.org/2000/svg" width="108" height="108"><defs><linearGradient id="${id}"><stop offset="0" stop-color="#006838"/><stop offset="1" stop-color="#32de85"/></linearGradient></defs><path xmlns="http://www.w3.org/2000/svg" fill="url(#${id})" d="M21.667 73.809V33.867l28.33-16.188 28.337 16.188V66.13L49.997 82.321 35 73.75V41.604l14.997-8.57L65 41.604v16.788l-15.003 8.571-1.663-.95v-16.67l8.382-4.792-6.719-3.838-8.33 4.763V69.88l8.33 4.762 21.67-12.383V37.737l-21.67-12.379-21.663 12.379v39.88L49.997 90 85 70V30L49.997 10 15 30v40z" transform="matrix(1.25 0 0 1.25 -8.75 -7.5)"/></svg>`; | |||
There was a problem hiding this comment.
This appears to be the exact same number of bytes
| <path fill="currentColor" d="M128.3 109c-14.5-9.3-9.3-19.4-9.3-19.4 3-6.9 1.5-11 1.5-11-1.3-6.6 2.9-2.3 2.9-2.3 3.9 4.6 2.1 11 2.1 11-2.6 10.3 5.1 14.6 8.9 15.9" style="transform-origin:130px 106px" class="octo-arm"/> | ||
| <svg width="80" height="80" fill="#202420" aria-hidden="true" color="#fff" style="position:absolute;top:0;border:0;right:0" viewBox="0 0 250 250"> | ||
| <path d="m0 0 115 115h15l12 27 108 108V0z"/> | ||
| <path fill="currentColor" d="M128.3 109c-14.5-9.3-9.3-19.4-9.3-19.4 3-6.9 1.5-11 1.5-11-1.3-6.6 2.9-2.3 2.9-2.3 3.9 4.6 2.1 11 2.1 11-2.6 10.3 5.1 14.6 8.9 15.9" class="octo-arm" transform-origin="130px 106px"/> |
There was a problem hiding this comment.
Is this changing anything? It looks identical.
There was a problem hiding this comment.
It's not the same; CSS styles are moved to attributes.
|
Converted to draft because I need to redo the upstash logo. |
|
You don't need to force push. I squash on merge so the commits wont matter. |
|
I'm just used to it, sorry. Took me a while, it was that Now everything should look the same. EDIT: Before: |
|
The logo color looks wrong for upstash.
|
|
I tested it live on the browser and hopefully now it should be fine. |
The order of attributes is what svgo is producing.