Unleash your creativity output with SVG templates

Generate thousands of custom graphics from any SVG template with a simple script

As marketing campaigns become more personalized, designers have the opportunity to have a big influence on the quality of the message.

Mode’s marketing team is pushing the boundaries of what it means to deliver a compelling message that provides value to our audience. As part of a recent initiative, the design team explored how we could create interesting visuals that the sales team would attach to emails sent to potential customers. The challenge was: how could we scale the process to thousands of assets, without any engineering resources, and in less than a week?

Here is a sample of what we wanted to achieve: a visual summary of the tech stack potential customers were using and how Mode would fit in perfectly. This would demonstrate our deep understanding of their world and how we could help them.

Sample of the email graphic template for Spotify

We have sent more than 3,000 of these emails so far. If this were to be done manually, it would have taken over 10 full days of a designer’s time. This calculation is based on the assumption that it takes 5 minutes to make a graphic…. Which is very optimistic…. You get the point.

I believe that designers can be problem solvers beyond just their craft. I jumped in to see how I could create an SVG template exported from Sketch to generate thousands of custom graphics. I’ll spare you the journey to get there, and instead will walk you through a simple example so you can follow along and understand the key steps to make it work for your own needs.

Wait. Do I need to know how to code?

No. The following content doesn’t require any previous knowledge of programming, just a willingness to explore the opportunities that simple scripts (in this case in JavaScript) can offer designers, or anyone who needs to generate a ton of custom graphics.

Try it out!

Put your engineering hat, code is coming. Don’t be afraid–if you follow the instructions, you should get through the example.

• Download the project’s zip from Github, uncompress it, and save it on your desktop
• Open the folder in a code editor. I like Atom. VS Code is also great.
• Open the Terminal app on your computer. We’ll run the script from there.
• Type cd desktop/design-svg-template/script, then hitEnter. We are just going to the script folder here.
• Enter npm install. This will install a few things you’ll need for this project)
• Enter npm run render. This command tells our script to run to render the assets based on the given input. If you never played with code on your computer you need to follow these extra steps.
• You should now see 10 SVG files rendered in the output folder.

Note: let me know if you have any trouble to get here. I’ll try to help you as much as possible in the comments.

An example of custom graphic generated by the script

So what happened?

Let’s do a tour of the project folder

• index.js: this is the file where all the logic lives.
• input folder: You need a few things to make this script work
• template.svg: this is the file you export from Sketch with the design you want. I recommend putting dummy data so that it’s easier to find and replace it in the code.
• data.json: this is the file where you put all the information you want to be populated in your template for each file generated. Read more about how JSON files work in another post I wrote.
• images folder: if your template uses images you can put them here
• output folder: if everything goes well, this is the place where the generated files will live.
• template.sketch: I joined the Sketch file I used for the template so you can start from there if you want. As you see nothing special, just keep your file simple so you don’t get drowned in the code later on when you need to add your variables.

Key steps to create your own template

Here is the full code of the starter script for reference:

const fs = require('fs');
const path = require('path');
const _ = require('lodash');
const data = require('./input/data');

const results = data.map(async (person, index) => {
  const {
    name,
    title,
    company,
    id,
    color,
  } = person;

  const template = await fs.readFileSync(path.resolve(__dirname, 'input/template.svg'), 'utf8');
  const image = await fs.readFileSync(path.resolve(__dirname, `input/images/${id}.jpg`), 'base64');
  const createTemplate = _.template(template);

  const output = createTemplate({
    name,
    title,
    company,
    image: `<image id="avatar" width="256" height="256" xlink:href="data:image/png;base64,${image}"></image>`,
    color,
  });

  const response = await fs.writeFileSync(`output/${name}.svg`, output, 'utf8');
});

Promise.all(results).then(() => console.log('Done!'));

The most important part is to replace elements of your template you want to be custom by variables, such <%= name %> in the example.

Make sure each variable name is present as the key in the JSON file, as well as in the index file. For instance:

index.js

const {
 name,
 title,
 company,
 id,
 color,
 } = person;

input/data.json

{
   "id": 1,
   "name": "Field Dybald",
   "company": "Roodel",
   "title": "Sales Associate"
}

The image variable is a bit different because we are dealing with a file instead of text. I’m sure you’ll figure it out looking at this example.

input/template.svg

const output = createTemplate({
    name,
    title,
    company,
    image: `<image id="avatar" width="256" height="256" xlink:href="data:image/png;base64,${image}"></image>`,
    color,
  });

By the way, I used Mockaroo to generate the content for this demo. Check out my post on how to use it with Sketch.

Well done!

If you’ve reached this point, that means you either followed all the steps listed above, or at least scanned them. You should now be more confident than ever and inspired to push the boundaries of designing at scale in your own journey.

Please ask away all the questions you may have so I can improve this post for you and the community.

What’s next?

To keep it short, I didn’t mention how you could convert the rendered SVG files into PNG, or how you could quickly and easily host your assets for free, so that you could share them with anyone. If interested, let me know and I can write follow up posts.

Until then, thanks for reading and happy devigning!