svg-screenshots
πΈπ§© Browser extension to take scalable, semantic, accessible screenshots of websites in SVG format.
Stars
807
Ecosystems:
Chrome,
Chrome extension
SVG Screenshots Browser Extension
Browser extension to take semantic, scalable, accessible screenshots of websites, as SVG - as simple as taking a PNG screenshot.
Why use this?
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 run any JavaScript.
Install
Install from the official extension stores:
Examples
These full-page SVG screenshots were taken with the browser extension:
Badges
Extracted from project README
