SVG Gobbler

An open-source browser extension that finds, optimizes, and exports SVG content from any webpage.

📦 Installation

Get SVG Gobbler from your browser's extension marketplace:

• Chrome Web Store
• Firefox Add-ons

✨ Features

🔍 Find SVGs

• Discover SVGs on any webpage across various mime types
• Handle CORs-restricted SVGs with ease
• Find and rebuild individual sprite SVG instances

📤 Export SVGs

• Create SVG sprites from a collection of icons
• Export in multiple formats: SVG, PNG, WEBP, JPEG, and more
• Transform SVGs into minified Data URIs
• Convert SVGs to React components using SVGR
• Optimize and minify SVGs with SVGO

🗂️ Organize SVGs

• Group and categorize SVGs by domain or custom collection name
• Move, copy, duplicate, and optimize icons before sharing
• Save and store uploaded SVGs for optimization

🛠️ Development Setup

Prerequisites

• Node.js
• pnpm

Getting Started

1. Clone the repository

   git clone https://github.com/yourusername/svg-gobbler.git
   cd svg-gobbler
   

2. Install dependencies

   pnpm i
   

3. Start the development build

   pnpm start
   

   This builds assets to the dist folder and watches for changes. For subsequent builds:

   pnpm dev
   

4. Server setup (optional) Most functionality works without a server, but for local fetch calls:

   cd server
   pnpm i
   pnpm build
   pnpm serve  # In a separate terminal session
   

Firefox Development

1. Build a release

   pnpm release
   

2. Launch in Firefox

   pnpm dev-ff
   

3. Rebuild on changes

   pnpm release
   

Loading the Extension in Chrome

1. Navigate to chrome://extensions
2. Enable "Developer mode" in the top right corner
3. Click "Load unpacked" and select the dist folder

🧰 Technology Stack

SVG Gobbler leverages these powerful open-source technologies:

• Vite - Frontend tooling and build processes
• CRXJS - Chrome extension build automation
• Tailwind CSS - Utility-first CSS framework
• SVGR - SVG to React component transformation
• SVGO - SVG optimization
• CodeMirror - Extensible code editor
• Radix UI - Unstyled, accessible components
• JSZip - JavaScript library for creating ZIP files
• Mini SVG Data URI - SVG data URI minification
• React Router - Routing for React applications
• DND-Kit - Drag and drop toolkit

📝 About

SVG Gobbler started over 7 years ago as a project to improve upon the SVG Crowbar tool (no longer maintained by NY Times). Now in its 5th major version, it continues to evolve.

🔒 Privacy

This extension is open source and doesn't collect any user information. It's completely free and made available because I enjoy creating useful tools for the web community.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request or open an Issue with ideas, bug fixes, or feature requests.

🔗 More Projects

Check out what I'm working on lately.

---