https://github.com/felixfbecker/svg-screenshots

📸🧩 Browser extension to take scalable, semantic, accessible screenshots of websites in SVG format.
https://github.com/felixfbecker/svg-screenshots

accessible browser-extension chrome chrome-extension firefox-addon semantic svg

Last synced: about 1 month ago
JSON representation

📸🧩 Browser extension to take scalable, semantic, accessible screenshots of websites in SVG format.

• Host: GitHub
• URL: https://github.com/felixfbecker/svg-screenshots
• Owner: felixfbecker
• Created: 2020-09-04T09:41:51.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-06-01T00:35:55.000Z (3 months ago)
• Last Synced: 2024-07-03T14:56:31.827Z (2 months ago)
• Topics: accessible, browser-extension, chrome, chrome-extension, firefox-addon, semantic, svg
• Language: TypeScript
• Homepage:
• Size: 2.94 MB
• Stars: 804
• Watchers: 9
• Forks: 29
• Open Issues: 36
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# SVG Screenshots Browser Extension

[![Chrome Web Store](https://img.shields.io/chrome-web-store/v/nfakpcpmhhilkdpphcjgnokknpbpdllg?logo=google-chrome&logoColor=white)](https://chrome.google.com/webstore/detail/svg-screenshot/nfakpcpmhhilkdpphcjgnokknpbpdllg)

[![Firefox Add-on](https://img.shields.io/amo/v/svg-screenshots?logo=firefox&logoColor=white&label=firefox+add-on)](https://addons.mozilla.org/en-US/firefox/addon/svg-screenshots/)

[![main build status](https://img.shields.io/github/actions/workflow/status/felixfbecker/svg-screenshots/build.yml?branch=main&label=main&logo=github)](https://github.com/felixfbecker/svg-screenshots/actions?query=branch%3Amain)

[![release build status](https://img.shields.io/github/actions/workflow/status/felixfbecker/svg-screenshots/build.yml?branch=main&label=release&logo=github)](https://github.com/felixfbecker/svg-screenshots/actions/build.yml?query=branch%3Arelease)

![license: MIT](https://img.shields.io/github/license/felixfbecker/dom-to-svg)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/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:

- [Chrome](https://chrome.google.com/webstore/detail/svg-screenshot/nfakpcpmhhilkdpphcjgnokknpbpdllg)

- [Firefox](https://addons.mozilla.org/en-US/firefox/addon/svg-screenshots/)

## Examples

These full-page SVG screenshots were taken with the browser extension:

![Google](examples/google.svg)

![Hacker News](examples/hackernews.svg)