DEV Community

Cover image for Making SVG social-media templates rebrandable in 6 lines with CSS classes
FounderPrompts
FounderPrompts

Posted on

Making SVG social-media templates rebrandable in 6 lines with CSS classes

#svg #css #design #webdev

Ko-fi: https://ko-fi.com/s/45e7f1ce3e

I just shipped a pack of 28 social-media templates (square posts, vertical stories, a carousel) and made one deliberate engineering decision: each template is a plain .svg whose entire color scheme lives in a single <style> block. Rebranding all 28 files means editing six hex values. The technique works for any SVG you want a non-designer to recolor.

The problem with "editable" templates

Most packs ship flattened PNGs, or .canva links you can only edit inside one tool. Want to change the brand color? You're hunting through every layer in every file. And AI image generators give you something that looks fine once but has zero consistency across a set.

Color tokens, but in SVG

SVG supports an internal <style> with CSS classes. So instead of fill="#FF6B5C" scattered across hundreds of nodes, every shape references a semantic class:

<style>
  .bg      { fill: #FFF6F0; }  /* fondo */
  .accent  { fill: #FF6B5C; }  /* color principal */
  .accent2 { fill: #FFB23E; }  /* secundario */
  .ink     { fill: #2B2B36; }  /* titulares */
  .muted   { fill: #8A8A99; }  /* texto apoyo */
  .onacc   { fill: #FFFFFF; }  /* texto sobre acento */
  text     { font-family: 'Poppins','Inter',sans-serif; }
</style>
...
<rect class="bg" .../>
<circle class="accent" .../>
<text class="ink">Hazlo con miedo, pero hazlo.</text>
Enter fullscreen mode Exit fullscreen mode

Change .accent once and every button, badge and blob in the file updates. Because the class names are identical across all 28 files, the same six-line swap rebrands the whole pack. I ship two alternate palettes as ready-to-paste blocks.

Keep text as text

The other rule: never outline the type. Every headline is a real <text>/<tspan> node, so the buyer edits copy by changing the string — and it stays editable in Canva (Pro import), Figma, Inkscape or Illustrator. Fonts are Google Fonts (Poppins / Inter / Caveat, OFL) referenced with @import so a renderer loads them correctly.

Rendering to PNG

For the "ready to post" PNG that sits next to each SVG, I render with Playwright: load the SVG into a Chromium page that @imports the fonts, await document.fonts.ready, screenshot at the exact size (1080×1080 for posts, 1080×1920 for stories). Same pipeline gives pixel-exact output at any size.

Why I built it

The copy is all in Spanish — the pack targets Spanish-speaking small businesses and creators, an audience underserved by the English-first template world. But the SVG-as-design-system technique is language-agnostic; steal it for your own brand kit.

If you want the finished pack (28 templates, SVG + PNG, the two extra palettes, a usage guide), it's $1 on Ko-fi: https://ko-fi.com/s/45e7f1ce3e

How do you keep a set of graphics on-brand — design tokens, a Figma library, something else?

Top comments (0)