SVG Grabber 1.1.0
GitHub Download

Chrome extension

Copy any SVG
from any page

Inline icons, images, CSS backgrounds, masks and data URIs. SVG Grabber finds all of them and hands you the markup in one click.

svg-grabber.zip

Version 1.1.0 · 29 KB · Chrome

Download the extension

It is not on the Chrome Web Store. You load the unzipped folder into Chrome yourself. Install steps below, or read the source.

Install

Five steps, one minute

Chrome calls this loading an unpacked extension. It is the same flow developers use, and it works on any Chrome without an account.

  1. Download the zip and unzip it

    Keep the unzipped folder somewhere permanent, your Documents folder rather than Downloads. Chrome loads the extension from that path every time it starts, so moving or deleting the folder removes the extension.

  2. Open chrome://extensions in a new tab

    Paste the address in, links to it cannot be clicked.

  3. Turn on Developer mode

    The switch sits in the top right of that page.

  4. Click Load unpacked and pick the svg-grabber folder

    Pick the folder that has manifest.json directly inside it.

  5. Pin the icon to the toolbar, then click it on any page

    The panel lists every SVG it found. Click a card to copy it.

Chrome shows a "Disable developer mode extensions" warning on startup while any unpacked extension is loaded. That is Chrome's standard notice for extensions installed outside the Web Store, not a problem with this one.

Coverage

What it finds

Anything that paints an SVG, not just the ones sitting in the DOM as markup. It scans iframes too, and drops duplicates so a repeated icon shows up once.

Inline <svg>

Icons rendered directly in the DOM

Images and objects

<img>, <object> and <embed> pointing at an SVG file

CSS images

background-image, border-image-source and list-style-image

Masks

mask-image and -webkit-mask-image, including raw unencoded data URIs

Pseudo elements

The same properties on ::before and ::after

Data URIs

url("data:image/svg+xml,..."), decoded back to markup

Sprites

<use href="#id"> targets are pulled into the copied markup

Cross origin files

Icons served from a CDN on another domain are fetched, not just previewed

Using it

Click a card to copy

That is the whole flow. For anything you can see but cannot find in the list, press P and pick it off the page itself.

arrow · 24×24 star · 24×24 heart · 24×24 layers · 24×24 bolt · 24×24 globe · 24×24

That outline is the picker. On a real page you start it with P, it follows your cursor, and a click copies the SVG inside it.

  • Copy formatThe SVG / URI / JSX switch at the top of the panel decides what clicking a card copies: raw markup, a data:image/svg+xml,... string for CSS, or React ready JSX with camelCased attributes. The picker copies in whatever format the switch is set to.
  • Card actionsHover a card for three more: Copy the markup, Download it as a .svg file, or Show on page, which scrolls to the element and flashes an outline around it.
  • Inline computed stylesWrites the browser's resolved fill, stroke and opacity onto elements that got their color from a stylesheet, so the icon still looks right once it leaves the page. Turn it off for the untouched original markup.
  • BulkCopy all copies every visible SVG in one block, each with a name comment. Download all saves them into Downloads/svg-grabber/.
  • ShortcutsP starts the picker, Esc cancels it, / jumps into the filter field.

Permissions

Nothing is sent anywhere

No analytics, and no network call other than fetching the SVG file you asked for.

  • activeTab, scriptingRead the page you are looking at, only when you click the icon. Nothing runs in the background on other tabs.
  • downloadsSave files.
  • storageRemember your copy format and toggles.
  • host_permissionsFetch SVG files that live on a different domain than the page, for example a CDN. Without it, cross origin icons could be previewed but not copied.

Limits

What it will not do

  • Chrome blocks all extensions on chrome:// pages, the Web Store, and other browser pages
  • Icons drawn with an external <use href="sprite.svg#id"> copy as a <use> reference. The referenced file itself is usually listed separately in the panel
  • Canvas rendered or font based icons are not SVGs and will not appear
  • SVGs referenced from CSS are only found on the first 8000 elements of a page. On a very large page anything past that is missed, but the picker still works anywhere you click