Breezy SVG Optimization

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'), result.data)
// Copy to clipboard
setSelectedText(result.data)

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! 👏