Tweet 👉 here

One thing that feels very cumbersome in my creation process is handling SVG export for my animations, etc. Often I create an SVG in whichever editor I feel like using that day and when I'm ready to bring it to the browser, I have a process.

  1. Export SVG to the repo I need it in.
  2. Copy the markup or drag the file into SVGOMG.
  3. Tweak the SVGO settings to get what I need.
  4. Copy the output or download it.
  5. Create a new file next to the original with an --optimized.svg suffix.

But, with ScriptKit, I can get direct access to svgo from the system now 🤩

// Menu: SVGO
// Description: Optimize SVG on drop
// Author: Jhey Tompkins
// Twitter: @jh3yy
let svgo = await npm('svgo')
let { setSelectedText } = await kit('text')
let [svg] = await arg({
placeholder: 'Drop an SVG',
drop: true,
ignoreBlur: true,
const SVG_STRING = await readFile(svg.path, 'utf-8')
// My SVGO config
const CONFIG = {...}
// Optimize it using my preferred config
let result = await svgo.optimize(SVG_STRING, CONFIG)
// Write to file
await writeFile(svg.path.replace('.svg', '--optimized.svg'),
// Copy to clipboard

This saves me a bunch of time! And I get my preferred settings every time. Also, my config becomes version controlled with my other scripts 🙌

How could it be improved?

  • Drag files straight from VSCode. Currently, this gives an empty Array.
  • Show a preview in the prompt like we can with images and sharp.

Love ScriptKit 👍 👍

Keep up the great work John! 👏