Take scalable, semantic, accessible screenshots, in SVG format.

Latest Version

Version

0.11.5

Update

May 23, 2021

Size

511KiB

Developer

SVG Screenshot Extension

SVG screenshots offer various benefits over normal PNG screenshots, while keeping the good parts:

🖼 Flexible: Freely select the region of the website you want to capture or capture the whole page.
💢 Scalable graphics: Screenshots never get pixelated when zooming in.
📝 Semantic: Text can still be selected and copied to clipboard.
🦻 Accessible: SVG is annotated with ARIA attributes and can be read by screen readers.
🖥 Paste into design tools: SVGs will work in design tools like Illustrator, Figma, Sketch etc.
🔗 Interactive: Links are still clickable.
📦 Self-contained: Inlines external resources like images, fonts, etc.
📸 Static: Styles and layout are recorded at the time of snapshot and will not change.
🗜 Small: Depending on the content, SVGs can be magnitudes smaller than PNGs and compress loslessly.
🛡 Secure: The SVG will not contain any JavaScript.

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 2, "name": "SVG Screenshot", "description": "Take scalable, semantic, accessible screenshots, in SVG format.", "version": "0.11.5", "permissions": [ "activeTab", "", "storage" ], "icons": { "128": "images/icon_128.png", "256": "images/icon_256.png" }, "web_accessible_resources": [ "src/content.js" ], "browser_action": { "default_popup": "src/popup.html", "default_title": "Capture SVG screenshot", "default_icon": { "128": "images/icon_128.png", "256": "images/icon_256.png" } }, "background": { "scripts": [ "src/background.js" ] }, "browser_specific_settings": { "gecko": { "id": "svg-screenshots@felixfbecker" } }}

Download CRX(511KiB)

Similar Extensions

SVG Screenshot Extension · Photos 7,000+ 7 ★ 14.85KiB

CSS Used Extension · Developer Tools 7,000+ 184 ★ 164KiB

SVG Export Extension · Productivity 7,000+ 211 ★ 316KiB

Photo to Vector Capture from VectorDad Extension · Photos 7,000+ 4 ★ 56.07KiB

Placeholdifier Extension · Developer Tools 7,000+ 6 ★ 17.41KiB

HTML to Figma - by Builder.io Extension · Productivity 7,000+ 46 ★ 343KiB

Image Vectorizer (Convert to SVG) Extension · Productivity 7,000+ 2 ★ 62.65KiB

Refined GitHub Extension · Developer Tools 7,000+ 213 ★ 572KiB

VisBug Extension · Developer Tools 7,000+ 252 ★ 5.38MiB

SVG Gobbler Extension · Developer Tools 7,000+ 95 ★ 1.18MiB

SVG downloader Extension · Productivity 7,000+ 62 ★ 68.46KiB

Amino: Live CSS Editor Extension · Developer Tools 7,000+ 453 ★ 1.45MiB

Export SVG with Style Extension · Productivity 7,000+ 42 ★ 21.41KiB

Free SVG for Google Chrome™ Extension · Productivity 7,000+ 3 ★ 271KiB

Element to Figma Extension · Productivity 7,000+ 1 ★ 197KiB

HTML Elements Screenshot Extension · Productivity 7,000+ 29 ★ 147KiB

Download svg Extension · Productivity 7,000+ 7 ★ 1.03MiB

Hoverify Extension · Developer Tools 7,000+ 145 ★ 14.54MiB

Motion DevTools Extension · Developer Tools 7,000+ 8 ★ 788KiB

SnipCSS Extension · Developer Tools 7,000+ 32 ★ 13.12MiB

Omni - Bookmark, History, & Tab Manager Extension · Productivity 7,000+ 63 ★ 1.91MiB

Canvas downloader. Find and export. Extension · Productivity 7,000+ 19 ★ 192KiB

html.to.design Extension · Productivity 7,000+ 72 ★ 333KiB

CSS To Tailwind Extension · Developer Tools 7,000+ 22 ★ 182KiB

User reviews

Daniel (ID: 0000009589720578) Voted 2 ★ - Updated 06/06/2023 Fonts are saved wrongly. Tried to take a screenshot of the macOS Sonoma site (https://www.apple.com/macos/sonoma-preview/) and it saved it in a different font. How to get around this?

Morteza Razavi (SMR) (ID: 00000040b2a32faf) Voted 4 ★ - Updated 11/20/2022 The concept is excellent, but the execution falls short; it could be so much better. For one test, I received a 400KB svg output, which wasn't too bad. However, there are several garbage attributes in svg that have no influence on svg output. I was able to decrease a 400KB svg file to a 1KB svg file by using the svgo tool and manually removing attributes. I'm hoping you can also work on optimization. Thank you once more.

Nick Jameson (ID: 000000f4f49c0a13) Voted 5 ★ - Updated 08/02/2022 OMG, blew my mind. Worked on localhost and with a screen selection. Does not capture dropdown menus for me, but does the root page exactly!

Ruben (ID: 0000002e4b82cc47) Voted 5 ★ - Updated 05/05/2022 Perfect tool when it worked, sadly not working any longer.

Juan Alvarez (ID: 0000004436fb8c80) Voted 5 ★ - Updated 12/11/2021 Amazing extension!

Get source code (.Zip)

Drop .crx file here or click
the button to choose the file

SVG Screenshot