SVG images in Perch

One of the enhancements we’ve made in Perch 2.4.5 is to add support for SVGs to the image field type.

If you’re not familiar with SVG, it stands for Scalable Vector Graphics, and it’s a line-art format based on XML. That is to say, instead for storing a grid of coloured pixels, SVG stores the vectors required to plot lines and shapes to make up the image. They’re a vector format (like Illustrator files) rather than a bitmap format (like Photoshop).

Browser support for SVG is pretty good these days, and because it’s a vector format, they’re sharp at any resolution, and unless they get really complex, they’re small in file size too. They good for resolution-independent icons, logos and that sort of thing.

From a Perch point of view, it’s not massively common that you’ll be adding SVGs as content into your CMS. Unlike bitmap formats like JPG, clients won’t be routinely generating new SVGs that they want to add to their sites. But they still exist, and are becoming more widely used, and so Perch now supports them.

Uploading an SVG file is much the same as uploading a JPG. Perch will generate a thumbnail view, and you can use them at multiple sizes. A nice side effect of SVGs is that Perch doesn’t generate multiple copies of the same file for different sizes. As the format is scalable, there’s no need. Perch uses the same resizing routines to keep your SVG displayed in the correct proportions, but reuses the original file each time. The only difference is that SVGs can be upscaled.

The best supported way of displaying SVGs in a browser is with a regular image tag.

<img src="logo.svg" alt="My logo" />

SVG data can also be added directly to your page, as it’s XML based. Perch enables this with the use of output="tag" and include="inline" on your tag.

<perch:content id="logo" type="image" label="Logo" output="tag" include="inline" width="400" />

This is all just an initial implementation, and it may be that there’s ways we can improve it to fit your workflow. If you use SVG images in your projects, we’d appreciate your feedback.