SVG zu ICO funktioniert nicht? Häufige Ursachen (Schriften, externe Bilder, ViewBox)

SVG ist eines der besten Quellformate zum Generieren von ICO-Dateien. Da SVG ein Vektorformat ist, skaliert es auf jede Größe ohne Qualitätsverlust, was es ideal macht, um die mehreren Größenebenen (16 bis 256 Pixel) zu erzeugen, die eine gute ICO-Datei braucht. Theoretisch ziehen Sie ein SVG in Any2ICO und erhalten sofort eine scharfe ICO-Datei mit mehreren Größen.

In der Praxis können SVG-Dateien knifflig sein. Die SVG-Spezifikation ist umfangreich und komplex, und verschiedene Tools erstellen SVGs mit unterschiedlichen Annahmen darüber, wie die Datei gerendert wird. Ein SVG, das in Adobe Illustrator oder Figma perfekt aussieht, kann fehlerhaft, teilweise oder gar nicht gerendert werden, wenn es in der Canvas-API eines Browsers geöffnet wird, der Rendering-Engine, die browserbasierte Konverter verwenden. Das Ergebnis könnte ein leeres Icon, ein Icon mit fehlendem Text, ein Icon im falschen Maßstab oder ein Icon mit fehlenden Teilen sein.

Die gute Nachricht ist, dass die Probleme gut bekannt sind und die Lösungen unkompliziert. Dieser Artikel behandelt die häufigsten Gründe, warum die SVG-zu-ICO-Konvertierung scheitert oder unerwartete Ergebnisse liefert, und bietet eine klare Lösung für jedes Problem. Wenn Sie den schnellsten Weg zum Erfolg suchen, beginnen Sie mit der Checkliste im nächsten Abschnitt.

Schnelle Checkliste: SVG vor der Konvertierung reparieren

Bevor Sie in die detaillierten Erklärungen eintauchen, hier eine kurze Checkliste, die die Mehrheit der SVG-zu-ICO-Probleme behebt. Gehen Sie diese Punkte zuerst durch; wenn Ihr Problem behoben ist, müssen Sie nicht weiterlesen.

1. viewBox-Attribut hinzufügen oder korrigieren. Öffnen Sie Ihr SVG in einem Texteditor und prüfen Sie das Root-<svg>-Element. Es sollte ein viewBox-Attribut wie viewBox="0 0 100 100" haben, das das Koordinatensystem definiert. Wenn es fehlt, fügen Sie es mit Werten hinzu, die den Abmessungen Ihres Designs entsprechen.

2. Allen Text in Pfade umwandeln. Wählen Sie alle Textelemente in Ihrem Vektoreditor aus und wandeln Sie sie in Pfade um. In Illustrator ist das Schrift > In Pfade umwandeln. In Figma: Rechtsklick und Glätten wählen. In Inkscape: Pfad > Objekt in Pfad. Dies eliminiert Schriftabhängigkeiten vollständig.

3. Externe Referenzen entfernen oder einbetten. Durchsuchen Sie Ihre SVG-Datei nach href, xlink:href und url()-Referenzen, die auf externe Dateien verweisen (Bilder, Schriften, CSS). Betten Sie diese Ressourcen entweder direkt in das SVG ein oder entfernen Sie sie, wenn sie nicht wesentlich sind.

4. Externes CSS durch Inline-Stile ersetzen. Wenn Ihr SVG ein externes Stylesheet referenziert, kopieren Sie die relevanten CSS-Regeln direkt in einen <style>-Block innerhalb des SVG oder wandeln Sie sie in Inline-style-Attribute an jedem Element um.

5. Explizite Breite und Höhe setzen. Obwohl nicht immer erforderlich, hilft das Hinzufügen von width- und height-Attributen zum Root-<svg>-Element der Canvas-API, die korrekte Rendering-Größe zu bestimmen. Verwenden Sie Werte, die 256 Pixel entsprechen oder überschreiten, für die besten Ergebnisse.

Schriften und Text-Rendering

Text ist die einzelne größte Quelle für SVG-Konvertierungsprobleme. Wenn ein SVG <text>-Elemente enthält, benötigt der Renderer Zugriff auf die angegebene Schrift, um den Text korrekt darzustellen. In einer Designanwendung wie Illustrator oder Figma ist die Schrift auf Ihrem Computer installiert, sodass alles richtig aussieht. Aber wenn das SVG in der Canvas-API eines Browsers für die ICO-Konvertierung gerendert wird, ist die Situation ganz anders.

Die Canvas-API kann nur Schriften verwenden, die dem Browser zur Renderzeit zur Verfügung stehen. Wenn Ihr SVG font-family: "Proxima Nova" angibt und diese Schrift nicht auf dem System des Benutzers installiert oder als Webschrift geladen ist, substituiert der Browser eine Standardschrift (normalerweise eine generische Sans-Serif oder Serif). Dies ändert das Erscheinungsbild des Textes: Buchstabenabstände verschieben sich, Zeichen können breiter oder schmaler sein und das gesamte Layout kann brechen. In einigen Fällen wird der Text überhaupt nicht gerendert, wenn das SVG erweiterte Schriftfunktionen oder Ligaturen verwendet, die die Fallback-Schrift nicht unterstützt.

Die zuverlässige Lösung ist, allen Text in Pfade umzuwandeln (auch "in Konturen umwandeln" oder "Text glätten" genannt). Dies ersetzt jedes Textzeichen durch einen Vektorpfad, der seine exakte Form beschreibt. Das resultierende SVG referenziert keine Schrift mehr, da die Buchstabenformen als geometrische Pfade gezeichnet werden. Die SVG-Datei wird etwas größer, rendert aber auf jedem System, in jedem Browser und durch jede Canvas-API identisch, unabhängig davon, welche Schriften installiert sind.

In Illustrator: Wählen Sie allen Text aus, dann gehen Sie zu Schrift > In Pfade umwandeln. In Figma: Wählen Sie Textebenen aus, Rechtsklick und Glätten wählen. In Inkscape: Text auswählen, dann Pfad > Objekt in Pfad verwenden. Speichern Sie immer das originale bearbeitbare SVG separat, bevor Sie in Pfade umwandeln, da umgewandelter Text nicht mehr als Text bearbeitet werden kann.

Externe Bilder und Referenzen

SVG-Dateien können externe Ressourcen referenzieren: Bilder, die über <image href="/de/logo.png"> geladen werden, Schriften über @font-face mit einer URL, CSS-Dateien, die über <?xml-stylesheet?> verknüpft sind, und Muster oder Verläufe, die andere SVG-Dateien referenzieren. Wenn das SVG als eigenständige Datei in einem browserbasierten Konverter geöffnet wird, schlagen diese externen Referenzen fast immer fehl.

Die Canvas-API rendert das SVG in einem sandboxierten Kontext, in dem Cross-Origin-Anfragen aus Sicherheitsgründen blockiert werden. Ein <image>-Element, das auf https://example.com/logo.png verweist, wird nicht geladen, weil der Browser den Cross-Origin-Abruf blockiert. Das Ergebnis ist ein leerer Bereich, wo das Bild sein sollte. Das Gleiche gilt für extern gehostete Schriften, Stylesheets und alle per URL referenzierten Ressourcen.

Sogar relative Pfade wie href="/de/logo.png" werden fehlschlagen, weil das SVG im Speicher von der Canvas-API verarbeitet wird, nicht aus einem Verzeichnis bereitgestellt, in dem relative Pfade aufgelöst werden können. Es gibt keinen Dateisystem-Kontext, den das SVG referenzieren kann.

Die Lösung besteht darin, alle externen Ressourcen direkt in das SVG einzubetten. Für Bilder wandeln Sie sie in Base64-Daten-URIs um: <image href="data:image/png;base64,iVBOR...">. Für Schriften verwenden Sie eine Base64-kodierte @font-face-Deklaration innerhalb eines <style>-Blocks im SVG (obwohl die Umwandlung von Text in Pfade normalerweise einfacher und zuverlässiger ist). Für CSS kopieren Sie alle Regeln in ein Inline-<style>-Element innerhalb des <svg>-Tags.

ViewBox, Breite und Höhe Probleme

Das viewBox-Attribut definiert das Koordinatensystem eines SVG. Es teilt dem Renderer mit, welchen Teil der unendlichen SVG-Leinwand er anzeigen soll und wie der Inhalt skaliert werden soll. Wenn viewBox fehlt oder falsch ist, reichen die Ergebnisse von leerer Ausgabe bis zu einem Icon, das nur eine Ecke des Designs zeigt oder im falschen Seitenverhältnis rendert.

Fehlende viewBox: Wenn das SVG width und height hat, aber keine viewBox, werden einige Renderer die viewBox aus den Abmessungen ableiten, aber die Canvas-API tut dies möglicherweise nicht. Der sicherste Ansatz ist, immer eine explizite viewBox einzuschließen. Wenn Ihr SVG bei 100x100 Einheiten entworfen ist, fügen Sie viewBox="0 0 100 100" zum Root-Element hinzu.

viewBox passt nicht zum Inhalt: Wenn die viewBox-Koordinaten nicht den gesamten Inhalt des SVG umfassen, werden Teile des Designs abgeschnitten. Wenn Ihr Icon zum Beispiel Elemente hat, die sich bis x=120 erstrecken, aber die viewBox nur 0 bis 100 abdeckt, sind die rechten 20 Einheiten unsichtbar. Öffnen Sie das SVG in einem Texteditor, untersuchen Sie die viewBox-Werte und passen Sie sie an, um alle sichtbaren Elemente zu umfassen.

Breite/Höhe auf 0 oder sehr kleine Werte gesetzt: Einige SVG-Export-Tools setzen Breite und Höhe auf sehr kleine Werte wie 1px oder 0 und verlassen sich darauf, dass CSS das SVG bei der Anzeige auf einer Webseite skaliert. Wenn die Canvas-API diese Abmessungen liest, rendert sie das SVG möglicherweise bei 1x1 Pixel und skaliert dann hoch, was eine komplett leere oder stark unscharfe Ausgabe erzeugt. Setzen Sie Breite und Höhe auf mindestens 256 Pixel, um der Canvas-API eine vernünftige Rendering-Größe zu geben.

Prozentuale Abmessungen: Ein SVG mit width="100%" height="100%" hat keine intrinsische Größe. Die Canvas-API benötigt absolute Pixelwerte, um eine Rendering-Oberfläche zu erstellen. Ersetzen Sie prozentuale Abmessungen durch absolute Werte wie width="512" height="512".