SVG Renderer

The SVG renderer generates vector graphics as SVG markup strings. No external dependencies — SVG is browser-native. Output is resolution-independent and suitable for print.

Algorithm contract

function sketch(state)

Note: SVG sketches receive only state — no drawing context is provided. The algorithm returns SVG markup as a string.

State object

Required return

return {
  generate() {
    // Return SVG markup string
    return `<svg>...</svg>`;
  },
  initializeSystem() {
    // Same as generate (for compatibility)
  }
};

The generate() method must return a complete SVG string including the <svg> root element with xmlns, width, height, and viewBox attributes.

Validation

• Must define function sketch(state) with one argument

Template

function sketch(state) {
  const { width, height } = state.canvas;

  function generate() {
    return `<svg xmlns="http://www.w3.org/2000/svg"
      width="${width}" height="${height}"
      viewBox="0 0 ${width} ${height}">
      <!-- generated elements -->
    </svg>`;
  }

  return {
    generate,
    initializeSystem: generate
  };
}

CDN dependency

None — SVG is browser-native.

Renderer configuration

{
  "renderer": {
    "type": "svg"
  }
}

Tips

• SVG output is static — no animation loop
• Use template literals to build SVG markup programmatically
• Output is resolution-independent — ideal for print exports
• Export directly as .svg files via the export_sketch tool
• Use a seeded PRNG for reproducible randomness
• Colors from state.colorPalette are hex strings — use directly in fill and stroke attributes