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 2.8

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

SVG erzeugen

  1. Quelltext-Feld

    Quelltext eintragen (oder vorhandenen für Test benützen)

    Speziell formatiert werden später:

    Akkorde
    {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-Quelltext extrahieren

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

Normal

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

Scalable

Das erzeugte SVG passt sich zunächst der Größe des Bildschirms an und kann nachträglich per Mausklick oder Touch verändert werden (SVG mit 'viewBox'-Attribut)

CSS Intern

CSS ist bereits im Quellcode enthalten. Sinnvoll, wenn nur wenige Dateien erstellt werden oder ein einzelnes SVG in eine Internetseite eingebunden wird.

CSS extern

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

Copy to clipboard

Der Quelltext wird in die Zwischenablage kopiert und könnte in ein bestehendes HTML-Dokument als Inline-SVG eingesetzt werden.

Preview

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

Für eine oder wenige Einzelseiten

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

Für mehrere Seiten in Folge

Die folgende Anleitung richtet sich an erfahrene Computer-Anwender, die diese Methode auch bei einer einzelnen Seite praktizieren können:

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.

Zusätzlich müssen einmal chordProSvg_normal.css bzw. chordProSvg_scale.css zusätzlich herunter geladen und im gleichen Ordner gespeichert werden.

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

Anwendungsbeispiele mit externen CSS-Dateien

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