chordProSVG

1. Quelltext-Feld

   Quelltext im chordPro-Format eintragen (oder vorhandenen Quelltext zum Testen benützen)

   ChordProSvg erkennt Akkorde und folgende Tags:

   {title: ...}, {t: ...}
   {subtitle: ...}, {st: ...}
   {artist: ...}
   {lyricist: ...}
   {start_of_chorus}, {soc}
   {end_of_chorus}, {eoc}
   {start_of_tab}, {sot}
   {end_of_tab}, {eot}
   {comment: ...}, {c: ...}
   # (+ Leerzeichen)
   

   Zur Transposition von Akkorden:
   
   Wenn im Quelltext {key: ...} enthalten ist, kann die Tonart mit dem Button "Find key" ausgelesen werden,
   ansonsten muss die Starttonart ("From") selbst gesucht und gewählt werden.
   Nach der Transposition steht in {key: ...} die neue Tonart.
   Die Funktionalität ist ingesamt noch nicht ganz perfekt, aber durchaus hilfreich.

2. Buttons:

   

   Convert to SVG = Quelltext zu SVG-Grafik konvertieren
   

   Append to SVG = Grafik aus neuem Quelltext an bereits bestehende anhängen

   NEU in v3.2: SVG: change braille space to space
   chrProSVG verwendet das Braille-Leerzeichen, um die Position von Akkorden anpassen zu können. Wenn nur Liedtext ohne Akkorde vorhanden ist, können auch normale Leerzeichen (space) eingesetzt werden.

3. Breite anpassen

   Mit dem Regler:

   

   die Breite der Grafik anpassen, damit sie später ev. zentriert werden kann.

Es können 4 Arten von Code für eine SVG-Grafik erzeugt werden:

Je nach Verwendungszweck kann gewählt werden zwischen:

• 
  

  Das erzeugte SVG erhält eine passene Breite und Höhe (SVG mit 'width' und 'height')

  CSS wird in den Quellcode des SVG eingefügt, keine weiteren Dateien notwendig.

  Sinnvoll, wenn ein SVG mit dem <img>-Tag in eine Internetseite eingebunden wird. (In diesem Fall kann das SVG keine externen Dateien wie *.css od. *.js nachladen!)

• 
  

  Das erzeugte SVG erhält eine passene Breite und Höhe (SVG mit 'width' und 'height')

  Für externes CSS wird die Datei chordProSvg_normal.css benötigt (siehe Downloads).

  Bei mehreren SVG-Dateien ist externes CSS sinnvoll, weil alle Dateien damit gleich formatiert werden und Änderungen des CSS leicht möglich sind.

• 
  

  Das erzeugte SVG erhält ein 'viewBox'-Attribut und die externe JavaScript-Datei chordProSvg_scale.js (siehe Downloads).

  Das SVG passt sich zunächst der Größe des Bildschirms an und kann nachträglich per Mausklick oder Touch verändert werden.

  CSS wird in den Quellcode des SVG eingefügt.

• 
  

  Das erzeugte SVG erhält ein 'viewBox'-Attribut und die externe JavaScript-Datei chordProSvg_scale.js (siehe Downloads).

  Das SVG passt sich zunächst der Größe des Bildschirms an und kann nachträglich per Mausklick oder Touch verändert werden.

  Für externes CSS wird die Datei chordProSvg_scale.css benötigt (siehe Downloads).

  Bei mehreren SVG-Dateien ist externes CSS sinnvoll, weil alle Dateien damit gleich formatiert werden und Änderungen des CSS leicht möglich sind.

Mit diesem Button kann man das vom Programm für das SVG vorgesehene CSS sichtbar machen und für die Dauer des Programmlaufs verändern. Die Auswirkungen werden mit dem "Preview"-Button sichtbar. Nach Drücken des Buttons 'Convert to SVG' sind die Auswirkungen auch direkt im Programmfenster sichtbar.

Für 'normal' und 'scalable' gibt es jeweils ein eigenes CSS.

Falls das geänderte CSS später für eigene Zwecke benutzt werden soll, nicht vergessen, es zu kopieren und extra zu speichern! Änderung sind nach Beenden des Programms verloren!

Der Quelltext (= SVG mit id="mySvg") wird markiert und in die Zwischenablage kopiert, ergänzt durch ein umschließendes SVG (id="chordProSvg") wie beim PREVIEW-Button.

Für erfahrene Computer-Anwender:
Aus der Zwischenablage kann der Code direkt in eine neu erstellte SVG-Datei eingefügt werden!
Sollte die Absicht bestehen, das SVG id="mySvg" in ein bestehendes HTML-Dokument als Inline-SVG einzusetzen, könnte der Text aus dem Feld direkt herauskopiert werden - ohne den Button "COPY" zu verwenden.

Weniger erfahrene Computeranwender
sollten den PREVIEW-Button benützen (s. unten)

ACHTUNG! Copy funktioniert nicht in allen Browsern!
Das Markieren des SVG-Quelltextes funktioniert immer.

Einfache Methode:

Das SVG (= der erzeugte Quellcode) wird in einer neuen Internetseite geöffnet. Diese Seite kann als SVG-Grafik (*.svg) lokal gespeichert werden:

Menü des Browsers: "Seite speichern unter ..."

Nachteil dieser Methode: Beim Speichern werden vom Browser, wie üblich, zusätzliche Ordner erzeugt. In diesen befinden sich (für jedes SVG extra!) eine CSS-Datei, bzw. die JS-Datei.

Alternative zum COPY-Button für erfahrene Computer-Anwender:

Mit den Development-Tools (F12) im Inspector das SVG mit der id="chordProSvg" kopieren, d.h. in Firefox: Kopieren - Äußeres Html.
Den kopierten Code als *.SVG-Datei speichern. Damit wird im Gegensatz zum normalen lokalen Speichern kein zusätzlicher Ordner erzeugt.