Awesome
<div align="center"> <a href="https://svggobbler.com"> <img src="assets/local/read-me.png"> </a> <br> </div>🚀 Where to install
This extension is available on:
<div align="center"> <a href="https://svggobbler.com"> <img src="assets/local/gobbler-screenshot.png"> </a> <br> </div>
Features
SVG Gobbler is a browser extension that finds the SVG content in your current tab and lets you optimize, download, copy, edit, or export.
Find SVGs
- Quickly find SVGs from a site by various placement methods like
base64
orbackground src
- Handle CORs restricted SVGs from a page
- Find individual sprite SVG instances
Export SVGs
- Export as SVG, PNG, WEBP, JPEG and various other formats
- Transform SVGs into minified Data URIs
- Transform SVGs into React components with SVGR
- Optimize and minify SVGs with SVGO
Organize SVGs
- Group and categorize SVGs by their primary domain or custom collection name
- Move, copy, duplicate, and optimize icons before sharing
- Save and store a set of uploaded SVGs for optimization
Local development
Before making edits you will need to build the extension locally and side load it as a developer extension to test any changes.
The sourcing and processing logic is abstracted into a separate package called
svg-gobbler-scripts
here.
1. Clone the repo
Clone the repo to your local machine and navigate into the root directory.
cd svg-gobbler
2. Install dependencies
SVG Gobbler uses yarn to build the necessary dependencies.
yarn
3. Start and watch a build
For development with hot reloading use Vite:
yarn dev
This will build to the dist
folder. To load the extension, open the Extensions Dashboard, enable
"Developer mode", click "Load unpacked", and choose the dist
folder.
When you make changes in src the background script and any content script will reload automatically.
4. Start the server
For a majority of the functionality you won't need a server. If you want to make some local fetch
calls related to Node processes in a separate terminal session cd into the server
directory.
cd server
Install the necessary dependencies
yarn
From this directory, compile the server function to the dist
folder.
yarn build
In a separate terminal session serve the function on a local server.
yarn serve
This will startup the server and restart it any time a change is recompiled.
About
5 versions and 5+ years ago, this started as a pet project to improve the SVG Crowbar tool that is no longer being maintained by NY Times.
Powered by
This project benefits from some incredibly talented folks.
- Vite: Frontend tooling and build processes
- CRXJS: Chrome extension build automation
- Tailwind CSS: CSS styling around the app
- SVGR: SVG to React component transformation
- SVGO: SVG optimization scripts
- Codemirror: Extensible code editor
- Radix UI: Accessible component library primitives
- JSZip: Zipping files for download
- Mini SVG Data URI: Minify SVG data URIs
- React Router: App routing
Open source
This extension is open source and doesn't collect any information from users. It's free, and made available because I enjoy making useful things for the web. Please consider contributing with an idea, bug fix, or feature request.
More apps by me
I like making things. Check out what I'm up to lately.