Why I built a plugin chain for responsive SVGs

I spend a lot of time shipping design systems and marketing sites where icons and illustrations are reused across breakpoints and screen densities. Over the years I kept running into the same two problems: exports that took way too long, and SVGs that looked perfect in Figma but fell apart in the browser because they had hardcoded width/height attributes, flattened groups, or overly verbose path data.

I wanted a simple, repeatable pipeline that I could run from inside Figma (or alongside it) to export hundreds of icons and illustrations, reduce file weight by a large margin, and keep SVGs fully responsive and pixel-perfect in production. The result is a small chain of plugins and tools that routinely cuts export time by around 70% and delivers SVGs that retain their fidelity across viewports.

The core idea

There are three goals that steer the chain:

  • Batch-select and export assets quickly from Figma.
  • Optimize SVG markup aggressively but safely (keep viewBox, remove fixed dimensions, preserve critical groupings and transforms).
  • Add a final pass that prepares the SVG for responsive use (remove width/height, ensure preserveAspectRatio, prefix IDs when necessary).

    • When you combine these actions you get both big time savings (fewer manual exports / less cleanup) and dramatic file-size wins, which explains the ~70% reduction in overall export turnaround for projects where this was applied.

    The plugin chain I use

    Here’s the chain I run in most projects. You can adapt it to your team’s preferences, but this sequence balances speed and safety.

  • Similayer — fast, precise selection
  • TinyImage Compressor (Figma plugin) — batch export + built-in SVGO
  • SVGOMG (web) or SVGO CLI — controlled, repeatable optimization pass
  • Scripter or a tiny Node post-process — final responsive tweaks (remove width/height, ensure preserveAspectRatio, prefix IDs)

    • Step-by-step workflow

    Here’s how I actually work with those tools. I’ll assume you have a Figma file with many icons or SVG illustrations you need to export as responsive assets.

  • Select smartly with Similayer. Similayer lets you select layers with shared properties (same fill, same component, same name pattern). I use it to select all icons or all instances of a component variant. That saves me from clicking through artboards and makes batching trivial.
  • Batch export with TinyImage Compressor. TinyImage is my go-to inside Figma. It can export large batches and runs an initial SVGO optimization. In the plugin I configure exports as SVG (not PNG), check “export multiple sizes” if I need 1x/2x variants, and let TinyImage handle the first pass of compression. Its in-Figma export is much faster than manually exporting each asset and often eliminates dozens of manual steps.
  • Run SVGOMG or SVGO for a controlled second pass. TinyImage does a great job, but for predictable, repeatable output I run the exports through SVGOMG (the browser interface for SVGO) or the SVGO CLI. The advantage here is control: I can enable/disable exact plugins to ensure fidelity. My baseline SVGO settings are:
  • Keep viewBox (do not remove it).
  • Remove width/height (so SVGs become naturally responsive) — enable the removeDimensions plugin.
  • Enable prefixIds (to avoid id collisions when SVGs are inlined).
  • Disable convertPathData or set it conservatively if your artwork has precise curves that shouldn’t be slightly altered.

    • These settings strip unnecessary markup, collapse redundant groups, and compress path data where safe, but crucially preserve responsive behavior via the viewBox.

  • Final responsive pass with a tiny script (Scripter or Node). I often do one last tweak: ensure every exported SVG has preserveAspectRatio="xMidYMid meet" (or your chosen value) and remove any lingering width/height attributes that slipped through. If your pipeline inlines SVGs into HTML, prefixing IDs is critical; SVGO’s prefixIds helps here, but I sometimes add an audit script to ensure no duplicated IDs exist across the delivered assets.

    • You can run this final step inside Figma using the Scripter plugin (runs small JS snippets on selected nodes) or outside Figma with a small Node script that processes the export folder. Either approach saves time and avoids manual edits.

    Why this reduces export time by ~70%

    Two obvious sources of time waste disappear:

  • Manual selection and repeated single exports — batching and selection automation eliminates this.
  • Manual post-editing of SVG code to make it responsive or to fix broken attributes — the controlled SVGO + scripted pass does this in bulk.

    • On a typical icon set of 300 icons, the old way — manual export, manual open-and-edit for responsiveness, and spot optimization — could take several hours. The chain above converts that into one or two tool runs that finish in under an hour, and because the exports are smaller and cleaner, integration into a build pipeline or codebase is far smoother.

    Tweaks that preserve visual fidelity

    Optimizing aggressively can break artwork. Here are the settings and habits that protect fidelity:

  • Never remove the viewBox — it’s essential for responsiveness.
  • Avoid overly aggressive path simplification. If an icon uses subtle curves, either disable path data conversion or use conservative precision.
  • Use prefixIds rather than removing defs or gradients. For complex illustrations that use gradients, keep defs but minimize them.
  • Preview optimizations on a representative sample before running the chain on everything.

    • Integration tips for teams

    To make this repeatable for other designers or engineers, codify the settings:

  • Create a shared SVGO config file in your repo (so everyone uses the same optimizations).
  • Add a short README and a Scripter snippet to your Figma library that teammates can run.
  • If you have a build pipeline, run the SVGO CLI as part of CI to guarantee optimized SVGs end up in production automatically.

    • My favorite quick wins

    When I’m short on time but need to ship clean SVGs:

  • Use TinyImage inside Figma for immediate batch export and compression.
  • Run SVGOMG on a handful of representative files to find the safest SVGO configuration.
  • Automate the final pass with a tiny script so exported files are always ready for the web.

    • If you want, I can share a sample SVGO config and a tiny Node script I use for the final responsive cleanup — it’s a few lines and I’ve included it in several team repos to keep the output consistent.