Web page screenshots with SVG

We explain how to generate web page screenshots in SVG format that are infinitely scalable while being over 10 times smaller in file size than a detailed PNG screenshot. SVG screenshots can be less than 20KB in size and will load instantly so they’re perfect for use as large, high quality landing page header images. The core trick is to use web browser to print to PDF the web page you want to screenshot, converting the PDF to a tiny optimised SVG image and then inlining the image data directly into your HTML.

Example

Landing pages for web apps often contain multiple large product screenshots so using SVG format for these images can be a useful trick for optimising page weight and cutting loading times. On our homepage, we use a large SVG screenshot for the header image that’s only around 12KB in size. This helps keep the entire page to around 0.3MB in size so it loads super fast even on mobile. See our landing page for a demo of this.

Why SVG instead of bitmaps for images?

The simplest way to take a screenshot of a web page is usually with a screenshot utility to capture a lossless PNG or lossy JPG image. Compared to these bitmap formats, SVG screenshots have several advantages when displayed on a web page:

• Tiny file size: A single high quality lossless bitmap screenshot to be displayed on a high density desktop screen can take around 0.5MB of space. This can be optimised using a lossy format like JPG with a lower quality setting but at the expense of detail.

  SVG files can be transferred to browsers without sacrificing any quality with a tiny overhead of around 0.05MB.

• Infinitely scalable: When you magnify a bitmap file on a page, it will start to become pixelated and exhibit visual artifacts so you usually have to find a balance between quality and file size.

  An SVG image can be magnified infinitely while still remaining crisp and high quality (assuming there’s no bitmap images embedded inside the SVG image).

• Responsive with less complexity: As large bitmap images add so much to page weight, it’s good practice to serve a lower quality bitmap image for mobile screens and higher quality ones for larger screens.

  SVG screenshots file sizes are so small you can generally serve the same image for all screen sizes. This reduces complexity.

• Can dynamically style and animate: SVG images can be dynamically styled and modified using a combination of CSS and JavaScript the same way you do with HTML. For example, you can change the colour of elements or modify text content to add animated elements to your screenshots to make them more visually interesting. This can be a lighter weight alternative to using GIFs or video files.

• Easy to modify in editors: SVG screenshots can be opened in any SVG editor and easily modified to save you the trouble of having to take new screenshots when small adjustments need to be made. For example, you can quickly change some text, hide elements you don’t need to show and resize components. This is generally much harder with bitmap screenshots when text, images, gradients and shadows have all been flattened into pixels.

How to take SVG screenshots

Now you know why SVG screenshots can be beneficial to your website, we’ll explain a method of taking web page screenshots in SVG format.

Step 1: Print the page to PDF

The first step is to get a PDF printout of the web page. We use Chrome for this but this can be done in Firefox as well:

1. Open in a browser: Open Chrome and visit the web page you want to take a screenshot of.

2. Disable print CSS media: If you try to print the page now, printer only CSS styles will be applied. This usually hides elements and changes colours on the page to make it more printer friendly.

   To fix this, go to View > Developer > Developer Tools, click the three dots in the top right corner, go to More tools > Rendering and set Emulate CSS media to screen. Keep the developer tools open for now or this setting change will be reverted.

3. Set screenshot size: By default, printouts will likely be A4 sized in portrait mode with thick margins. You can remove the margins and set a custom page size in pixels for your screenshot by adding this snippet of CSS to your web page, making use of the <code>@page</code> selector :

@media screen {
    @page {
        margin: 0;
        size: 1280px 800px;
    }
}

4. Print to PDF: To print the page, go to File > Print, make sure background graphics is ticked in the advanced settings so everything is printed, select Save as PDF and save the file somewhere. We’ll use the filename screenshot.pdf here.

Step 2: Convert the PDF to SVG

Now we need to convert the PDF we just generated into an SVG file. This can be done from the command-line using Inkscape by running this command in the same folder the PDF file is in (notice Inkspace expects absolute filenames):

inkscape --without-gui `pwd`/screenshot.pdf --export-plain-svg=`pwd`/screenshot.svg

Step 3: Optimise the SVG file size

The SVG output from Inkscape won’t be highly optimised and will likely contain redundant elements and parts that can be rewritten more concisely. You should always use an SVG optimiser before including SVGs on a web page to reduce file sizes. You can do this with svgo from the command-line:

svgo screenshot.svg

You can try to reduce the screenshot size further with more aggressive optimisation options such as with the --precision flag set to lower values but this can introduce visual issues if you’re not careful. There’s a useful online svgo tool that will let you visualise the impact different optimisation settings have.

Step 4: Add the SVG screenshot to your page

Now you can add your crisp SVG screenshot to your web page. How you include SVG images in web pages is way more complex than you’d expect with different pros and cons for each method. Some options including the img tag, object tag, iframe tag and inlining the SVG data into the HTML.

We tend to use the approach of inlining the SVG directly into the page. This involves directly pasting the <svg> tag as it appears in the SVG file into the HTML of a page to make the image show up. This method allows the image to be dynamically styled, eliminates a URL request and can avoid issues when custom fonts are used (covered next).

Custom fonts and other caveats

Unfortunately, there’s a few issues you need to be aware of when working with SVG screenshots:

• Custom fonts within screenshots: When SVG images include text that use custom fonts (this includes icon fonts), you have two main options for making sure fonts are rendered correctly:

  • <img> tag with embedded fonts: If you include your SVG file on a page with an <img> tag, you cannot load external font files for security reasons . You can either 1) embed the fonts into the SVG file as a base64 encoded string or 2) convert the text objects into regular SVG lines/curves using Inkscape or similar.

    Pros: Can include the SVG file knowing the font will alway be rendered correctly; image file can be cached between pages.

    Cons: Larger file size; font data won’t be cached.

  • Inlining with font loaded on page: If you inline your SVG image into the HTML of a page, the SVG can share fonts loaded on the current page.

    Pros: Font data will be cached.

    Cons: Care must be taken to load the correct fonts on the page for the image to render correctly; SVG data won’t be cached between pages

    We use this approach when caching isn’t a huge concern such as when an image isn’t used a lot between pages or when the image size is tiny.

• Bitmap images within screenshots: Be wary that any bitmap images that appear on the page you want a screenshot of will be embedded into the SVG screenshot as bitmap data. The bitmap parts won’t be infinitely scalable and will bloat the size of the SVG. To avoid this, you can try replacing the bitmap parts either before or after the screenshot is taken. For example, if you swap bitmap icons for SVG icons on your web page you’ll avoid bitmaps appearing in the SVG screenshot.

• Failures converting complex styles: The SVG generation method detailed has problems when some CSS styles are used. For example, the box-shadow CSS style and drop-shadow CSS filter don’t survive the conversion and will be missing from the SVG image. We don’t have an exhaustive list of these issues. An unsatisfying workaround for this is to add the missing visual effects back in manually using an SVG editor.

Some file size benchmarks

We give some data here on the page weight savings you could see using SVG over bitmap formats.

SVG optimisations

This example uses the SVG screenshot seen at the top of this page as a sample image which is fairly text heavy. The following table shows the file sizes for this image with and without converting the text to curves with Inkscape, after svgo optimising with precision set to two and after applying gzip (your web server should use compression with gzip or similar when sending SVG and HTML responses).

	SVG screenshot with text intact	SVG screenshot with text as curves
Original	140KB	676KB
After svgo only	52KB	208KB
After gzip only	16KB	116KB
After svgo + gzip	12KB	40KB

We see that svgo and gzip combined cut down the original SVG sizes by at least a factor of 10. As svgo is a one time cost when you deploy and server compression should always be applied on SVG data anyways, there’s little excuse for avoiding these huge savings.

We also see that avoiding custom font issues by converting the text to curves can more than double the final SVG size. However, 40KB for an infinitely scalable image is still impressive.

Comparison with PNG

The next table compares the optimised SVG file sizes to PNG versions at different resolutions. The PNGs were generated by converting the SVG files to PNG using Inkspace followed by optimising the PNGs with pngcrush on default settings.

	SVG screenshot with text intact (12KB)	SVG screenshot with text as curves (40KB)
Versus 640x400 PNG (72KB)	60KB saved (83% reduction)	32KB saved (44% reduction)
Versus 1280x800 PNG (108KB)	96KB saved (89% reduction)	68KB saved (63% reduction)
Versus 2560x1600 PNG (244KB)	232KB saved (95% reduction)	204KB saved (84% reduction)

We can see that compared to the large high quality PNG screenshot, SVG can reduce transfer sizes by around 90% with the savings getting bigger as more detail is required. Even compared to smaller PNG screenshots, the SVG version still reduces transfer sizes by a significant amount while being significantly higher quality. We also see that although converting the text in SVG files to curves does bloat the file size, we still see significant size savings compared to PNG.

Conclusion

You now have a way to generate SVG screenshots of your web pages using Chrome combined with Inkscape which are then optimised with svgo and server compression for tiny transfer sizes. This lets you show off multiple high quality and infinitely scalable screenshots on your pages with minimal impact on your page weight.