abcsvg-edit, © Gerhard Schacherl 2025

• Ausgangspunkt ist eine ABC-Datei, erstellt mit abc2svg
  Erzeugen einer SVG-Datei mit Button 'abcDiv2svg', kopieren mit Button 'COPY SVG'
• abcsvg-edit starten, dort Button 'READ CLIPBOARD' drücken. Damit wird die Grafik in abcsvg-edit eingefügt.
  (Weiter in der Anleitung abcsvg-edit)

svgedit ist ein vollwertiger SVG-Editor und eignet sich daher besonders gut für das Einsetzen von komplexen grafischen Elementen, hat aber seine Tücken!

• Ausgangspunkt ist eine ABC-Datei, erstellt mit abc2svg
  Erzeugen einer SVG-Datei mit Button 'abcDiv2svg', kopieren mit Button 'COPY SVG'
• Kopierten Text in svgedit als Quelltext einfügen
  (Button 'SVG' = 'Edit Source')

Nun ergeben sich drei verschiedene Szenarien:

1. Das Notenbild ist fehlerlos:
   Grafische Elemente in 'svgedit' einsetzen, gruppieren, und der Gruppe eine sinnvolle ID geben.
   Datei von svgedit aus als SVG speichern. (abcsvg-edit wird nicht benötigt!)
2. Es fehlen Notenlinien:
   Quellext von svgedit kopieren
   Programm abcsvg-edit starten, und die Buttons 'READ CLIPBOARD' und 'SET IDs' drücken. Damit sollten die fehlenden Notenlinien korrigiert sein.
   Text aus dem Textfeld von abcsvg-edit kopieren und wieder in svgedit einfügen.
   Grafische Elemente in 'svgedit' einsetzen, gruppieren, und der Gruppe eine sinnvolle ID geben.
   Datei von svgedit aus als SVG speichern.
3. Sollte nach dem Speichern die Darstellung der Metronomangabe fehlerhaft sein (falsche Positionierung besonders im Browser 'Mozilla Firefox' sichtbar), könnte die Ursache (nach Stand 28.02.2025) in Zeilenumbrüchen liegen, die svgedit produziert:

        <text class="f65a" id="svg_37" x="93.7" y="-46.6">
         <tspan class="f61a" dy="-1" font-size="15.6px" id="svg_38"></tspan>
         <tspan dy="1" id="svg_39">=</tspan>120</text>
   
   

   Inhalt aus der bereits gespeicherten Datei in das Textfeld von 'abcsvg-edit' kopieren und korrigieren zu:

        <text class="f65a" id="svg_37" x="93.7" y="-46.6"><tspan class="f61a" dy="-1" font-size="15.6px" id="svg_38"></tspan><tspan dy="1" id="svg_39">=</tspan>120</text>
   

   Button UPDATE zur Kontrolle betätigen
   
   Text aus Textfeld kopieren und mit Hilfe eines Texteditors als neue SVG-Datei speichern
   
   Den Code des Textfeldes in svgedit zurück zu kopieren und dann zu speichern, ist nicht sinnvoll: svgedit würde wieder Zeilenumbrüche einfügen!

• Mit einem Rechtsklick auf die SVG-Grafik wird eine neue Gruppe (<g id='info' ...) erzeugt. In diese Gruppe kann mit einem weiteren Rechtsklick auf eine passende Stelle der SVG-Grafik ein einfaches vordefiniertes SVG-Element eingefügt werden.
  
  Auswahl der Elemente aus Dropdown-Liste
  Daten der Elemente sind neben der Dropdown-Liste vordefiniert, z. B. bei 'line': 50~0~red
  Die Werte bedeuten dx (=Länge in Pixel), dy (=Höhenunterschied) und Farbe. Trennung der Werte durch Tilde: ~
  Die Werte können noch verändert werden.
  Mit Rechtsklick im SVG wird das Element mit diesen Daten eingesetzt.
  
  Ähnlich bei 'rect', 'circle' und 'text'. Bei 'point' werden nur die x- und y-Werte angeschrieben, an der SGV-Datei wird nichts geändert!
• Elemente oder ganze SVG's können auch im Textfeld links händisch eingesetzt und/oder deren Eigenschaften bearbeitet werden. Anschließend Button 'UPDATE' drücken.
• Wenn alles fertig ist, ev. der Gruppe statt 'info' eine andere ID geben.

• Text aus dem Textfeld von abcsvg-edit kopieren und mit Hilfe eines Texteditors als neue SVG-Datei speichern

• Ein Notenblatt kann mit grafischen Elementen versehen werden, die im Notensatzprogramm nicht möglich sind.
• Anzeigen/Verbergen von Elementen der SVG-Grafik
  siehe Programm scoreSvgObject