SVG-Farben, Text und Pfade online ändern

Der häufigste Fehler beim Umfärben einer Vektorgrafik ist ein falscher Griff. Du änderst die Fläche und wunderst dich, dass der Rand in der alten Farbe bleibt. Das passiert nicht, weil der Editor etwas verschluckt, sondern weil Füllung und Kontur in SVG zwei getrennte Eigenschaften sind.

Beim SVG-Farben, Text und Pfade online ändern geht es genau darum, welche Eigenschaft welchen sichtbaren Effekt erzeugt. Der Vektor-Editor arbeitet dabei auf der Geometrie und nicht auf Pixeln, und er macht diese Trennung sichtbar.

Fünf Werte erklären fast alles

fill bestimmt das Innere einer Form, stroke die Kontur, stroke-width ihre Breite. opacity gilt für das gesamte Objekt, fill-opacity nur für die Fläche. Wenn eine Änderung nicht dort ankommt, wo du sie erwartest, liegt es fast immer daran, dass du den falschen dieser fünf Werte im Blick hast.

Ein Beispiel macht das greifbar. #FF0000 ist rgb(255, 0, 0), #336699 ist rgb(51, 102, 153). Ersetzt du #FF0000 durch #00FF00, änderst du genau eine Zahl. Die Pfadkoordinaten bleiben unangetastet. Deshalb ist Umfärben in einer Vektordatei so billig, und deshalb repariert es nichts, was in der Geometrie schief liegt.

Ein zweites Beispiel zeigt, worauf es ankommt. Willst du #336699 heller haben, ändern sich alle drei Kanalwerte, nicht nur einer. Das ist der Unterschied zwischen Farbe und Deckkraft in einem Satz: Farbe rechnet gegen den Farbraum, Deckkraft gegen den Untergrund.

Warum Deckkraft keine hellere Farbe ist

Wer eine Fläche aufhellen will, greift oft zur Deckkraft. Das Ergebnis sieht ähnlich aus, ist aber etwas anderes. Fünfzig Prozent Deckkraft entsprechen Alpha 128. Der Untergrund scheint durch. Auf Weiß wirkt das heller, auf Schwarz dunkler, auf einem Foto unberechenbar.

Eine echte Farbänderung bleibt dagegen unabhängig vom Untergrund. Wenn ein Logo auf wechselnden Hintergründen funktionieren soll, ist der Eingriff in die Farbe die robustere Wahl. Transparenz ist ein Effekt, keine Tonwertkorrektur.

Verläufe und Konturen verhalten sich relativ

Ein Verlauf ist kein festes Bild, sondern eine Anweisung mit Farbstopps. Ändere einen Stopp, und der Übergang folgt. Das bleibt auch nach dem Speichern erhalten, solange du den Verlauf nicht in eine Bitmap umwandelst.

Konturen sind relativ, nicht absolut. Eine Kontur von zwei Einheiten erscheint bei zehnfacher Vergrößerung zwanzig Pixel breit. Meistens ist das gewollt, denn so bleibt das Verhältnis von Linie und Form erhalten. Bei feinen Rahmen, die optisch gleich dick bleiben sollen, ist es genau der falsche Effekt.

Text ist ein Sonderfall

Text bleibt Text, solange du ihn nicht in Pfade umwandelst. Das ist praktisch, weil du Buchstaben korrigieren kannst, ohne die Form neu zu bauen. Aber SVG-Text hängt von Schriften ab, die beim Rendern vorhanden sein müssen. Fehlt die Schrift, laufen Zeilen um, und die Proportionen kippen.

Der Ausweg ist die Umwandlung in Pfade. Danach sieht alles gleich aus und bleibt überall gleich, nur ist es kein Text mehr. Kein Suchen, kein Ersetzen, keine Übersetzung. Bei einem Logo ist das der Normalfall, bei einer Broschüre eine Sackgasse.

Praktisch heißt das: prüfe, welche Schriften in der Datei stecken, bevor du sie weitergibst, und entscheide dann bewusst. Eine Datei mit offenen Schriften ist bearbeitbar, eine mit Pfaden ist transportfest. Beides zugleich geht nicht.

Was du nicht erwarten solltest

Einen Knopf für alle Farben einer Datei gibt es nicht. Wenn zwanzig Objekte dieselbe Farbe tragen, gehst du sie einzeln durch. Eine pauschale Ersetzung über die ganze Datei ist für diesen Build nicht belegt.

Und eine geänderte Füllung ändert keine Kontur. Bleibt nach dem Umfärben ein Rand stehen, hast du die zweite Eigenschaft noch nicht angefasst. Das ist banal, kostet aber die meiste Zeit.

Wann sich der Aufwand lohnt

Für ein bestehendes Logo, ein Icon-Set oder ein Diagramm ist der Eingriff in einzelne Attribute der schnellste Weg. Für alles, was anschließend in anderer Größe weiterlebt, lohnt der Blick auf SVG ohne Qualitätsverlust skalieren. Und wenn du gerade erst einsteigst, ist der Ablauf unter SVG-Dateien im Browser bearbeiten die sinnvolle Vorstufe.