Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: reduce file size of docusaurus.svg #10806

Merged
merged 1 commit into from
Jan 3, 2025

Conversation

jakeboone02
Copy link
Contributor

@jakeboone02 jakeboone02 commented Jan 2, 2025

Pre-flight checklist

Motivation

After submitting website/static/img/docusaurus.svg as-is to the vscode-icons repo (vscode-icons/vscode-icons#3645), one of the maintainers asked me to reduce the file size to less than 4 KB, preferably 2 KB.

I managed to get it down to 1.7 KB—about 27% of its original size of 6.2 KB—and thought I'd share it here in case the Docusaurus team would like to use it. I also did the same for the "keytar" and "speed" versions.

Test Plan

Visually, the new one is a near-pixel-perfect copy of the old one except for the spines, which are a little pointier, and the "correction" of a couple of quirks like the top belly line being a tad lower than it should.

It's close enough (especially at low resolutions) that I didn't feel the need to regenerate docusaurus.png or docusaurus.ico.

Note: this PR removes viewBox="0 0 200 200" which was added in #2316 to fix a scaling issue in IE11. Since IE has been EOL'd for a couple of years now, I figured viewBox wasn't necessary anymore.

Test links

Deploy preview: https://deploy-preview-10806--docusaurus-2.netlify.app/

The "keytar" and "speed" versions are used here:
https://deploy-preview-10806--docusaurus-2.netlify.app/docs/markdown-features/assets#themed-images

Related issues/PRs

Sources

The code changes in this PR are for the minified versions, but the full versions with comments are posted below:

docusaurus.svg

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <g fill="#3ECC5F">
    <!-- Tail and left leg -->
    <path d="M23 163c-7.4 0-14-4-17.3-10A20 20 0 003 163c0 11 9 20 20 20h20v-20H23zM164 183h9v-4h-8z"/>
    <!-- Body -->
    <path d="M183 53V43c0-11-9-20-20-20H73c-4-8-6-8-10 0c-4-8-6-8-10 0c-4-8-6-8-10 0c-7-9-9-5-10.3 2.3c-9-3-10.3-1.7-7.3 7.3c-9 2-10 3-2.4 10.4c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c0 11 9 20 20 20h120c11 0 20-9 20-20"/>
  </g>
  <!-- Teeth -->
  <path fill="#FFF" d="M183 83l-70-4.3c-13.3-1.5-13.3-19.8 0-21.3L183 53"/>
  <!-- Left hand -->
  <use href="#h" x="60"/>
  <!-- Left foot -->
  <use href="#f" x="50"/>
  <!-- Belly -->
  <path d="M103 183h60c11 0 20-9 20-20V93h-60c-11 0-20 9-20 20v70z" fill="#FFFF50"/>
  <g fill="none" stroke="#000" stroke-width="2" stroke-linecap="round">
    <!-- Eye -->
    <path d="M63 53a1 1 0 1 0-20 0" stroke-width="5"/>
    <!-- Teeth separator -->
    <path d="M183 62.6c-5 0-5 10-10 10.7-5 0-5-10-10-10-5 0-5 9-10 9-5 0-5-8.5-10-8.5-5 0-5 8-10 8-5 0-5-7.25-10-7.25-5 0-5 6.5-10 6.5" stroke-linecap="butt"/>
    <!-- Belly lines -->
    <path d="M168 113h-50m50 10h-50m50 10h-50m50 10h-50m50 10h-50m50 10h-50"/>
  </g>
  <g fill="#000">
    <!-- Nostrils -->
    <circle cx="143" cy="39.3" r="2.5"/>
    <circle cx="163" cy="38" r="2.5"/>
    <!-- Teeth separator end cap -->
    <circle cx="113" cy="71" r="1"/>
  </g>
  <!-- Right arm and leg -->
  <path d="M83 123h40v-20H83zM83 183h40v-40H83z" fill="#3ECC5F"/>
  <!-- Right hand -->
  <g id="h" fill="#44D860">
    <circle cx="123" cy="113" r="10"/>
    <circle cx="128" cy="104.3" r="2.4"/>
    <circle cx="131.7" cy="108" r="2.4"/>
    <circle cx="133" cy="113" r="2.4"/>
    <circle cx="131.7" cy="118" r="2.4"/>
    <circle cx="128" cy="121.7" r="2.4"/>
  </g>
  <!-- Right foot -->
  <g id="f" fill="#44D860">
    <circle cx="123" cy="163" r="20"/>
    <circle cx="113" cy="145.7" r="5"/>
    <circle cx="123" cy="143" r="5"/>
    <circle cx="133" cy="145.7" r="5"/>
    <circle cx="140.3" cy="153" r="5"/>
    <circle cx="143" cy="163" r="5"/>
  </g>
</svg>

docusaurus_keytar.svg

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path d="M4.883.09v1.08a1 1 0 01-1 1H1a1 1 0 01-1-1V.09h4.883z" id="a"/>
    <rect id="k" x="0" y="" width="4.883" height="4.883" rx="1"/>
    <rect id="fn" x="0" y="1.447" width="4.563" height="1.447" rx=".723"/>
  </defs>
  <g fill="#3ECC5F">
    <!-- Tail -->
    <path d="M23 163c-7.4 0-14-4-17.3-10A20 20 0 003 163c0 11 9 20 20 20h20v-20H23z"/>
    <!-- Left leg -->
    <path d="M164 183h9v-4h-8z"/>
    <!-- Body -->
    <path d="M183 53V43c0-11-9-20-20-20H73c-4-8-6-8-10 0c-4-8-6-8-10 0c-4-8-6-8-10 0c-7-9-9-5-10.3 2.3c-9-3-10.3-1.7-7.3 7.3c-9 2-10 3-2.4 10.4c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c0 11 9 20 20 20h120c11 0 20-9 20-20"/>
  </g>
  <!-- Teeth -->
  <path fill="#FFF" d="M183 83l-70-4.3c-13.3-1.5-13.3-19.8 0-21.3L183 53"/>
  <!-- Left hand -->
  <use href="#h" x="60"/>
  <!-- Left foot -->
  <use href="#f" x="50"/>
  <!-- Belly -->
  <path d="M103 183h60c11 0 20-9 20-20V93h-60c-11 0-20 9-20 20v70z" fill="#FFFF50"/>
  <g fill="none" stroke="#000" stroke-width="2" stroke-linecap="round">
    <!-- Eye -->
    <path d="M63 53a1 1 0 1 0-20 0" stroke-width="5"/>
    <!-- Teeth separator -->
    <path d="M183 62.6c-5 0-5 10-10 10.7-5 0-5-10-10-10-5 0-5 9-10 9-5 0-5-8.5-10-8.5-5 0-5 8-10 8-5 0-5-7.25-10-7.25-5 0-5 6.5-10 6.5" stroke-linecap="butt" stroke="#000"/>
    <!-- Belly lines -->
    <path d="M168 113h-50M168 123h-50M168 133h-50M168 143h-50M168 153h-50M168 163h-50"/>
  </g>
  <g fill="#000">
    <!-- Nostrils -->
    <circle cx="143" cy="39.3" r="2.5"/>
    <circle cx="163" cy="38" r="2.5"/>
    <!-- Teeth separator end cap -->
    <circle cx="113" cy="71" r="1"/>
  </g>
  <!-- Keytar -->
  <g transform="rotate(-15 433.487 -340.892)">
    <!-- Keytar body -->
    <rect fill="#D8D8D8" width="84.522" height="33.367" rx="2"/>
    <!-- Fn row inset -->
    <rect fill="#4A4A4A" x="1.808" y="1.085" width="81.379" height="2.17" rx="1.085"/>
    <!-- Fn keys -->
    <g fill="#D8D8D8" opacity=".136">
      <use href="#fn" x="3.798"/>
      <use href="#fn" x="10.042"/>
      <use href="#fn" x="14.846"/>
      <use href="#fn" x="19.649"/>
      <use href="#fn" x="24.453"/>
      <use href="#fn" x="30.457"/>
      <use href="#fn" x="35.26"/>
      <use href="#fn" x="40.064"/>
      <use href="#fn" x="44.867"/>
      <use href="#fn" x="50.872"/>
      <use href="#fn" x="55.675"/>
      <use href="#fn" x="60.479"/>
      <use href="#fn" x="66.483"/>
      <use href="#fn" x="71.286"/>
      <use href="#fn" x="76.09"/>
    </g>
    <!-- Number row keys -->
    <g transform="rotate(-180 41.684 4.375)" fill="#4A4A4A">
      <use href="#k" x="7.595"/>
      <use href="#k" x="13.382"/>
      <use href="#k" x="19.169"/>
      <use href="#k" x="24.956"/>
      <use href="#k" x="30.743"/>
      <use href="#k" x="36.53"/>
      <use href="#k" x="42.317"/>
      <use href="#k" x="48.104"/>
      <use href="#k" x="53.891"/>
      <use href="#k" x="59.678"/>
      <use href="#k" x="65.465"/>
      <use href="#k" x="71.252"/>
      <use href="#k" x="77.038"/>
      <use href="#k" x="7.595"/>
      <use href="#k" x="13.382"/>
      <use href="#k" x="19.169"/>
      <use href="#k" x="24.956"/>
      <use href="#k" x="30.743"/>
      <use href="#k" x="36.53"/>
      <use href="#k" x="42.317"/>
      <use href="#k" x="48.104"/>
      <use href="#k" x="53.891"/>
      <use href="#k" x="59.678"/>
      <use href="#k" x="65.465"/>
      <use href="#k" x="71.252"/>
      <use href="#k" x="77.038"/>
      <!-- Delete (Backspace) key -->
      <rect rx="1" width="6.7" height="4.883"/>
    </g>
    <!-- Upper row keys -->
    <g transform="translate(1 9.5)" fill="#4A4A4A">
      <!-- ??? -->
      <!-- <path d="M1.447.404h4.69a1 1 0 011 1v2.882a1 1 0 01-1 1h-4.69a1 1 0 01-1-1V1.404a1 1 0 011-1z"/> -->
      <use href="#k" x="8.042"/>
      <use href="#k" x="13.829"/>
      <use href="#k" x="19.616"/>
      <use href="#k" x="25.403"/>
      <use href="#k" x="31.19"/>
      <use href="#k" x="36.977"/>
      <use href="#k" x="42.764"/>
      <use href="#k" x="48.551"/>
      <use href="#k" x="54.337"/>
      <use href="#k" x="60.124"/>
      <use href="#k" x="65.911"/>
      <use href="#k" x="71.698"/>
      <use href="#k" x="77.485"/>
    </g>
    <!-- Home row keys -->
    <g fill="#4A4A4A">
      <!-- ??? -->
      <!-- <path d="M2.447 15.19h6.68a1 1 0 011 1v2.883a1 1 0 01-1 1h-6.68a1 1 0 01-1-1v-2.882a1 1 0 011-1z"/> -->
      <g transform="translate(11.212 15.19)">
        <use href="#k"/>
        <use href="#k" x="5.787"/>
        <use href="#k" x="11.574"/>
        <use href="#k" x="17.361"/>
        <use href="#k" x="23.148"/>
        <use href="#k" x="28.935"/>
        <use href="#k" x="34.722"/>
        <use href="#k" x="40.508"/>
        <use href="#k" x="46.295"/>
        <use href="#k" x="52.082"/>
        <use href="#k" x="57.869"/>
      </g>
      <!-- Return key -->
      <rect x="75" y="15.2" rx="1" width="8.4" height="4.883"/>
    </g>
    <!-- Bottom row keys -->
    <g transform="translate(1 21.144)" fill="#4A4A4A">
      <use href="#k" x="15.818"/>
      <use href="#k" x="21.605"/>
      <use href="#k" x="27.392"/>
      <use href="#k" x="33.179"/>
      <use href="#k" x="38.966"/>
      <use href="#k" x="44.753"/>
      <use href="#k" x="50.54"/>
      <use href="#k" x="56.327"/>
      <use href="#k" x="62.114"/>
      <!-- Shift keys -->
      <rect x=".5" rx="1" width="14.3" height="4.883"/>
      <rect x="68" rx="1" width="14.3" height="4.883"/>
    </g>
    <!-- Control row keys -->
    <g transform="translate(1 27.126)" fill="#4A4A4A">
      <use href="#k" x=".447"/>
      <use href="#k" x="6.234"/>
      <use href="#k" x="12.021"/>
      <use href="#k" x="17.808"/>
      <!-- Space bar -->
      <rect x="23.5" rx="1" width="30" height="4.883"/>
      <!-- ⌘ key? -->
      <rect x="54.4" rx="1" width="5.6" height="4.883"/>
      <use href="#k" x="60.848"/>
      <use href="#k" x="66.635"/>
      <use href="#k" x="77.485"/>
      <!-- Up arrow key -->
      <use href="#a" transform="rotate(-180 38.471 1.074)"/>
      <!-- Down arrow key -->
      <use href="#a" transform="translate(72.06 2.713)"/>
    </g>
  </g>
  <g fill="#3ECC5F">
    <!-- Right arm -->
    <path d="M83 123h40v-20H83z"/>
    <!-- Right leg -->
    <path d="M83 183h40v-40H83z"/>
  </g>
  <!-- Right hand -->
  <g id="h" fill="#44D860">
    <circle cx="123" cy="113" r="10"/>
    <circle cx="128" cy="104.3" r="2.4"/>
    <circle cx="131.7" cy="108" r="2.4"/>
    <circle cx="133" cy="113" r="2.4"/>
    <circle cx="131.7" cy="118" r="2.4"/>
    <circle cx="128" cy="121.7" r="2.4"/>
  </g>
  <!-- Right foot -->
  <g id="f" fill="#44D860">
    <circle cx="123" cy="163" r="20"/>
    <circle cx="113" cy="145.7" r="5"/>
    <circle cx="123" cy="143" r="5"/>
    <circle cx="133" cy="145.7" r="5"/>
    <circle cx="140.3" cy="153" r="5"/>
    <circle cx="143" cy="163" r="5"/>
  </g>
</svg>

docusaurus_speed.svg

<svg width="250" height="200" xmlns="http://www.w3.org/2000/svg">
  <use href="#e" x="-20" opacity=".361" />
  <use href="#e" x="-40" opacity=".361" />
  <g id="e">
    <g fill="#3ECC5F">
      <!-- Tail -->
      <path d="M63 163c-7.4 0-14-4-17.3-10A20 20 0 0043 163c0 11 9 20 20 20h20v-20H63z"/>
      <!-- Body -->
      <path d="M223 83H63c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c-8 4-8 6 0 10c0 11 9 20 20 20h120c11 0 20-9 20-20V83z"/>
    </g>
    <!-- Helmet -->
    <path d="M223 53V33c0-11.046-8.954-20-20-20H87.112c-16.524 0-29.937 13.362-30 29.885-.121 31.68-.075 47.581.139 47.705h165.75V53z" fill="#D0021B"/>
  </g>
  <!-- Left hand -->
  <use href="#h" x="60"/>
  <!-- Left foot -->
  <use href="#f" x="50"/>
  <!-- Belly -->
  <path d="M143 183h60c11 0 20-9 20-20V93h-60c-11 0-20 9-20 20v70z" fill="#FFFF50"/>
  <g fill="none" stroke="#000" stroke-width="2" stroke-linecap="round">
    <!-- Eye -->
    <path d="M103 53a1 1 0 1 0-20 0" stroke-width="5" />
    <!-- Teeth separator -->
    <path d="M223 62.6c-5 0-5 10-10 10.7-5 0-5-10-10-10-5 0-5 9-10 9-5 0-5-8.5-10-8.5-5 0-5 8-10 8-5 0-5-7.25-10-7.25-5 0-5 6.5-10 6.5" stroke-linecap="butt" stroke="#000" />
    <!-- Belly lines -->
    <path d="M208 113h-50M208 123h-50M208 133h-50M208 143h-50M208 153h-50M208 163h-50"/>
  </g>
  <g fill="#000">
    <!-- Nostrils -->
    <circle cx="183" cy="39.3" r="2.5"/>
    <circle cx="203" cy="38" r="2.5"/>
    <!-- Teeth separator end cap -->
    <circle cx="153" cy="71" r="1"/>
  </g>
  <!-- Handlebars -->
  <path d="M225 116h-23v68h-5v-68h-31v-4h58.256a4.502 4.502 0 018.744 1.5 4.5 4.5 0 01-8.242 2.5z" fill="#D8D8D8"/>
  <g fill="#3ECC5F">
    <!-- Right arm -->
    <path d="M123 123h40v-20H133z"/>
    <!-- Right leg -->
    <path d="M123 183h40v-40H133z"/>
  </g>
  <!-- Right hand -->
  <g id="h" fill="#44D860">
    <circle cx="163" cy="113" r="10"/>
    <circle cx="168" cy="104.3" r="2.4"/>
    <circle cx="171.7" cy="108" r="2.4"/>
    <circle cx="173" cy="113" r="2.4"/>
    <circle cx="171.7" cy="118" r="2.4"/>
    <circle cx="168" cy="121.7" r="2.4"/>
  </g>
  <!-- Right foot -->
  <g id="f" fill="#44D860">
    <circle cx="163" cy="163" r="20"/>
    <circle cx="153" cy="145.7" r="5"/>
    <circle cx="163" cy="143" r="5"/>
    <circle cx="173" cy="145.7" r="5"/>
    <circle cx="180.3" cy="153" r="5"/>
    <circle cx="183" cy="163" r="5"/>
  </g>
  <!-- Visor -->
  <path d="M95 32h128.2v48H75V52c0-11 9-20 20-20z" fill="#000"/>
  <!-- Eye -->
  <path d="M103 53a1 1 0 1 0-20 0" stroke-width="5" fill="none" stroke="#9B9B9B" stroke-width="2" stroke-linecap="round" opacity=".546"/>
  <g fill="#D8D8D8">
    <!-- Glare - middle -->
    <path opacity=".436" d="M212 35h8v19h-8z"/>
    <!-- Glare - top -->
    <path d="M201 17h5.33c7.2-.38 13.3 5.13 13.6 12a13 13 0 01.018.683v.3h-8v-3c0-5.5-4.5-10-10-10a10 10 0 00-.9.04z" opacity=".538"/>
    <!-- Glare - bottom -->
    <path opacity=".436" d="M212 56h8v4h-8z"/>
  </g>
  <!-- Glare - ellipse -->
  <ellipse fill="#930012" transform="rotate(-20 93.5 28)" cx="93.5" cy="28" rx="3.5" ry="1"/>
  <!-- Glare - arcs -->
  <path d="M95.52 24.747c-1.3-4.8-6-7.7-10.5-6.5m3.5 10.5c-1.3-4.8-6-7.7-10.5-6.5" fill="none" stroke="#6D000D" opacity=".6"/>
  <!-- Scooter footboard -->
  <path fill="#D8D8D8" d="M74 184h135v3H74z"/>
  <!-- Scooter wheels -->
  <g id="w">
    <circle fill="#000" cx="71.5" cy="186.5" r="6.5"/>
    <circle fill="#4A4A4A" cx="71.5" cy="186.5" r="2.5"/>
  </g>
  <use href="#w" x="138"/>
</svg>

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Jan 2, 2025
Copy link

netlify bot commented Jan 2, 2025

[V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit d11a170
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/67770881e72e3e00081f2c62
😎 Deploy Preview https://deploy-preview-10806--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

github-actions bot commented Jan 2, 2025

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO Report
/ 🟠 63 🟢 98 🟢 96 🟢 100 Report
/docs/installation 🟠 53 🟢 97 🟢 100 🟢 100 Report
/docs/category/getting-started 🟠 73 🟢 100 🟢 100 🟠 86 Report
/blog 🟠 63 🟢 96 🟢 100 🟠 86 Report
/blog/preparing-your-site-for-docusaurus-v3 🔴 47 🟢 92 🟢 100 🟢 100 Report
/blog/tags/release 🟠 63 🟢 96 🟢 100 🟠 86 Report
/blog/tags 🟠 74 🟢 100 🟢 100 🟠 86 Report

@slorber slorber added the Argos Add this label to run UI visual regression tests. See argos.yml GH action. label Jan 3, 2025
Copy link

argos-ci bot commented Jan 3, 2025

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) ✅ No changes detected - Jan 3, 2025, 11:03 AM

@slorber
Copy link
Collaborator

slorber commented Jan 3, 2025

Thanks!

That looks so similar that our visual regression tests do not even see any difference, that's weird 😅

https://app.argos-ci.com/meta-open-source/docusaurus/builds/1086/128494228


Something worth checking too is that our CI reports a size increase of the markdown asset page.

Unfortunately PRs of external contributors do not have the comment, but it can be seen here:
https://github.com/facebook/docusaurus/actions/runs/12589189297/job/35108111758?pr=10806

Any idea why this happens? Maybe SVGO is able to optimize the previous code further?

| Filename | Size | Change |  |
| :--- | :---: | :---: | :---: |
| `website/build/blog/2017/12/14/introducing-docusaurus.html` | 69 kB | -6.22 kB (-8.26%) | ✅ |
| `website/build/docs/markdown-features/assets.html` | 95.1 kB | +1.19 kB (+1.27%) |  |

@slorber
Copy link
Collaborator

slorber commented Jan 3, 2025

ooh I figured it out: the keytar svg is so small that it goes under the url-loader threshold and gets inlined as base64

CleanShot 2025-01-03 at 12 15 55

Looks fine to merge thanks.

@slorber slorber added the pr: internal This PR does not touch production code, or is not meaningful enough to be in the changelog. label Jan 3, 2025
@slorber slorber merged commit 94a56fe into facebook:main Jan 3, 2025
17 of 18 checks passed
@jakeboone02
Copy link
Contributor Author

Thanks for merging! FWIW those visual regression tests seem to check light mode only, which is probably fine everywhere except that markdown asset page which displays the "speed" icon in dark mode instead of the "keytar" icon (on purpose). Probably not worth updating CI config but I thought I should mention it.

@jakeboone02 jakeboone02 deleted the minify-logo branch January 3, 2025 15:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Argos Add this label to run UI visual regression tests. See argos.yml GH action. CLA Signed Signed Facebook CLA pr: internal This PR does not touch production code, or is not meaningful enough to be in the changelog.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants