Komponenten

Inline SVG

Skalierbar. Anpassbar. Nahtlos integriert.

Mit der Inline-SVG-Komponente können Sie SVG-Grafiken direkt in Ihre Inhalte einbetten und so für vollständige Flexibilität bei der Gestaltung und visuelle Klarheit auf allen Bildschirmgrößen sorgen. Sie ist ideal für Symbole, Logos und Animationen und sorgt dafür, dass Ihre Grafiken gestochen scharf, schnell ladend und einfach zu aktualisieren sind, ohne dass externe Bildanforderungen oder komplexe Überschreibungen erforderlich sind.

Sie können sogar themebasierte Varianten definieren, die es Ihnen erleichtern, Ihr Bildmaterial in hellen und dunklen oder markenbezogenen UI-Modi anzupassen. Und durch die direkte Bearbeitung von SVG-Pfaden können Designer und Entwickler gleichermaßen das Bildmaterial direkt im visuellen Editor optimieren und in der Vorschau anzeigen.

Scharfe Grafik, nahtloses Verhalten

  1. Scharfes Bildmaterial in jeder Größe.
    Kein Qualitätsverlust, endlos skalierbar.

  2. Schnell-Ladend und Im Content eingebettet.
    Keine zusätzlichen externen Requests.

  3. Themebasiertes Bildmaterial.
    Sorgen Sie überall für visuelle Harmonie.

Leistungsstark und anpassbar

  1. Pfade direkt optimieren und anpassen.
    Visuelles Feedback in Sekundenschnelle.

  2. Wenden Sie Komponenten-Themes an.
    Feinabstimmung jedes Details.

  3. Ideal für Icons und Logos.
    Perfekt für Markenelemente.

Anwendungsfälle

Verwenden Sie die Inline-SVG-Komponente, wenn Sie ultrascharfe, leichtgewichtige und vollständig anpassbare Grafiken für Ihre Website benötigen:

  • Logos und Markenzeichen

  • UI-Symbole und Schaltflächen-Illustrationen

  • Interaktive oder animierte SVG-Elemente

  • Themespezifische Grafiken (z. B. helle/dunkle Varianten)

  • Benutzerdefinierte SVGs mit präziser Kontrolle über Farbe, Kontur oder Animation

Im Gegensatz zu Rasterbildern oder externen SVG-Verknüpfungen bringt diese Komponente Ihr Bildmaterial in die Content-Pipeline ein - optimiert für Geschwindigkeit, Styling und Konsistenz.

Konfigurationsoptionen und Funktionen

Mit der Inline-SVG-Komponente können Sie Ihren Inhalten präzise, skalierbare und anpassbare Grafiken hinzufügen, ohne Kompromisse bei der Leistung oder Flexibilität einzugehen.

Ganz gleich, ob Sie Symbole, Logos oder fortgeschrittene Animationen rendern müssen, diese Komponente ist schnell, flexibel und themeorientiert.

Pixelgenauigkeit. Unendliche Skalierbarkeit. Volle Kontrolle.

Content Bereich

Fügen Sie das vollständige SVG-Markup (beginnend mit <svg>) ein.

Dies ist der eigentliche Vektorinhalt, der inline in Ihre Seite eingebettet wird.

  • Ermöglicht die vollständige Anpassung von Pfaden, Formen und Styling

  • Ermöglicht Inline-Animationen und JavaScript-Interaktionen

  • Automatische Vorschau im visuellen Editor

Sie können Ihr SVG-Markup jederzeit mit sofortiger Rückmeldung anpassen.

Komponenten Theme

Wenden Sie ein Styling-Theme auf den Inhalt oder den übergeordneten Container Ihres SVG-Elements an. Auf diese Weise können Sie Styling-Optionen direkt auf dem SVG-Element festlegen und so bestimmte Pfade einfärben und bestimmte andere Elemente direkt von der Oberfläche des visuellen Editors aus nach Ihren Wünschen gestalten.