How to View SVG Thumbnails in Windows Explorer

[Cindra]

If you’re a graphics designer, illustrator, web designer or have worked extensively with XML code and/or HTML code, you might be familiar with Scalable Vector Graphics. SVGs are vector image types that have been around for nearly eighteen years now, and yet, they don’t seem to have proper Windows support. You cannot open a SVG file in any of Windows’ stock image viewers (like Windows Photo Viewer) nor edit them in applications such as Paint.

Unlike rasterized images or raster graphics which are made up of dots and pixels, vector images are code-based and made up of a collection of mathematically placed curves, dots, shapes and texts. This is why they can be resized without losing quality. Applications like Paint and Windows Photo Viewer were intended to view and edit raster graphics, not vector graphics. Handling vector images can be quite tricky, and even Paint 3D doesn’t have support for most vectors.

While there are several applications you can use to create vector images, sometimes you just need a viewing solution and not a full image editor.

Here are a few ways to view SVG files in Windows.

Using SVG Viewer Extension

The SVG viewer extension for Windows is a shell extension that enables Windows File Explorer to render SVG thumbnails.

There is a 32-bit version and a 64-bit version. Before downloading the extension installation software, make sure you know your computer and operating system architecture. If you’re inclined, you can also view the source code.

1. After you’ve downloaded the necessary setup file, navigate to it in Windows Explorer and run it. Since the publisher is pretty obscure or unknown, Windows will warn you against running it. Click on “Run” and/or “Yes” on the next screen.

2. Once the setup is running, click on the next button on the setup welcome screen.

<img class="aligncenter size-full wp-image-278533" title="svg-setup-window" src="https://imgcdn.maketecheasier.com/2018/10/svg-setup-window.png" alt="svg-setup-window" />

3. Read through the agreement on the next screen, and if you’re happy with it, click on the “I accept the agreement” radio button, then click on the “Next” button.

4. Choose the destination folder. I suggest you leave it as it is and click on next.

<img class="aligncenter size-full wp-image-278534" title="svg-setup-window-destination-screen" src="https://imgcdn.maketecheasier.com/2018/10/svg-setup-window-destination-screen.png" alt="svg-setup-window-destination-screen" />

5. The final screen allows you to review the installation details. If you’re happy with them, you can click on “Install.”

Testing the extension and viewing/organising your files

1. Go to a folder where all or a bunch of your SVGs are located.

<img class="aligncenter size-full wp-image-278535" title="svg-setup-file-explorer-view" src="https://imgcdn.maketecheasier.com/2018/10/svg-setup-file-explorer-view.jpg" alt="svg-setup-file-explorer-view" />

2. Ensure that you’re viewing them as large or extra-large icons (as opposed to a list or details).

A handy keyboard shortcut for this is Ctrl + Shift + 2.

<img class="aligncenter size-full wp-image-278536" title="svg-setup-file-explorer-view-large-icons-min" src="https://imgcdn.maketecheasier.com/2018/10/svg-setup-file-explorer-view-large-icons-min.png" alt="svg-setup-file-explorer-view-large-icons-min" />

What you’ll notice about the thumbnails is that for every thumbnail there is another thumbnail embedded inside (thumbnailception). This is my favourite aspect of this shell extension. Not only does it show you the thumbnail of the SVG, but it also shows you the default application used to open it.

Final Word

In the future I hope Microsoft gives native support to SVGs or that someone at least develops a codec that enables us to view SVGs natively. Until then, we can always use this shell extension in unison with our browsers.