svgmap

readme.md

svgmap

TypeScript Types for representing an <svg> document.

install

yarn add svgmap

or

npm install svgmap --save

develop

⪼ npm run dev
⪼ node index > example.png
⪼ qlmanage -p example.svg 2>/dev/null

ref

• SVG 2 Specification
• <svg>
• <svg> elements

---

⪼ Made with 💜 by realpolyglot.com

example.ts

import { Svg, SvgElementType, TagName } from "./types"

export const example: Svg = {
  type: SvgElementType.SvgRoot,
  tagName: TagName.svg,
  attributes: {
    id: "Won Sign (U+20A9): God First",
    version: "1.1",
    viewBox: "0 0 350 350",
    width: "350",
    height: "350",
    "text-anchor": "middle",
    "font-family": "Times New Roman",
    style: "background-color: transparent important!;",
    xmlns: "http://www.w3.org/2000/svg",
  },

  children: [
    {
      type: SvgElementType.SvgChild,
      tagName: TagName.circle,
      attributes: {
        id: "badge",
        fill: "none",
        "fill-opacity": "0",
        stroke: "#000",
        "stroke-width": "21",
        "shape-rendering": "crispEdges",
        cx: "175",
        cy: "175",
        r: "155",
      }
    },

    {
      type: SvgElementType.SvgChild,
      tagName: TagName.text,
      value: "₩",
      attributes: {
        id: "unicode",
        "font-size": "15em",
        fill: "#000",
        x: "174",
        y: "255",
        dy: "0",
      }
    },

    {
      type: SvgElementType.SvgChild,
      tagName: TagName.text,
      value: "Wil Moore III",
      attributes: {
        id: "name",
        "font-size": "1.5em",
        fill: "#000",
        x: "175",
        y: "290",
        dy: "0",
      }
    },

    {
      type: SvgElementType.SvgChild,
      tagName: TagName.text,
      value: "wilmoore.com",
      attributes: {
        id: "domain",
        "font-size": "0.95em",
        "font-style": "italic",
        fill: "#000",
        x: "175",
        y: "305",
        dy: "0",
      }
    },
  ]
}

index.ts

import { svg } from "./lib"
import { example } from "./example"
console.log(svg(example).trim())

lib.ts

import { Svg, SvgElement } from "./types";

const attrs = (attributes: SvgElement["attributes"]): string =>
  Object.keys(attributes).map((key) => `${key}="${attributes[key]}"`).join(" ")

const render = (element: SvgElement): string => ("value" in element)
  ? `<${element.tagName} ${attrs(element.attributes)}>${element?.value}</${element.tagName}>`
  : `<${element.tagName} ${attrs(element.attributes)}/>`

export const svg = (svg: Svg): string =>
  `<svg ${attrs(svg.attributes)}>${svg.children.map(render).join("\n")}</svg>`

types.ts

export enum TagName {
  svg = "svg",
  circle = "circle",
  text = "text",
}

export enum SvgElementType {
  SvgRoot,
  SvgChild,
}

export type SvgElement = Svg | SVGCircleElement | SvgTextElement;

export type Svg = {
  type: SvgElementType.SvgRoot;
  tagName: TagName.svg;
  attributes: {
    id: string;
    version: string;
    viewBox: string;
    width: string;
    height: string;
    "text-anchor": string;
    "font-family": string;
    style: string;
    xmlns: string;
  }
  children: Array<SVGCircleElement | SvgTextElement>;
}

export type SvgChildElement = {
  type: SvgElementType.SvgChild;
  tagName: TagName.circle | TagName.text;
}

export type SvgTextElement = SvgChildElement & {
  tagName: TagName.text;
  value: string;
  attributes: {
    id: string;
    fill: string;
    "font-size": string;
    "font-style"?: string;
    x: string;
    y: string;
    dy: string;
  }
}

export type SVGCircleElement = SvgChildElement & {
  tagName: TagName.circle;
  attributes: {
    id: string;
    fill?: string;
    "fill-opacity"?: string;
    stroke?: string;
    "stroke-width"?: string;
    "shape-rendering"?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
    cx?: string;
    cy?: string;
    r?: string;
  }
}