SVG Gobbler

Avatar of Chris Coyier
Chris Coyier on

Grow sales with a smart marketing platform. Try Mailchimp today Mailchimp tracking pixel

Great little project from Ross Moody:

SVG Gobbler is a browser extension that finds the vector content on the page you’re viewing and gives you the option to download, optimize, copy, view the code, or export it as an image.

When a site uses SVG as an <img>, you can right-click/save-as like any other image. But when SVG is inline as <svg> (which often makes sense for styling reasons), it’s harder to snag a copy of it. I usually end up opening DevTools, finding the <svg>, right clicking that, using Copy > Copy outerHTML, pasting into a text file, and saving out as whatever.svg. A little more toil than I’d like.

Show an open DevTools window with a contextual MacOS menu open on top of it with the option Copy highlighted, which opens to a second panel in the contextual menu where an option to copy the HTML is highlighted in bright blue.

With SVG Gobbler, I click the browser extension and it presents me a nice grid of options:

A browser window open with a black header that has the red SVG Gobbler logo flashed left and white buttons to send feedback and toggle dark mode flashed right. Below that is a grid of SVG icons, including the CSS-Tricks logo, a magnifying glass, a close icon, a downward chevron, the Jetpack logo, and an orange downward arrow.

I can quickly download them from here, but notice it will even optimize them for me if I like, or export as a PNG instead. Neat! I’ve made use of this today already, and I’ve only just installed it today.

By way of feedback, I’d say it would be nice to:

  1. Have a way to size the PNG export (might as well allow me to make it huge if I need to).
  2. Export in next-gen formats that might even be better than PNG as far as file size, like WebP or AVIF.
  3. SVG that has a fill of white should be shown on a non-white background so you can see what they are.
  4. Offer, optionally, to let me name the file as I download it rather than always naming it gobbler-original.svg

A stretch goal would be to somehow extract the CSS used on the site into the <svg>. I notice some SVGs it finds look very different when exported, because the page was making use of outside-the-SVG styles to style it, which are lost when exported.

I wonder if the changes to Safari extensions will allow Ross to easily port this to Safari (even Mobile Safari?!).