abcsvg-edit, © Gerhard Schacherl 2026

• 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)
• Wenn eine SVG-Grafik bereits als Datei gespeichert ist, kann sie mit 'Drag and drop' auf das Textfeld (links) von abcsvg-edit gezogen werden.
  (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 eine bereits bestehende 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

  Es ergeben sich 2 Varianten:

  Die Daten der Elemente sind neben der Dropdown-Liste vordefiniert (= Standard)	Die Liste der Daten ist leer (vom Anwender gelöscht)
  Mit Rechtsklick im SVG wird das Element mit diesen Daten eingesetzt.	Manchmal sind 2 mal Rechtklick erforderlich, um ein Element einzusetzen
  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 jederzeit verändert werden.	Der erste Rechtsklick bestimmt den Anfangspunkt, der zweite den Endpunkt
  → (= Pfeil)
  50~0~red Wie bei line, am Ende wird ein Pfeil eingefügt.	Der erste Rechtsklick bestimmt den Anfangspunkt, der zweite den Endpunkt (mit Ausnahme des Pfeils)
  rect
  50~20~red Breite, Höhe, stroke-Farbe Zusätzlich könnte noch das fill-Attribut, z.B. ~#ff0000 verwendet werden	Der erste Rechtsklick bestimmt den Anfangspunkt, der zweite den Endpunkt des Rechtecks
  circle
  15~red Radius, stroke-Farbe Der Rechtsklick bestimmt den Mittelpunkt des Kreises Zusätzlich könnte noch das fill-Attribut, z.B. ~#ff0000 verwendet werden	Der erste Rechtsklick bestimmt den Mittelpunkt des Kreises, der zweite einen Punkt auf dem Kreis.
  path
  m0,-15 h2 v10 h4 l-6,5 l-6,-5 h4 v-10 z~red~none Hier ist ein Pfeil vordefiniert, mit dem Button "Paths" können andere Pfade gewählt werden Zusätzliche Rotation mit ~rotate(45) o.ä. möglich	Leere Liste = Standard-Pfeil
  text
  text~100%~red Anzuschreibender Text, Schriftgröße, Schrift-Füllfarbe Zusätzliche Rotation mit ~rotate(45) o.ä. möglich	Leere Liste = Standard-Text Nur Text (ohne ~) = Text mit Standard-Attributen
  point
  Hier werden nur Koordinaten des Klickpunktes angeschrieben, an der SGV-Datei wird nichts geändert!
  link
  https://gerhard.schacherl.info~100%~blue Ein klickbarer Link wird eingesetzt.	Leere Liste = Standard-Link
  audio
  Under A Foreign Flag.mp3 Ein abspielbares Mp3 wird eingesetzt (muss auf dem Server vorhanden sein!)	Leere Liste = Standard-Audio

• Elemente oder ganze SVG's können auch im Textfeld links händisch eingesetzt und/oder bearbeitet werden. Anschließend Button 'Update SVG' drücken.
• Wenn alles fertig ist, ev. der Gruppe statt 'info' eine andere ID geben.

Eine weitere Möglichkeit ist das Einsetzen einer neuen Grafik mit dem Button "New SVG". Eine bereits bestehende wird damit gelöscht.

Als einziges Element ist ein <image>-Tag enthalten. Dieses könnte dazu verwendet werden, eine andere Grafik zu referenzieren, ev. auch im base64 kodierten Format.

Base64

Lokal gespeichterte Bilddatei auswählen, Code kopieren und in abcsvg-edit einsetzen:

Code kopieren

width und height selbst anpassen!

Etwas professioneller mit einem Internet-Tool: https://www.base64-image.de/

2 Möglichkeiten:

• Button 'Save SVG' erlaubt das Speichern einer SVG-Datei
  
  oder:
• Text aus dem Textfeld von abcsvg-edit kopieren und mit Hilfe eines Texteditors als neue SVG-Datei speichern, bzw. den Quelltext einer bereits vohandenen Datei ersetzen.

• 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