The Power of SVG in Django Templates- Storing Image Recipes Instead of Baked Images

Web developers spend an ungodly amount of time compressing, converting and manipulating images.

But like a cake out of the oven, once it's been baked – there's only so much you can do. (Editor's note: I recommend eating it)

Wouldn't it be nice if you could store the recipe for an image and then allow the browser to render it based on the usage, dimensions and even colorization that the usage requires?

Enter: SVGs

SVG stands for Scaleable Vector Graphic and is a text-based format for storing vector image data.

SVGs have been around since 2001. Initially, browser support was slow to catch on. But now, they're supported everywhere.

For Django developers

Use the 'include' tag when using SVGs in Django templates

Its that simple. Just use include to import the SVG file into your Django template.

This one pops up all the time in projects and I see different work arounds and methods to embed an image, use CSS background-replacement and all sorts of clever implementations.

But here's the thing to remember: SVGs are XML.

They are a natural fit for inlining with your html content. The overhead of using <embed> or <img> or another element isn't necessary.

Even better: you can target your inlined SVGs with CSS, and you are reducing a browser http request to fetch the image from the server.

Go forth and include !