WH

Webpage Svg Screenshots

Accessible screenshots of web pages

Taking a screenshot on a webpage illustrates and preserves the layout information with accompanying text, however, taking a screenshot where the content is primarily text implies a lost of useful information because you can no longer select the text nor zoom into the image without significant quality lost as is the case with most commonly used image formats such as png and jpeg.

One way to overcome this problem is to create a svg image out of the website screenshot, and such a tool to do this is available from this NPM module, dom-to-svg. There is a browser plugin which simplifies the use of this NPM module for Firefox or Chrome.

Use Cases

Searching for Information

A positive aspect of creating a screenshot of a website comes from the text search capabilities provided by the svg file format. Since svg is a non-binary file format, you can open up the svg in a text editor and find certain strings of text in the image relatively easy.

README.md Inline Svg

Consider a README.md file in a project folder which you want to include a visual, but you might not want to add in a separate image file in the repository to promote the cleanliness of the folder contents. Directly copying the contents of the svg image inside the README.md would be a viable option using a svg image.

Tutorial Walk Thru

Taking screenshots of web applications is a well suited use case for svg images as most interfaces feature only a few colors with simple geometries.

Notes

Not only are the text preserve in the screenshots, but urls too.

Be wary of taking a svg screenshot where the content contains a photographic/scenery image, because there will be too many details for the browser extension to handle which will result in a locked up browser.