Copy as SVG

Right-click any SVG on a page and copy its source code to the clipboard, ready to paste into Figma, Illustrator, or your editor.

This extension adds a "Copy as SVG" option to the right-click menu that appears only when the cursor is over an SVG graphic. One click puts the full SVG source code on the system's clipboard, ready to paste into Figma, Adobe Illustrator, After Effects, VS Code, or any tool that accepts SVG markup. A small confirmation toast also offers a "Download .svg" button. ■ What it detects!? • Inline SVG elements, including icons and charts • SVG images embedded with img tags, both files and data URIs • SVGs loaded through object and embed tags • SVGs used as CSS background images • SVGs inside iframes and shadow DOM (web components) ■ How to use? 1. Right-click any SVG graphic on a webpage 2. Choose "Copy as SVG" and the SVG will be copied to clipboard* 3. Paste into any app or environment that supports pasting of SVG files (Figma, Illustrator, After Effects, VSCode, etc.) *Note: You can also click "Download .svg" in the confirmation toast to save the copied SVG as an .svg file. ■ Why and how this extension works? Most SVGs on the web depend on their page to look correct: colors from stylesheets, currentColor, icon sprites referenced from elsewhere. Copy raw markup and you often get a black shape or nothing at all. Copy as SVG fixes this automatically: • Computed styles such as fill, stroke, and opacity are baked into the copy, so a blue icon stays blue after pasting • Sprite references (use elements) are resolved and embedded, whether the symbol lives on the same page or in a separate sprite file • Missing width, height, and viewBox attributes are filled in from the rendered size, so design tools import at the correct dimensions • Script tags inside SVGs are stripped for safety