SVG Generator

This is a self-rendering SPA that will generate a placeholder image for most requirements in web development

A sample application has been deployed at https://dynamic-svg.web.app/

Use the following format in the URL to generate an SVG:

https://dynamic-svg.web.app/widthxheight/bgColor/fgColor/text

Examples

• /400x100/fff/333/logo - Generates a 400x100 SVG with a white background, charcoal text "logo".
• /300x100/steelblue/white/test - Generates a 300x100 SVG with a steel blue background, white text "test".
• /200x100 - Generates a 200x100 SVG with default colors and text "200 x 100".
• /300 - Generates a 300x300 SVG (square) with default colors and text "300 x 300".
• /64/green/green - Generates a 64x64 SVG with a green background, no visible text.

NB The text font size will scale from 8 - 24 based on the available space inside the image

Module

lib/generator.js

The module is a single class that returns an svg image and mimeType.

import { SvgGenerator } from "@nexustech/svg-generator";

const { svg, mimeType } = new SvgGenerator("200x100", "f00", "white", "Hello+World");

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100"><rect width="200" height="100" fill="#f00"/><text x="50%" y="50%" fill="white" font-family="Arial" font-size="24" dominant-baseline="middle" text-anchor="middle">Hello World</text></svg>

Expected usage is in your own application/API where you need to render placeholder images and don't want to expose your app to the tracking and other issues associated with remote image generators.

Example in Express

image.ts

import { SvgGenerator } from "@nexustech/svg-generator";
import { Request, Response, Router } from "express";

// Route /image
export const image = Router();

image.get("/:dimensions/:bg?/:fg?/:text?", (req: Request, res: Response) => {
  const { dimensions, bg, fg, text } = req.params;
  const { svg, mimeType } = new SvgGenerator(dimensions, bg, fg, text);
  res.setHeader("Content-Type", mimeType);
  res.send(svg);
});

index.ts

import { image } from "./image";
import express from "express";
// ...other imports

const app = express();
// ...middleware

if (!isProd) app.use("/image", image);
// ...other routes

app.listen(port, function () {
  logger.info(`Listening on ${host}:${port}`);
});

Then you can call your own backend for a placeholder image using /image/<width>x<height>/<bg-color>/<fg-color>/<text> or any other valid combination.

Unlike the demo app, using this in your own backend will respond with an image/svg+xml content response containing only the svg.

App Development

The repository contains both the module and the app, although they are packaged individually

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Project Setup

bun or yarn or npm; take you pick, they all do the same thing.

bun install

Compile and Hot-Reload App for Development

bun run dev

Compile and Package App

bun run build:app

Compile and Package Module

bun run build:module

Type-Check, Compile and Minify both

bun run build