chordProSVG

chordPro - Was ist das?

chordPro ist ein Text-Dateiformat zur Darstellung von Liedtext mit Akkorden.

Programme diverser Autoren

ChordPro https://www.chordpro.org/

Dieses Programm von Johan Vromans (Entwickler des chordPro-Dateiformats) u.a. ist eine ausgereifte Version, mit der PDF-Dateien erstellt werden können.

Simple ChordPro (Online) simplechordpro.com

Ausgabe als Text mit nicht proportionaler Schrift
Sehr nützlich zum Transponieren!
Umwandlung Text mit Akkordzeilen ⇄ chordPro

chordPro - Quelldateien

Eine kleine Auswahl:

The OLGA Archive

Jim's Songbook
Zugleich praktisches Tool zum Musizieren

ANMERKUNG: Manchmal sind kleine Anpassungen im Text notwendig, nicht alle Dateien entsprechen genau dem chordPro-Standard

chordProSVG

© G. Schacherl, 2021, Version 3.0

Mein Programm → chordProSVG ← ist eine Version, die im Browser läuft und aus chordPro-Quelltext eine SVG-Grafik-Datei erzeugen kann.

Kurzanleitung

chordProSVG starten (Öffnet in neuem Browserfenster/Tab)
Kurzanleitung: Buttons

  1. Button "Convert to SVG" drücken
  2. Schieberegler so verstellen, dass die längste Zeile der erzeugten Grafik in das Fenster passt
  3. Button "SVG Source: scalable, CSS extern" drücken
  4. Button "Preview" drücken und schauen, was passiert

Im neuen Fenster/Tab, das die "Preview"-Grafik zeigt, auf verschiedende Stellen klicken, u.a. auch auf die 1. Zeile im Text:
tab_preview

Ausführliche Anleitung

Quelltext schreiben und SVG darstellen

  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

  3. Breite anpassen

    Mit dem Regler:

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

SVG-Code extrahieren

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

Je nach Verwendungszweck kann gewählt werden zwischen:

  • SVG_source_normal_intern

    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!)

  • SVG_source_normal_extern

    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.

  • SVG_source_scalable_intern

    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.

  • SVG_source_scalable_extern

    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.

showHideCSSintern

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!

CopyToClipboard

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.

preview
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.

Anwendungsbeispiele

SVG "standalone"

Normal

die-gedanken-sind-frei.svg

clementine.svg

Scalable

Kann per Mausklick oder Touch verändert werden

die-gedanken-sind-frei-SCALE.svg

clementine-SCALE.svg

SVG "inline" auf Internetseite

Die Beispiele stammen aus einer älteren Version von chordProSVG und werden demnächst angepasst!

Der Quelltext der SVG-Datei steht in chordProSVG als Text zur Verfügung und kann in eine Internetseite eingesetzt werden.

Normal

hab-sonne-im-herzen.html

go-down-moses.html

CSS-Datei: svg-style-inline.css

Scalable

hab-sonne-im-herzen-SCALE.html

go-down-moses-SCALE.html

CSS-Datei: svg-style-inline-SCALE.css

Für eigene Versuche studieren Sie den Quelltext der angegebenen Seite!

Dynamische Erzeugung von SVG aus dem chordPro-Quelltext

oh-susanna.html

Auf dieser Seite befindet sich ein chordPro-Quelltext, die dynamische Umwandlung in ein SVG besorgt meine Javascript-Datei chordProSVGweb.js

Dazu ist eine CSS-Datei (hier: chordProSvgStyleWeb.css) notwendig, die ev. angepasst werden könnte:

Für eigene Versuche studieren Sie den Quelltext der angegebenen Seite!

ABC-Quelltext und chordPro-Quelltext auf einer Seite

Noch interessanter ist die Kombination aus abc2svg (J. F. Moine) und chordProSVG. Beide Programme rendern dynamisch jeweils eine SVG-Grafik!

Siehe abcweb_chordProSVG-CPsource.html

Zugehörige CSS-Datei: chordProSvgStyleWeb.css

Downloads

CSS normal chordProSvg_normal.css

CSS scalable chordProSvg_scale.css

Wenn "Scalable" gewählt wurde, auch chordProSvg_scale.js

Diese Dateien herunterladen und im gleichen Ordner wie die SVG's speichern.