SVG Viewer

Mit diesem Modul kann ein SVG Viewer eingebunden werden. Damit ist es möglich SVG Code live im Browser übersetzen und anzeigen zu lassen.

Das Modul einbinden

Um das Modul nutzen zu können, muss die Einbindung des Moduls über den Meta-Tag features erfolgen (siehe auch Abschnitt "Javascript"):

Das Modul verwenden

Die Verwendung des Moduls wird über einen HTML-Tag gesteuert. Er wird an der gewünschten Stelle eingefügt:

<div class="svg-viewer"></div>

Konfiguration vornehmen

data-config - Übergabe der Konfiguration im JSON Format, Reihenfolge beliebig

• filenameSVG Dateiname einer Datei im Projektordner.
• height Höhe (Standardwert: 400px).
• head kann auf true gesetzt werden. Damit ist der Editor in einem erweiterten Modus und es wird nicht nur der Inhalt des svg-Tags sondern auch der Tag selbst angezeigt. Damit ist auch eine umfangreichere Konfiguration möglich (z.B. viewbox). (Standardwert: false)

Beispiel leerer Editor

<div class="svg-viewer"></div>

​

Beispiel mit eingebundener Datei und verringerter Höhe

<div class="svg-viewer" data-config='{"filenameSVG":"test-bild.svg", "height":"100px"}'></div>

​

Beispiel mit Anzeige des SVG-Tags

<div class="svg-viewer" data-config='{"filenameSVG":"test-bild-2.svg", "head": true}'></div>

xxxxxxxxxx

<?xml version="1.0" encoding="UTF-8"?>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

​

</svg>