====== SVG mit Lyx ======

Die Lyx SVG-Bibliothek erzeugt SVG-Dateien direkt — kein externes Tool, keine Abhängigkeiten. 9 Sub-Units decken Grundformen, Pfade, Stile, Filter, Animationen, Text, Definitionen und Parsing ab.

→ [[lyx_-_programmiersprache:guides|Guides]] · [[lyx_-_programmiersprache:units:svg|std.svg Referenz]]

<code lyx>
import std.svg.builder;    // Pflicht: Dokument-Lifecycle
import std.svg.elements;   // Grundformen
import std.svg.style;      // Farbe, Strich, Transformationen
</code>

----

===== Architektur =====

<code>
svg/builder   — SvgNew, SvgSave, SvgFree, SvgToString (Dokument-Lifecycle)
svg/elements  — rect, circle, ellipse, line, polyline, polygon, SvgApply, Gruppen
svg/path      — <path d="..."> Builder: M L H V C S Q T A Z
svg/style     — fill, stroke, opacity, dash, linecap/join, Transformationen
svg/text      — SvgText, SvgTextSpan, Schriftart, Anker
svg/image     — SvgImage (eingebettetes Bild oder Verweis)
svg/filter    — Blur, Drop-Shadow, Composite, ColorMatrix
svg/defs      — SvgDefsBegin/End, Gradienten, Muster, clipPath, Symbol
svg/anim      — SMIL-Animationen: SvgAnimate, SvgAnimateTransform, SvgAnimateMotion
svg/parser    — SVG-Datei einlesen und traversieren
svg/xml       — Low-Level XML-Ausgabe (intern)
</code>

----

===== Minimales Beispiel =====

<code lyx>
import std.svg.builder;
import std.svg.elements;
import std.svg.style;

fn main(): int64 {
  // Dokument anlegen (400×300 px):
  var doc: int64 := SvgNew(400.0, 300.0);

  // Hintergrund:
  SvgSetFill(doc, "lightblue"c);
  SvgRect(doc, 0.0, 0.0, 400.0, 300.0);
  SvgApply(doc);

  // Roter Kreis:
  SvgSetFill(doc, "red"c);
  SvgSetStroke(doc, "darkred"c);
  SvgSetStrokeWidth(doc, 2.0);
  SvgCircle(doc, 200.0, 150.0, 60.0);
  SvgApply(doc);

  // Speichern:
  SvgSave(doc, "output.svg"c);
  SvgFree(doc);
  return 0;
}
</code>

----

===== Grundformen (svg/elements) =====

<code lyx>
import std.svg.elements;

// Rechteck:
SvgRect(doc, x, y, width, height);

// Abgerundetes Rechteck:
SvgSetRounding(doc, rx, ry);    // vor SvgRoundRect setzen
SvgRoundRect(doc, x, y, w, h);

// Kreis:
SvgCircle(doc, cx, cy, radius);

// Ellipse:
SvgEllipse(doc, cx, cy, rx, ry);

// Linie:
SvgLine(doc, x1, y1, x2, y2);

// Polyline (Punkte als String "x1,y1 x2,y2 ..."):
SvgPolyline(doc, "10,20 30,40 50,20"c);

// Nach jeder Form: SvgApply() — überträgt Style und erzeugt das Element
SvgApply(doc);
</code>

----

===== Pfade (svg/path) =====

<code lyx>
import std.svg.path;
import std.svg.style;

SvgSetFill(doc, "none"c);
SvgSetStroke(doc, "black"c);

SvgPathBegin(doc);
  SvgMoveTo(doc, 50.0, 100.0);
  SvgLineTo(doc, 150.0, 100.0);
  SvgLineTo(doc, 100.0, 50.0);
  SvgClosePath(doc);
SvgApply(doc);   // <path d="M50,100 L150,100 L100,50 Z" .../>

// Kubische Bézierkurve:
SvgPathBegin(doc);
  SvgMoveTo(doc, 10.0, 80.0);
  SvgCubicTo(doc, 40.0, 10.0, 65.0, 10.0, 95.0, 80.0);  // C
SvgApply(doc);
</code>

----

===== Stile (svg/style) =====

<code lyx>
import std.svg.style;

// Füllung:
SvgSetFill(doc, "steelblue"c);          // Farb-String
SvgSetFillOpacity(doc, 0.8);            // 0.0–1.0
SvgSetFill(doc, "none"c);               // keine Füllung

// Kontur:
SvgSetStroke(doc, "#FF0000"c);          // Hex-Farbe
SvgSetStrokeWidth(doc, 3.0);
SvgSetStrokeOpacity(doc, 0.5);

// Linienenden und -verbindungen:
SvgSetLineCap(doc, SVG_CAP_ROUND);      // butt | round | square
SvgSetLineJoin(doc, SVG_JOIN_MITER);    // miter | round | bevel

// Gestrichelte Linie:
SvgSetDashArray(doc, "5,3"c);           // "5px Strich, 3px Pause"
SvgSetDashOffset(doc, 0.0);

// Transformation:
SvgTranslate(doc, 100.0, 50.0);
SvgRotate(doc, 45.0);
SvgScale(doc, 2.0, 2.0);
SvgResetTransform(doc);
</code>

----

===== Text (svg/text) =====

<code lyx>
import std.svg.text;
import std.svg.style;

SvgSetFill(doc, "black"c);
SvgTextSet(doc, "Arial"c, 16.0);         // Schriftart + Größe
SvgText(doc, 50.0, 50.0, "Hallo Lyx"c);
SvgApply(doc);

// Mehrzeiliger Text mit TSpan:
SvgTextBegin(doc, 20.0, 30.0);
  SvgTextSpan(doc, "Zeile 1"c);
  SvgTextSpan(doc, "Zeile 2"c);
SvgTextEnd(doc);
SvgApply(doc);
</code>

----

===== Gruppen und Layer =====

<code lyx>
import std.svg.elements;

// Gruppe mit ID:
SvgGroupBegin(doc, "layer1"c);
  SvgCircle(doc, 100.0, 100.0, 30.0);
  SvgApply(doc);
  SvgRect(doc, 50.0, 50.0, 40.0, 40.0);
  SvgApply(doc);
SvgGroupEnd(doc);
</code>

----

===== Animationen (svg/anim) =====

<code lyx>
import std.svg.anim;

// Farb-Animation (fill von rot nach blau, 2 Sekunden):
SvgSetFill(doc, "red"c);
var elem: int64 := SvgCircle(doc, 200.0, 150.0, 50.0);
SvgApply(doc);
SvgAnimate(doc, elem, "fill"c, "red"c, "blue"c, 2.0);

// Rotation (0° → 360°, endlos):
SvgAnimRepeat(doc, 0);   // 0 = indefinite
SvgAnimateTransform(doc, elem, SVG_AT_ROTATE, "0 200 150"c, "360 200 150"c, 3.0);
</code>

^ Transform-Typ ^ Konstante ^
| Verschiebung | ''SVG_AT_TRANSLATE'' |
| Skalierung | ''SVG_AT_SCALE'' |
| Rotation | ''SVG_AT_ROTATE'' |
| Scherung X | ''SVG_AT_SKEWX'' |
| Scherung Y | ''SVG_AT_SKEWY'' |

----

===== Filter (svg/filter) =====

<code lyx>
import std.svg.filter;

// Unschärfe auf Rechteck:
SvgFilterBegin(doc, "blur1"c);
  SvgFilterBlur(doc, 3.0);
SvgFilterEnd(doc);

SvgSetFilter(doc, "blur1"c);
SvgRect(doc, 50.0, 50.0, 200.0, 100.0);
SvgApply(doc);

// Drop-Shadow:
SvgFilterBegin(doc, "shadow"c);
  SvgFilterDropShadow(doc, 4.0, 4.0, 2.0);
SvgFilterEnd(doc);
</code>

----

===== Dokument-Ausgabe =====

<code lyx>
import std.svg.builder;

// In Datei speichern:
SvgSave(doc, "chart.svg"c);

// Als String holen (z. B. für HTTP-Response):
var svgStr: pchar := SvgToString(doc);
// ... svgStr verwenden ...

// Pretty-Print aktivieren (Zeilenumbrüche + Einrückung):
SvgSetPrettyPrint(doc, 1);

// ViewBox setzen:
SvgSetViewBox(doc, 0.0, 0.0, 800.0, 600.0);

// Aufräumen:
SvgFree(doc);
</code>

Letzte Aktualisierung: 2026-06-08