import type { Matrix, Scene, SceneOptions, SceneSource } from "./scene.types.ts";
/** An element to be made: its tag, attributes, text and children. */
export interface Spec {
    tag: string;
    attrs: Record<string, string>;
    text?: string;
    children?: Spec[];
}
/** A transform as an attribute, to six decimals: a scale of a few pixels to the foot, over a rink, must not drift. */
export declare const matrixAttr: (m: Matrix) => string;
/** The ids of a scene's clips as a renderer writes them. */
export declare const clipId: (scene: Scene, index: number) => string;
/** What goes in `<defs>` for a scene: its clips, gradients and patterns. */
export declare function defsOf(scene: Scene): Spec[];
/** The shapes of a scene as elements in paint order, those inside a clip in a group that clips them. */
export declare function bodyOf(scene: Scene): Spec[];
/** An element as text. */
export declare function specToSvg(spec: Spec): string;
/** What a flat SVG is written with. */
export interface FlatOptions extends SceneOptions {
    /** The width of the picture in pixels. Without a width or a height the SVG has neither and takes the size of its place. */
    width?: number;
    height?: number;
    /** A colour to fill the picture with first (a PNG has no page behind it). */
    background?: string;
}
/**
 * A drawing as an SVG that needs no stylesheet: every colour, width and font worked out for the theme, so that a tool that does not read CSS variables
 * (an image converter, an email, a slide) draws what a browser does. Light by default, or the drawing's own `data-theme`.
 * @example
 * ```ts
 * import { sceneToSvg } from "@johnmorrisdotca/kyogijo-stadiums/scene";
 * const svg = sceneToSvg({ sport: "nhl", id: "rink" }, { theme: "dark", width: 800 });
 * console.log(svg.includes("var("), svg.includes("<style"), svg.startsWith("<svg"));
 * // false false true
 * ```
 */
export declare function sceneToSvg(source: SceneSource, options?: FlatOptions): string;