👋 SVG Gobbler
SVG Gobbler is a simple browser extension that finds SVG content in your current window and lets you download, copy to clipboard, or export as a PNG.
Currently, if you would like to modify this extension you will need to install it manually. Before making edits you will need to build it locally and side load SVG Gobbler as a developer extension to test any changes.
1. Clone the repo
Clone the repo to your local machine and navigate into the root directory.
2. Install dependencies
SVG Gobbler uses
yarn to build the necessary dependencies.
3. Bundle the extension
yarn start to tell Webpack to build files into the
extension/dist folder. This also tells webpack to watch for edits.
4. Side load extension
- In the address bar, navigate to
- In the top right of the screen, flip the toggle to enable
- Click the button to
Load unpackedand select the
extensionfolder inside the SVG Gobbler repo
Once this is complete you can start hacking. Editing content in the
src directory will automatically build and update the extension folder which will feed the extension in the browser the latest code.
- After running the
yarn startcommand to build and watch changes...
yarn firefox:runto build the extension in a Firefox testing environment
In Chrome or Brave if you are editing anything within the
src/find directory you will need to manually press the
Update button in the extensions page to refresh your latest code changes.
Code changed within the
src/build directory will automatically update on page refresh but code that is injected into the client's tab (code within
src/find) needs manually refreshed from within the extensions page.
In Firefox everything works and auto refreshes. It's super pleasant and I do all my extension testing in Firefox.
🎉 How to use the extension
Click the SVG Gobbler extension icon to search the current page for SVGs.
Unique attributes for each SVG element will be shown within the card. The attributes currently being shown are:
If the SVG is placed as a:
- background image
- image source
- inline svg
- object data
The size of the SVG in the DOM
Feel free to submit a pull request if you've made an improvement of some kind. This is an open source project and any help is very appreciated.
This project leverages code and value from some incredibly talented folks. Most notably and predominantly are:
- Design System Toolkit: Chakra UI
- React Component SVG Transformation: SVGR
- SVG Optimization: SVGO
- Feedback widget: Feedback Fish
This started as a pet project to improve the SVG Crowbar tool that is no longer being maintained by NY Times.
The codebase has been completely rewritten 4 times.