gitmyhub

cappie

TypeScript ★ 1 updated 7d ago

Pick any element on a page and capture it as a real vector SVG or high-res PNG. Chrome extension.

Cappie is a Chrome extension that lets you pick any element from a webpage and export it as a crisp SVG or high-res PNG, perfect for design and marketing work.

TypeScriptChrome Extensiondom-to-svgsetup: easycomplexity 2/5

Cappie is a Chrome extension that lets you grab any element from a web page and save it as a vector SVG file or a high-resolution PNG. You might want a clean shot of a button, a card, or a section for use in marketing materials or design software. Instead of taking a flat screenshot of your whole screen, you pick the exact piece you need and export it in a format that stays sharp at any size.

The extension works by converting the picked element into real SVG shapes and text nodes. It does not rely on a rough screenshot trick, which means the result pastes cleanly into tools like Figma or Illustrator. Under the hood it builds on an existing library called dom-to-svg that handles the actual layout-to-SVG conversion.

To install it, you download a zip file from the release page and load the unzipped folder into Chrome's extensions panel with Developer mode turned on. It requires Chrome 116 or newer and works in any Chromium browser such as Edge, Brave, or Arc. A Chrome Web Store listing is planned but not available yet.

Using it feels similar to a browser inspector. You activate the picker with a toolbar icon, a keyboard shortcut, or a right-click menu. Hover to highlight what you want, click to select it, and use arrow keys to move up or down the page structure if you need a larger container. You can erase unwanted parts like cookie banners, remove the background for transparent layering, add padding, set a PNG scale from 1 to 10 times, or add a 3-second delay so you can open a menu before the shot fires. Pressing Enter saves an SVG, and Shift or Alt plus Enter saves a PNG at a chosen scale. Everything you capture is logged to a history page where you can re-download or delete items.

The extension embeds web fonts directly into the SVG so your text looks right in other tools. Cross-origin images are included when their host allows it. It cannot capture content inside cross-origin iframes, canvas elements, or video, and it will not run on internal Chrome pages.

Where it fits