Skip to content

SVG strings

pathToSvg writes a Path as M, L and C commands, rounded to two decimals. drawingToSvg writes a Drawing as one <path> per operation. shapeToSvg paints a Shape with paintShape and wraps it in a <g> with the shape’s page matrix.

svgFrame wraps a body in an <svg> with a viewBox. With a label it is an image for assistive technology. Without one it is hidden. Fit picks the preserveAspectRatio: contain, cover or stretch.

docs/examples/svg.ts
import { Fit, pathToSvg, svgFrame } from "@draw/brand";
import { localPoint } from "@draw/shapes";
import type { Path } from "@draw/sketch";


const underline: Path = [
  { kind: "move", point: localPoint(0, 10) },
  { kind: "line", point: localPoint(100, 10) },
];


export const d: string = pathToSvg(underline);
export const svg: string = svgFrame({
  size: { width: 100, height: 20 },
  body: `<path d="${d}" fill="none" stroke="currentColor"/>`,
  label: "An underline",
  fit: Fit.contain,
});