Skip to content

SVG Generator

A lightweight tool for generating on-brand SVG marketing assets — banners, social cards, posters — from a single headline. A kept v1 feature: served by Next.js, backed by Express.

Served by Next.js, backed by Express

The page lives at /svg (web/src/app/(shell)/svg/page.tsx → web/src/legacy/pages/SvgGen.tsx). /api/svg/* calls are proxied to the Express server (:3001).

UI: web/src/legacy/pages/SvgGen.tsx (route: /svg) API: server/src/routes/svg.ts (proxied from Next.js)

Formats

Format Dimensions Typical use
Banner 1200 × 630 Open Graph / LinkedIn / Twitter previews
Square 1080 × 1080 Instagram posts
Portrait 1080 × 1350 Instagram portrait / Pinterest

Flow

sequenceDiagram
    User->>UI: enter headline + pick format
    UI->>API: POST /api/svg/generate
    API->>Brand: loadGuidelines() — colors, typography
    API->>Render: build SVG with brand tokens + escaped text
    API-->>UI: SVG blob
    UI->>User: live preview + download

API

POST /api/svg/generate
Content-Type: application/json

{
  "headline": "Ship faster with AI",
  "format": "banner",            // banner | square | portrait
  "subtitle": "(optional)",
  "ctaLabel": "(optional)"
}

Returns the SVG document directly (Content-Type: image/svg+xml).

Brand integration

loadGuidelines() pulls the active brand kit:

  • Primary background color
  • Heading typeface
  • Accent color (used for the underline / CTA pill)
  • Logo position (if a logo is uploaded under Brand Kit)

Text content is HTML-escaped before being inserted into the SVG to avoid markup injection.

Why SVG (not PNG)

  • Resolution-independent — same file scales to social previews or print
  • Tiny file size
  • Editable in Figma / Illustrator if a designer wants to tweak

If raster output is needed, the SVG can be converted client-side with canvas or server-side with sharp.