felixfbecker / svg-screenshots

πŸ“ΈπŸ§© Browser extension to take scalable, semantic, accessible screenshots of websites in SVG format.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SVG Screenshots Browser Extension

Chrome Web Store Firefox Add-on main build status release build status license: MIT semantic-release

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:

Google

Hacker News

About

πŸ“ΈπŸ§© Browser extension to take scalable, semantic, accessible screenshots of websites in SVG format.


Languages

Language:TypeScript 87.4%Language:HTML 7.3%Language:CSS 3.6%Language:JavaScript 1.3%Language:Shell 0.4%