LoginSign up for free
LoginSign up for free

Make vector images with the web

Written by Andy Fitzsimon

Published on Nov 10, 2021

I'm about to share my favorite front end performance trick: Server-side web-to-SVG generation.

Firstly, this isn’t your usual SVG tutorial. Instead of dealing with SVG elements, we're going to be dealing with plain 'ol HTML/CSS with your typical front end techniques.

The results will be self-contained and cache-able SVG files that you can use anywhere an image can be placed. If you think we're talking HTML in SVG via foreignObject.. we're not. This is a whole new frontier of magic. .

Secondly, these aren't your usual set-and-forget SVG files. They'll be active GET requests which can update dynamically via changes to the URL.

Enter which is our hero of the day. With you can host your web project and interface with it via GET or POST to generate different media formats. Effectively making your designs have their own API endpoint. AMAZING!

Here's an example:[width]=800&customSize[unit]=px&customSize[height]=500&postProcessing[optimize]=true&data[text]=testing%20this%20SVG

Copy and paste that into your browser and see what happens.

See the URL of that image? You can change the name value and you'll change the text value.

Look at little deeper and you'll notice something special. A web font is nowhere to be found, it's all SVG paths. Meaning we just saved a HTTP-request and a boatload of never-used path data.

What's more interesting is the source template for this project is using a CSS styled <div> not SVG <text> or a <ellipse>.... It’s also randomly rotated when you change the text… Why is that I hear you think ? Well here’s the real source code:

What are the benefits here?

There are so many benefits it’s crazy to think about.

One is the reliability of SVG’s static layout. What used to be a web layout beholden to the client’s browser and device, is now locked in place within an image so you don’t have to worry about content reflow or other nasty things that vary device to device. You can escape glitches caused by browser extensions and more. Your 1px borders will proportionally scale with your content and not jitter as they alias and go off grid.

And yes you can still do responsive image techniques simply by changing the geometry within your image url. It’s like container queries with no polyfills.

Two is that the compute side of rendering is taken care of. Now your browser just has to paint (and it's crisp infinite quality vector). conflicting libraries are a thing of the past as these images are their own micro-environment.

Three is wildly liberating. Think of all those bodies you can bury behind the scenes without your end user having to worry about them.

  • Was D3 too slow with your data? Now it'll be easier to draw.
  • Was your web font family just huge in file size? Now you'll only get path data of what is actually used.
  • Don’t want nosy visitors looking under the hood? Now they have no idea how the sausage was made.

Four, you can go meta. SVG within SVG to make one optimized SVG. One image request for all your images in a given layout. This is great for those social proof logo bands, for co-branding and even for spot illustrations that need some sort of pre-composition. You’ll turn multiple http-requests into one while retaining a level of abstraction that let’s you do powerful styling and layout.

A story about logos.

Once upon a time I enjoyed being a global brand manager at Red Hat.

I worked on a killer team alongside legends like Paula Weigel who was deeply involved in strategic naming of products/initiative (among many other things).

One of the more laborious tasks after coming up with a name was producing all the logo lockups.

  • eps files for print
  • svg files for digital
  • png files for email

And then there are all the variations: dark text, white text, one color, full color, grey etc ... One logo lockup would become at least 15 files and that’s assuming there aren’t derivative logos like event city or product variant.

With this technique you can get them all for free by setting up your template once.

Check that out, the same URL with minor changes gets you any file you need.

The Make compression flag runs the right process for the right format:

  • SVGO when you have svg format set
  • Optipng when you have png set
  • Zip when you have EPS set

I hope you’ve learned a lot about server side vector image rendering.

Privacy & Security PolicyTerms of Service