Download this extension on the Chrome Web store for use in Brave or Chrome.
SVG Gobbler is a simple browser extension that finds SVG content in your current window, highlights unique attributes including size and lets you download or copy to clipboard. The SVG code is automatically optimized using SVGO during export.
🎉 How to use
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
Whether or not the SVG has a viewBox
Whether or not the SVG is currently visible
Currently, if you would like to use or 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.
- Clone the repo and
cdinto the root folder
npm installto install necessary dependencies
npm run gobblerto bundle and build the latest
index.jsfile into the
extensionfolder. This also tells webpack to watch for edits and also start Prettier to automatically format the code.
Once this is complete you have all you need to side load the extension and 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.
Side load extension
- Open Chrome or Brave Browser
- 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 cloned SVG Gobbler repo
The extension requires permission to read and modify all the data of the website that you want to download the svg files from. It is nessesary to parse and extract the svg assets on the site.
This started as a pet project to improve the SVG Crowbar tool that is no longer being maintained by NY Times. It has come a long way since then but I always appreciated the simplistic approach they started and it's nice to pay homage.
Third party dependencies
Used to export the SVG strings to file or clipboard.
Node tool used to optimize the SVG content before exporting.