SVG-Grafiken in Grav

SVGs sind ideal für Grav: klein, skalierbar, animierbar und kein Plugin nötig.

Inline-SVG (direkt im Markdown)

Einfaches Logo

SVG-Markup wird mit dem svg-Tag geschrieben. Beispiel-Syntax mit eckigen Klammern:

[svg width="200" height="60" viewBox="0 0 200 60"]
  [defs]
    [linearGradient id="splexus-grad" x1="0%" y1="0%" x2="100%" y2="0%"]
      [stop offset="0%" style="stop-color:#6c63ff"/]
      [stop offset="100%" style="stop-color:#00d4ff"/]
    [/linearGradient]
  [/defs]
  [text x="10" y="42" font-size="36" font-weight="700"
    fill="url(#splexus-grad)" font-family="sans-serif"]SPLEXUS[/text]
[/svg]

Icons (24x24)

Drei Beispiel-Icons (Home, Mail, Chart) als SVG:

[svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"]
  [!-- Home-Icon --]
  [path d="M3 12l9-9 9 9v9a2 2 0 0 1-2 2h-4v-7H10v7H6a2 2 0 0 1-2-2z"/]
[/svg]

[svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"]
  [!-- Mail-Icon --]
  [rect x="2" y="4" width="20" height="16" rx="2"/]
  [path d="M2 6l10 7 10-7"/]
[/svg]

[svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"]
  [!-- Chart-Icon --]
  [line x1="3" y1="21" x2="21" y2="21"/]
  [rect x="5" y="11" width="3" height="10"/]
  [rect x="11" y="7" width="3" height="14"/]
  [rect x="17" y="3" width="3" height="18"/]
[/svg]

Interaktive SVGs

Hover-fähige Karte

Regionen mit Hover-Effekt. CSS wird im style-Tag innerhalb des svg-Tag definiert:

[svg width="300" height="200" viewBox="0 0 300 200"]
  [style]
    .splexus-region { fill: #1a1a2e; stroke: #6c63ff; stroke-width: 1; transition: fill 0.3s; cursor: pointer; }
    .splexus-region:hover { fill: #6c63ff; }
    .splexus-label { fill: white; font-size: 14px; text-anchor: middle; pointer-events: none; }
  [/style]
  [rect class="splexus-region" x="10" y="10" width="130" height="80" rx="8"/]
  [text class="splexus-label" x="75" y="55"]Region A[/text]
  [rect class="splexus-region" x="160" y="10" width="130" height="80" rx="8"/]
  [text class="splexus-label" x="225" y="55"]Region B[/text]
  [rect class="splexus-region" x="10" y="110" width="280" height="80" rx="8"/]
  [text class="splexus-label" x="150" y="155"]Region C[/text]
[/svg]

SVG mit Links (klickbare Buttons)

Das a-Tag mit href-Attribut verlinkt innerhalb des SVG:

[svg width="400" height="80" viewBox="0 0 400 80"]
  [a href="/de/formulare" target="_top"]
    [rect x="10" y="10" width="180" height="60" rx="30" fill="#6c63ff"/]
    [text x="100" y="45" fill="white" text-anchor="middle" font-size="18" font-weight="600"]Kontaktformular[/text]
  [/a]
  [a href="/de/blog" target="_top"]
    [rect x="210" y="10" width="180" height="60" rx="30" fill="#00d4ff"/]
    [text x="300" y="45" fill="white" text-anchor="middle" font-size="18" font-weight="600"]Zum Blog[/text]
  [/a]
[/svg]

Komplexe SVGs

Donut-Chart

[svg width="200" height="200" viewBox="0 0 200 200"]
  [!-- Hintergrund-Ring --]
  [circle cx="100" cy="100" r="80" fill="none" stroke="#1a1a2e" stroke-width="20"/]
  [!-- 75% Rot --]
  [circle cx="100" cy="100" r="80" fill="none" stroke="#6c63ff" stroke-width="20"
    stroke-dasharray="377" stroke-dashoffset="94"
    transform="rotate(-90 100 100)"/]
  [!-- 25% Türkis --]
  [circle cx="100" cy="100" r="80" fill="none" stroke="#00d4ff" stroke-width="20"
    stroke-dasharray="126" stroke-dashoffset="-283"
    transform="rotate(-90 100 100)"/]
  [text x="100" y="105" fill="white" text-anchor="middle" font-size="28" font-weight="700"]75%[/text]
[/svg]

Animated Wave (SVG-Wellen)

[svg width="100%" height="120" viewBox="0 0 1200 120" preserveAspectRatio="none"]
  [path d="M0,60 C150,100 350,0 600,60 C850,120 1050,20 1200,60 L1200,120 L0,120 Z"
    fill="#6c63ff" opacity="0.3"]
    [animate attributeName="d"
      dur="6s" repeatCount="indefinite"
      values="M0,60 C150,100 350,0 600,60 C850,120 1050,20 1200,60 L1200,120 L0,120 Z;
              M0,60 C150,20 350,100 600,60 C850,20 1050,100 1200,60 L1200,120 L0,120 Z;
              M0,60 C150,100 350,0 600,60 C850,120 1050,20 1200,60 L1200,120 L0,120 Z"/]
  [/path]
[/svg]

Gradient-Mesh Hintergrund

[svg width="100%" height="400" viewBox="0 0 1200 400" preserveAspectRatio="xMidYMid slice"]
  [defs]
    [radialGradient id="g1" cx="20%" cy="30%"]
      [stop offset="0%" style="stop-color:#6c63ff;stop-opacity:0.4"/]
      [stop offset="100%" style="stop-color:#6c63ff;stop-opacity:0"/]
    [/radialGradient]
    [radialGradient id="g2" cx="80%" cy="70%"]
      [stop offset="0%" style="stop-color:#00d4ff;stop-opacity:0.4"/]
      [stop offset="100%" style="stop-color:#00d4ff;stop-opacity:0"/]
    [/radialGradient]
    [radialGradient id="g3" cx="50%" cy="50%"]
      [stop offset="0%" style="stop-color:#ff6b9d;stop-opacity:0.3"/]
      [stop offset="100%" style="stop-color:#ff6b9d;stop-opacity:0"/]
    [/radialGradient]
  [/defs]
  [rect width="100%" height="100%" fill="#0f0f23"/]
  [rect width="100%" height="100%" fill="url(#g1)"/]
  [rect width="100%" height="100%" fill="url(#g2)"/]
  [rect width="100%" height="100%" fill="url(#g3)"/]
[/svg]

SVG als Datei einbinden

![Logo](/de/medien/logo.svg)

Grav erkennt SVGs als Bild-Dateien. Sie können direkt in Markdown referenziert werden.

SVG im Twig-Template

[source('page://03.medien/logo.svg')]
[oder]
[page.media['logo.svg'].raw]

Live-Demos zu den SVG-Beispielen

Alle folgenden Grafiken sind echte, inline gerenderte SVGs. Hover- und Link-Funktionen können direkt ausprobiert werden.

SPLEXUS Logo mit Verlauf

Icon-Set: Home, Mail, Chart

Donut-Chart

Klickbare SVG-Buttons

Interaktive Karte – Regionen mit Hover-Effekt

Animierte SVG-Welle

Gradient-Mesh Hintergrund

SVG-Datei einbinden

Twig-Template-Ausgabe