SVG Toolbox

The definitive workflow to extend Figma's built-in SVG exports with professional cleaning, optimization, and production-ready code generation.

Figma Plugin Get the plugin

Getting Started

  1. Select any element, group, or multiple objects on your Figma canvas.
  2. Open the SVG Toolbox plugin.
  3. Click Extract SVG Code to load the code for your selection into the preview area.
  4. Toggle features to transform the code in real-time.
  5. Click Copy to grab your production-ready code.

Basic Features

Clean Clips

Instantly strip toxic Figma clipPath and redundant frames used for masking. Leaves you with just clean visual paths.

CurrentColor

Converts all explicit colors to currentColor for seamless CSS styling via the color property.

Hex Colors

Normalizes all colors to standard 6-digit hex format for consistency across your icon set.

Trim Decimals

Shrinks file size by rounding numeric coordinates to 2 decimal places without losing visual detail.

1-Liner

Minifies code into a single continuous line, perfect for inline embedding or JS props.

Attribute Sorting

Automatically reorders attributes into a canonical standard, resulting in predictable code and cleaner Git diffs.

Pro Features

PRO

Remove ID

Strip auto-generated IDs to prevent DOM collisions when embedding multiple icons on a single page.

PRO

Tidy Viewbox

The magic crop button. Calculates the exact bounding box of your selection and resets the viewBox to fit perfectly, removing all empty padding.

PRO

Merge by

Consolidate multiple paths into fewer tags. Support for merging by Color, Group, or complete Flattening.

PRO

Flatten Group

Intelligent control over <g> tags. Choose between Parent Only unwrapping or full Zero-Group flattening.

PRO

To Path

Converts primitives like <rect> or <circle> into standard path data for consistent animation and structure.

PRO

Normalize Stroke

Force consistent stroke weights across your entire selection in one click. Support for half-pixel increments.

PRO

Code Format

Advanced transformations for React (JSX) and Vue (SFC). Handles attribute camelCasing and template wrapping.

PRO

JSON Mode

Export multiple icons as a mapped JSON object with custom keys. Designed for automated icon system pipelines.

PRO

Data URI

Get production-ready Base64 strings instantly. Copy directly into your CSS or img src.

PRO

Strip Dimension

Remove explicit width and height attributes to allow the SVG to scale naturally via its parent container.

PRO

Escape Quotes

Safety-escape all double quotes for seamless inclusion in Javascript strings or JSON data.

PRO

Single Quote

Swap all double quotes for single quotes, following the preferred style for many modern web development workflows.

Licensing & Activation

Lifetime Access (Coming soon)

SVG Toolbox PRO follows a simple one-time purchase model. No subscriptions, just production-ready code forever.

  • Single User License
  • Unlocks all PRO features

Note: Sharing your license key is strictly prohibited and may lead to automatic deactivation of your Pro access.

How to Activate

  1. Purchase your license.
  2. Open the plugin and click the Pro icon or any locked feature.
  3. Paste your License Key into the activation field.
  4. Click Activate. Your Pro features will unlock instantly.

Need help? Contact Support

Changelog

v1.2.0

Smart Automation & Merging Fixes

2026-05-24
  • Smart "To Path" Automation: The "To Path" option will now automatically turn itself on whenever you activate a "Merge By" setting and your selection contains basic shapes (like rectangles or circles).
  • Perfected Path Merging: We fixed an issue where merged shapes could become distorted or misaligned if they had rotation or scale adjustments applied to them. Transformations are now mathematically "baked" into the shape's coordinates before merging.
v1.1.0

Smart Optimization & Performance

2026-04-10

Significant update focused on intelligent code cleaning and handling high-complexity SVG assets.

  • Smart Unwrap: Automatically removes redundant Figma-generated groups when IDs match the layer name.
  • Reference-Aware IDs: "Remove ID" now intelligently preserves IDs required by gradients, masks, and clips.
  • Large File Support: Fixed crashes on complex SVGs by implementing chunked data processing.
  • Heavy SVG Warning: Visual status indicator and tooltips for assets exceeding 200KB.
  • UX Enhancements: Added MB size scaling, optimized "Tidy Viewbox" output, and fixed "Flatten Group" detection.
v1.0.0

v1 Launch

2026-04-10

Initial release of SVG Toolbox. The definitive workflow to extend Figma's built-in SVG exports with professional cleaning, optimization, and production-ready code generation.

  • Professional Cleaning: Clean Clips, Remove IDs, currentColor, and Attribute Sorting.
  • Optimization: Tidy Viewbox, Merge by, Flatten Group, and Trim Decimals.
  • Framework Ready: One-click React (JSX) and Vue (SFC) component generation.
  • Asset Pipeline: Base64 Data URI and mapped JSON object exports.