Den weissen Hintergrund eines SVG-Logos entfernen

Gestern die (viel zu späte) Idee: Anstelle popelige Logos in den Bitmap-Formaten PNG oder — Gott bewahre — GIF in eine Web-Applikation einzubinden, könnte man ja eigentlich 2020 auch SVGs verwenden. Denn die sehen dann auch auf einem Retina iMac blendend aus.

Glücklicherweise findet man auf Wikipedia sehr viele Unternehmens-Logos im SVG-Format herunterladbar. Ich habe mir also die gewünschten Logos heruntergeladen und in die Web-Applikation eingebunden. Transparenz, Farbverläufe, hochauflösend — alles perfekt.

Ausser bei einem SVG-Logo (dieses ausnahmsweise nicht von Wikipedia), welches partout mit einem weissen Hintergrund daherkommt: Gefunden habe ich das TWINT-Logo auf weissem Hintergrund auf der Web-Site von Zubi Schuhe.

Um den Hintergrund wegzubekommen evaluierte ich verschiedenste Wege:

Online Vektor-Editor (SaaS): Mit Vector Paint – SVG Editor hätte es eigentlich geklappt, doch beim Export (Download) wurden die Farbverläufe zerschossen.

Native macOS-Applikation: macSVG läuft unter macOS High Sierra nicht

OSS Vektor-Applikation (Adobe Illustrator-Ersatz): Inkscape benötigt eine funktionierende Installation von XQuartz

Dann die letzte Hoffnung: SVG ist ja im Grunde ein XML-Format … was, wenn ich versuche, die Datei in Atom zu öffnen, das Hintergrund-Element zu finden und von Hand zu löschen?

Gesagt, getan. Und ich hätte mir fast die Haare ausreissen können: Es waren null Handstände nötig, denn der Hintergrund wird als Rechteck zu Beginn des SVGs definiert:

<rect width="100%" height="100%" fill="#fff" ry="15"/>

Die Anpassung bestand deshalb nur daraus, den Hex-Farbwert für Weiss — #fff — mit none zu ersetzen:

<rect width="100%" height="100%" fill="none" ry="15"/>

Fertig! (Ja, im Grund könnte man eigentlich auch die ganze Zeile löschen …)