So erkennst du, ob ein SVG ein Rasterbild enthält

Ja, ein SVG kann ein Rasterbild enthalten. Es kann Vektorpfade und Pixel im selben Dokument speichern oder kaum mehr als eine Hülle um ein PNG oder JPEG sein. Die Endung .svg verrät das Containerformat, nicht, ob jeder sichtbare Teil aus Vektoren besteht.

Die zuverlässige Prüfung untersucht sowohl die Objekte als auch den Datei-Quelltext. Zoomen hilft, ein Problem zu bemerken, verrät aber nicht, ob eine App ihre Vorschau rastert oder die Pixel tatsächlich im SVG gespeichert sind.

Für eine WPF-Anwendung trennt der Leitfaden zur SVG-Darstellung in WPF die SVG-Quelle von nativen Zeichenobjekten und Bitmap-Ausgabe. Prüfe, was die App erhält, bevor du eine gerasterte Darstellung als Beleg über die Originaldatei wertest.

Was ein SVG enthalten kann

SVG ist ein XML-basiertes Grafikformat, dessen Inhaltsmodell mehr als nur Pfade umfasst. Die SVG-2-Spezifikation zu eingebetteten Inhalten definiert ein <image>-Element, das eine vollständige referenzierte Datei in einem Rechteck platziert. Diese Datei kann ein PNG, JPEG oder ein anderes SVG sein.

Daraus entstehen vier häufige Strukturen:

Gemischter Inhalt ist nicht automatisch falsch. Eine Karte kann Pfade für Beschriftungen und Grenzen nutzen und eine schattierte Satellitenebene als Raster behalten. Eine Produktgrafik kann ein bearbeitbares Abzeichen über einem Foto platzieren. Das Problem beginnt, wenn du von einer Konvertierung bearbeitbare Pfade erwartet hast und Pixel in einem anderen Container erhältst.

Prüfung 1: Objekte untersuchen

Öffne das SVG in Illustrator, Inkscape, Affinity Designer oder einem anderen Editor mit einem Objekte- oder Ebenenbedienfeld. Wähle den Bereich aus, den du für Rasterinhalt hältst.

• Ein einzelnes rechteckiges Objekt, das als Bild bezeichnet wird, ist ein starker Hinweis auf Bildinhalt.
• Sichtbare Knoten entlang der tatsächlichen Grafikkanten zeigen Vektorgeometrie an.
• Ein Beschneidungspfad kann ein rechteckiges Bild verbergen. Klappe deshalb den Ebenen- oder Objektbaum auf, bevor du entscheidest.
• Pfade an anderer Stelle beweisen nicht, dass das gesamte Dokument aus Vektoren besteht. Eine Datei kann beides enthalten.

Diese Prüfung ist für Designer hilfreich, die kein XML lesen möchten, hat aber eine Grenze: Ein rechteckiges <image>-Objekt kann auf ein anderes SVG verweisen. Die Quelltextprüfung verrät, was das Objekt tatsächlich lädt.

Prüfung 2: SVG-Quelltext untersuchen

Erstelle eine Kopie und öffne die .svg-Datei dann in einem reinen Texteditor. Suche nach <image. Wenn es kein Bildelement gibt, fehlt der übliche Mechanismus zum Einbetten von Bildern. Wenn du eines findest, lies seinen href-Wert.

Ein eingebettetes PNG beginnt häufig so:

<image href="data:image/png;base64,iVBORw0KGgo..." />

Ein eingebettetes JPEG beginnt typischerweise mit data:image/jpeg;base64,. MDNs Data-URL-Referenz erklärt, dass die Daten direkt in der URL stehen, optional mit Base64-Kodierung. Ein sehr langer unlesbarer Datenblock ist bei dieser Form normal.

Ein verknüpftes Rasterbild sieht eher so aus:

<image href="photos/product-shot.png" />

Dieses PNG ist nicht im SVG gespeichert. Das Dokument hängt von einer separaten Datei unter diesem Pfad ab. Wenn du das SVG ohne das Bild verschiebst oder per E-Mail versendest, kann die Grafik verschwinden.

Das hier ist schließlich kein Beweis für Rasterinhalt:

<image href="icons/mark.svg" />

Die <image>-Referenz auf MDN weist ausdrücklich darauf hin, dass das Element Rasterformate oder ein anderes SVG anzeigen kann. Prüfe Medientyp oder Dateiendung, bevor du es einordnest.

Drei Strukturen innerhalb oder neben einem SVG

Eingebettet und verknüpft sind unterschiedliche Probleme

Beim Bildimport kann Inkscape ein Bild verknüpfen oder einbetten. Sein Leitfaden zum Bildimport beschreibt den Kompromiss klar: Verknüpfen hält das SVG kleiner, macht das Dokument aber vom Speicherort des Bilds abhängig; Einbetten macht das SVG eigenständig, vergrößert es jedoch.

Dieser Unterschied zählt bei der Übergabe:

• Eingebettetes Rasterbild: Als einzelne Datei transportierbar, aber weiterhin auflösungsgebunden und oft viel größer als erwartet.
• Verknüpftes Rasterbild: Leichter unabhängig zu aktualisieren, aber anfällig beim Verschieben zwischen Ordnern, Computern, Websites oder Anbietern.
• Vektorpfade: Als Geometrie bearbeitbar, aber nur, wenn die Vorlage überhaupt als Pfade vektorisiert oder gezeichnet wurde.

Einbetten ist Verpackung, keine Vektorisierung. Base64 verwandelt Pixel nicht in Kurven. Wenn du Stockgrafiken vorbereitest, folge der Prüfung für Adobe-Stock-Vektoreinreichungen für zusätzliche Zeichenflächen-, Bearbeitbarkeits- und Quellenprüfungen.

Warum Zoomen nicht reicht

Wenn der verdächtige Bereich bei starker Vergrößerung in mehreren Viewern blockartig wird, ist er wahrscheinlich Rasterinhalt. Ein Viewer kann jedoch ein ansonsten intaktes SVG für ein Vorschaubild, Canvas, eine Druckvorschau oder einen Importcache rastern. Umgekehrt kann ein hochauflösendes eingebettetes PNG bei normalem Zoom glatt aussehen und unbemerkt im Dokument stecken.

Nutze Zoom als Symptomprüfung und bestätige dann mit Objekten oder Quelltext. Der umfassendere Leitfaden dazu, warum ein SVG verpixelt aussieht, trennt eingebetteten Inhalt von Viewer-Verhalten und der Darstellung kleiner Icons. Vergleiche für eine Canvas-Anwendung Konva-Bildimporte und bearbeitbare Pfadimporte, bevor du einen einzelnen Bildknoten als Problem der SVG-Quelle interpretierst.

Entscheide, ob du es behältst, neu verknüpfst oder ersetzt

Behalte Rasterinhalt, wenn Pixel beabsichtigt sind

Fotos, Scans, Textur, weiches Licht und komplexe gemalte Details gehören oft ins Rasterformat. Wenn das SVG dieses Bild mit Vektorbeschriftungen oder Überlagerungen kombinieren soll, kann eine gemischte Datei der richtige Entwurf sein. Bestätige, dass das Rasterbild in der endgültigen physischen Größe genug Auflösung hat, und entscheide, ob die Übergabe eigenständig oder mit verknüpften Assets verpackt erfolgen soll.

Verknüpfe neu oder bette ein, wenn Transportierbarkeit das Problem ist

Wenn ein verknüpftes Bild auf einem anderen Computer verschwindet, verpacke entweder SVG und Bild mit derselben relativen Ordnerstruktur oder bette das Bild vor der Übergabe ein. Das repariert die fehlende Ressource. Es macht das Bild nicht als Pfade bearbeitbar.

Ersetze Rasterinhalt, wenn Pfade versprochen wurden

Wenn ein Konverter ein flächiges Logo, Icon oder eine Linienzeichnung in ein SVG verpackt hat, suche das ursprüngliche PNG oder JPEG. Ist das Original nicht verfügbar, extrahiere das eingebettete Bild oder exportiere dieses Objekt in seiner nativen Größe. Wandle das Bild dann in Vektorpfade um, prüfe die Formen und ersetze das <image>-Objekt durch das geprüfte Vektorergebnis.

PerfectVector hilft bei der Rekonstruktion geeigneter flächiger Grafiken als bearbeitbare Formen. Es macht aus Tonwertfotografie nicht wie von selbst einen kleinen originalgetreuen Satz Pfade. Behalte bei einem Foto das Rasterbild, sofern keine bewusst tonwertreduzierte Interpretation das Ziel ist. Wenn du eine PNG-Ausgabekopie eines freigegebenen SVG brauchst, rendere mit Sharp direkt in der endgültigen Pixelgröße; das Vergrößern eines kleinen PNG kann keinem in diesem SVG eingebetteten Rasterbild Details hinzufügen.

Scratch-Nutzer sollten prüfen, warum Convert to Vector keine Bitmap vektorisiert, bevor sie eine weitere Hülle exportieren.

Baue Effekte neu auf, die beim Export gerastert wurden

Manche SVGs bestehen überwiegend aus Vektoren, enthalten aber einen gerasterten Schatten, eine Unschärfe, Textur oder einen nicht unterstützten Effekt. Entscheide, ob der Effekt bearbeitbar und transportierbar bleiben muss. Baue einen einfachen Effekt mit unterstützten Vektorfunktionen neu auf, reduziere ihn bewusst auf ein Rasterbild in Ausgabeauflösung oder entferne ihn. Das Vektorisieren eines weichen Schattens erzeugt meist verrauschte Formen statt eines besseren Effekts.

Übergabeprüfung für gemischte SVGs

Bevor du die Datei an eine Website, Druckerei, einen Cutter oder Mitarbeiter sendest:

1. Suche im Quelltext nach <image, data:image/, .png, .jpg und .jpeg.
2. Bestätige, ob jede referenzierte Ressource Rasterinhalt, Vektorinhalt oder gar nicht vorhanden sein soll.
3. Verschiebe verknüpfte Dateien vorübergehend und öffne das SVG erneut, um defekte Abhängigkeiten sichtbar zu machen.
4. Wähle die wichtige Grafik aus und prüfe, ob die als bearbeitbar vorgesehenen Teile Pfade sind.
5. Prüfe die nativen Pixelabmessungen des Rasterbilds anhand seiner endgültigen Anzeige- oder Druckgröße.
6. Öffne die übergebene Kopie in einer zweiten Anwendung erneut.
7. Behalte die Originalquelle und eine Rasteransicht als Darstellungsreferenz, wenn die Darstellung wichtiger als die Bearbeitbarkeit ist.

Entferne für Schneiden oder Fertigung dekorativen Rasterinhalt aus der Maschinendatei und führe die SVG-Prüfung vor dem Schneiden durch. Ein Cutter folgt Pfaden; er wandelt ein eingebettetes Foto nicht in eine Schnittkontur um.

FAQ

Kann ein SVG ein PNG oder JPEG enthalten? Ja. Ein SVG-Bildelement kann auf ein PNG oder JPEG als separate Datei verweisen oder dessen Daten innerhalb des SVG tragen. Das Rasterbild behält sein ursprüngliches pixelbasiertes Verhalten.

Bedeutet ein image-Tag immer, dass das SVG ein Rasterbild enthält? Nein. Das image-Element kann auch auf ein anderes SVG verweisen. Prüfe seinen href- oder älteren xlink:href-Wert auf Medientyp, Data-URL oder Dateiname, bevor du es einordnest.

Woran erkenne ich, ob das Rasterbild eingebettet oder verknüpft ist? Ein eingebettetes Bild hat normalerweise einen href-Wert, der mit data:image beginnt. Seine Bytes liegen also im SVG. Ein verknüpftes Bild hat einen Pfad oder eine URL wie images/photo.png und hängt von dieser separaten Ressource ab.

Kann ich ein eingebettetes Bild aus einem SVG entfernen? Ja. Lösche es, wenn es unnötig ist, ersetze es durch ein bewusst gewähltes Rasterasset oder vektorisiere geeignete flächige Grafiken und setze die resultierenden Pfade ein. Behalte vor dem Bearbeiten des XML eine Sicherung.

Warum enthält mein SVG Pfade und ein Bild? Es ist ein gemischtes SVG. Die Datei kann bewusst ein Foto mit Vektorüberlagerungen kombinieren, oder ein Exporter hat einen Effekt gerastert. Prüfe vor Änderungen, welche Teile bearbeitbar sein müssen.

Quellen

1. W3C — SVG 2: Eingebettete Inhalte — Definiert das <image>-Element, seinen href-Wert und die Raster- oder SVG-Ressourcen, auf die es verweisen kann.
2. MDN — SVG <image> — Praktische Referenz zu unterstützten Bildinhalten und Größenverhalten.
3. Inkscape-Einsteigerhandbuch — Bilder importieren — Erklärt verknüpfte und eingebettete importierte Bilder sowie den Kompromiss bei der Transportierbarkeit.
4. MDN — Data-URLs — Dokumentiert das data:-Schema, mit dem Bilddaten häufig innerhalb eines SVG gespeichert werden.

Du hast eine verpackte Bitmap gefunden, wo bearbeitbare Pfade sein sollten? Wandle die ursprüngliche flächige Grafik in einen echten Vektor um, öffne das SVG erneut und prüfe, ob sich die wichtigen Objekte jetzt als Formen auswählen lassen.