abcsvg-edit, © Gerhard Schacherl 2026

Was in einem PDF heute leicht möglich ist, nämlich das Einfügen von Text und Grafik und das neuerliche Speichern, ist in SVG nur mit speziellen Editoren möglich, z. B. svgedit

Mein Programm abcsvg-edit ist ein Mini-Editor für SVG-Grafiken. Entwickelt, um in eine SVG-Grafik mit Noten - erzeugt aus ABC-Musiknotation mit abc2svg - zusätzliche Elemente einzufügen.

Auch für andere Zwecke mit SVG-Grafiken geeignet.

Erstellen einer SVG-GRAFIK mit Noten
und Einfügen in abcsvg-edit

Einfache Variante mit abc2svg und abcsvg-edit

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)

Komplexe Variante mit abc2svg, svgedit und 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:

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

Anleitung abcsvg-edit

Einfügen und Bearbeiten neuer Elemente

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
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 path ist ein Pfeil vordefiniert.
Bei point werden nur die x- und y-Werte angeschrieben, an der SGV-Datei wird nichts geändert!

rect und circle erlauben noch zusätzlich das fill-Attribut, z.B. ~#ff0000
path und text erlauben noch zusätzlich Rotation mit ~rotate(45) o.ä.
Elemente oder ganze SVG's können auch im Textfeld links händisch eingesetzt und/oder bearbeitet werden. Ev. anschließend Button 'UPDATE' drücken.
Wenn alles fertig ist, ev. der Gruppe statt 'info' eine andere ID geben.

Neue SVG-Grafik

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:

width und height selbst anpassen!

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

Speichern der SVG-Grafik

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.

Einsatzmöglichkeiten

Erweiterung des Notensatzprogrammes

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

Start der relevanten Programme in neuen Tabs

abc2svg

svgedit

abcsvg-edit