---
My interest in SVG (Scalable Vector Graphics) files have suddenly spiked recently after finding out a few interesting bits:
- Wide support - It's a graphics format supported almost all modern browsers
- File size - In some cases, file size and quality can be dramatically smaller than other graphics formats, even before compression tools are applied (as discussed below)
- PDF alternative - With embedded fonts and links. Can work with in-line text that can be copied like a document.
- Mostly open format with some occasional incompatibilities across viewers and editors. For example, as of a few years ago, Firefox handled SVG files better than other browsers.
Note that this add-on doesn't capture standard images, just text and (I believe) SVG images.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.
SVG compression
Tools and suggestions on the topic -- with some time and skill you can cut an SVG image WAY down
https://lizsscribbles.com/drawing-forma ... ssion.html
Oddly, there doesn't appear to be a standard, zip-compressed SVG format ala SVGX or SVGZ. There's a server-side option but nothing client-side the way DOCX files have in-line zip compression https://www.moxio.com/blog/6/serving-co ... -svg-files .. this is a problem because the size difference between some SVG files I tested with basic zip compression was between 10-30% of the original.
Portable program support
- LibreOffice - Opens and saves SVG but had mixed results in the way of edits. For example, I couldn't modify the text in an SVG file the way I'm able to in a PDF.
- BlueGriffon - has an inline editor but I wouldn't bother with it. I remember testing this years ago and was really impressed but my checks today saw a really basic, buggy image editor.
- Inkscape - a very strong editor that also appears to have a really solid standard image to SVG converter: https://designbundles.net/design-school ... n-inkscape
- FileOptimizer - didn't seem to affect the file size in those SVG files I tested. This is notable because I was starting to wonder what files this program DIDN'T shrink
- FreeCad - untested
Other programs
- SVGCode conversion - thanks to Andrew
- Draw.io - great Visio alternative
Problems
It's not all golden: there are some pitfalls to the format, including SVG gzip compression issue mentioned above. It's mostly about fonts.
You also shouldn't use it for content where text is obscured as layers can be separated and recover redacted text.
Related thread