SVG in falscher Größe importiert: Ursachen und Lösungen

Wenn eine SVG in der falschen Größe importiert wird, sind die Pfade meist nicht beschädigt. Die exportierende und die importierende App sind sich nicht darüber einig, wie die Koordinateneinheiten der SVG in Pixel, Zoll oder Millimeter übersetzt werden. Deshalb kann dieselbe Datei im Browser korrekt aussehen, in Figma winzig erscheinen und in CAD- oder Schneidesoftware wieder einen anderen Maßstab haben.

Zeichne noch nichts neu und ändere noch nicht die Größe einzelner Teile. Füge ein Referenzquadrat mit bekannter Größe hinzu, importiere die ganze Datei und miss dieses Quadrat. Eine einzige Messung zeigt dir, ob sich der Dokumentmaßstab geändert hat oder die Grafik selbst falsch ist.

Die drei Größen innerhalb einer SVG

Eine SVG kann drei miteinander verbundene Dinge beschreiben, die umgangssprachlich alle als ihre „Größe“ bezeichnet werden. Die SVG-2-Spezifikation zu Koordinatensystemen definiert die Beziehung zwischen Benutzerkoordinaten, Darstellungsbereich und viewBox.

1. Die Geometrie besteht aus den Koordinaten innerhalb von Pfaden und Formen. Ein Rechteck kann im eigenen Koordinatensystem der Datei von 0 bis 100 reichen.
2. Die viewBox legt fest, welches Rechteck dieses Koordinatensystems sichtbar sein soll. viewBox="0 0 100 100" bedeutet, dass die sichtbare Zeichenfläche in jeder Richtung 100 Benutzereinheiten umfasst.
3. Der Darstellungsbereich ist die angezeigte oder importierte Größe. Das Wurzelelement kann width="100mm", width="400" oder gar keine Breite angeben. Die empfangende App entscheidet dann, wie sie diesen Wert in ihre eigenen Dokumenteinheiten umwandelt.

Hier ist ein vollständiges Quadrat von 100 Einheiten mit einer ausdrücklich angegebenen physischen Ausgabegröße:

<svg xmlns="http://www.w3.org/2000/svg"
  width="25mm" height="25mm" viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="#2563eb" />
</svg>

Die Geometrie ist 100 mal 100 Benutzereinheiten groß, während der vorgesehene Darstellungsbereich 25 mal 25 mm misst. Die viewBox bildet den einen Koordinatenraum auf den anderen ab. Entfernst du width und height oder ersetzt sie durch Zahlen ohne Einheit, hat ein Importprogramm mehr Spielraum bei der Wahl der angezeigten Größe.

Die ausführliche Anleitung zum Bearbeiten einer SVG erklärt sichere Codeänderungen. Lass bei diesem Problem die Pfaddaten unangetastet, während du das Wurzelelement <svg> prüfst.

Warum oft DPI verantwortlich gemacht wird

SVG-Pfade haben keine Pixelauflösung wie ein PNG oder JPG. DPI kommen ins Spiel, wenn Software zwischen CSS-Pixeln und physischen Einheiten umrechnet oder eine Design-App diesen Einheiten ihre eigene Exportkonvention zuordnet.

Die CSS-Values-Spezifikation definiert 1in als 96 CSS-Pixel und 1pt als 1/72 Zoll. Ein Workflow, der CSS-Pixel fälschlich als Punkte behandelt, erzeugt die bekannte Maßstabsabweichung von 96 zu 72 beziehungsweise 1,333. Andere Faktoren können entstehen, wenn ein Importprogramm physische Angaben für width und height ignoriert, nur die viewBox verwendet oder seine eigene Einstellung für Dokumenteinheiten anwendet.

Deshalb ist „Ändere die DPI“ ein unvollständiger Rat. Möglicherweise gibt es überhaupt keinen Raster-DPI-Wert zu ändern. Berechne zuerst den Skalierungsfaktor:

scale factor = intended size / imported size

Wenn ein Quadrat von 100 mm als 75 mm importiert wird, ist der Korrekturfaktor 100 / 75 = 1.3333. Skaliere die gesamte importierte Skizze oder das Dokument um diesen Faktor und prüfe das Quadrat erneut.

Das Referenzquadrat trennt zwei Probleme, die beim ersten Import gleich aussehen können. Weichen Quadrat und Grafik im selben Verhältnis ab, korrigiere das gesamte Dokument. Stimmt das Quadrat, die Grafik aber nicht, lass die Dokumenteinheiten unverändert und prüfe die Begrenzungen oder Transformationen der Grafik.

Führe den Test mit einem Referenzquadrat durch

Verwende ein Quadrat, das groß genug zum bequemen Messen ist, aber noch neben die Grafik passt.

1. Zeichne im Quelleditor ein Quadrat mit genau 10 mm, 1 Zoll oder einer anderen bekannten Größe.
2. Gib ihm eine auffällige Füllung oder Kontur und platziere es außerhalb des fertigen Designs.
3. Exportiere Grafik und Quadrat zusammen als eine SVG.
4. Importiere die Datei in die Ziel-App, ohne an einem Griff zur Größenänderung zu ziehen.
5. Miss das Quadrat mit dem Bemaßungswerkzeug der Ziel-App.
6. Teile das vorgesehene Maß durch das importierte Maß.
7. Skaliere den gesamten Import einmal. Ändere nicht die Größe einzelner Formen.
8. Lösche das Quadrat erst, wenn die abschließende Messung stimmt.

Dieser Test deckt auch eine Fehldiagnose auf. Wird das Referenzquadrat korrekt importiert, sind die Dokumenteinheiten wahrscheinlich in Ordnung. Suche stattdessen nach einer transformierten Gruppe, einer Kontur, deren sichtbare Breite in die Begrenzung eingerechnet wurde, einem Objekt außerhalb der Zeichenfläche oder einem Importprogramm, das Inhalte an eine Seite anpasst. Verändert eine spitze Konturecke die sichtbaren Begrenzungen, folge der Diagnose von Gehrungsspitzen, bevor du den physischen Maßstab des Dokuments änderst.

Verwende für CNC-, Laser- und 3D-Arbeiten ein Quadrat mit physischen Einheiten. Ein Pixelquadrat kann die proportionale Skalierung bestätigen, beweist aber nicht die Millimetermaße, die ein Maschinenworkflow benötigt.

Die Datei oder den Import korrigieren?

Die Datei zu bearbeiten ist sinnvoll, wenn du die Originaldatei kontrollierst und sie wiederholt an denselben Workflow-Typ übergibst. Den Import zu korrigieren ist sicherer, wenn eine CAD- oder Schneide-App eine bekannte Maßstabskonvention hat und die SVG sich überall sonst bereits korrekt verhält.

CAD- und Schneidesoftware benötigen eine zusätzliche Prüfung

Ein Browser muss das Bild nur zeichnen. CNC-, Laser- und 3D-Workflows brauchen ein exakt maßhaltiges Ergebnis. Wenn der Maßstab stimmt, prüfe die Geometrie separat:

• Vergewissere dich, dass das Maschinendokument die erwarteten Einheiten verwendet.
• Miss ein tatsächliches Merkmal, nicht nur den gesamten Begrenzungsrahmen.
• Prüfe, ob geschlossene Profile geschlossen bleiben.
• Suche nach einem versteckten Hintergrundrechteck, das die Begrenzungen vergrößert hat.
• Prüfe die Werkzeugbahn-, Skizzen- oder Extrusionsvorschau, bevor du Material bearbeitest.

Die Anleitung von Bild zu SVG für CNC behandelt die Pfadbereinigung und Übergabe an CAM. Ist der nächste Schritt eine Extrusion, nutze den SVG-Workflow für den 3D-Druck, sobald der Maßstab stimmt.

Für Shaper Origin geht es mit der Checkliste für physische Größe und Schnittart weiter. Den Maßstab zu bestätigen ist ein Schritt; vor dem Fräsen benötigen die importierten Pfade auch die vorgesehenen Schnittzuweisungen.

Nachdem du die vorgesehenen Maße bestätigt hast, prüfe die Größe auf einer Schneidematte, bevor du den letzten Vorbereitungsbildschirm deines Schneideplotters erreichst.

Für gedruckte Bildkarten prüft die Layout-Anleitung für visuelle Ablaufkarten die Einpassung der Grafik, PDF-Seitenmaße und Druckskalierung. Eine korrekt große SVG kann trotzdem auf einer Seite landen, die der Drucker verkleinert.

Wo PerfectVector ins Spiel kommt

PerfectVector wandelt Rastergrafiken in bearbeitbare SVG-Pfade um. Der Workflow für SVG und DXF für CNC ist hilfreich, wenn die einzige Vorlage ein PNG oder JPG ist und du Vektorgeometrie für CAM brauchst. PerfectVector kennt die endgültige physische Größe deines Bauteils nicht. Deshalb musst du die Maße weiterhin in der Zielsoftware festlegen und überprüfen.

Diese Aufgabenteilung ist wichtig. Die Vektorisierung gewinnt skalierbare Formen zurück. Ein Quadrat bekannter Größe und eine CAM-Messung legen den physischen Maßstab fest. Behandelst du das als zwei getrennte Prüfungen, verhinderst du, dass eine saubere Nachzeichnung zu einem Schnitt mit falschen Maßen wird.

Häufige Fragen

Warum wird meine SVG kleiner importiert, als sie exportiert wurde? Die exportierende und importierende App können SVG-Benutzereinheiten, CSS-Pixel, Punkte oder physische Einheiten unterschiedlich zuordnen. Füge ein Quadrat mit bekannter Größe hinzu und vergleiche seine vorgesehenen und importierten Maße. Hat sich die gesamte Datei um denselben Faktor verändert, skaliere das Dokument einmal, statt einzelne Pfade zu bearbeiten.

Hat eine SVG DPI? SVG-Geometrie ist auflösungsunabhängig und hat daher keine feste Pixeldichte wie ein Rasterbild. DPI-ähnliche Umrechnungen sind relevant, wenn Software CSS-Pixel oder Designeinheiten in Zoll oder Millimeter übersetzt. Häufig liegt die Abweichung an der Konvention des Importprogramms und nicht an einer verborgenen Bildauflösung.

Wie beeinflusst die viewBox die SVG-Größe? Die viewBox definiert das sichtbare Koordinatenrechteck und lässt den Renderer diese Benutzereinheiten auf den Darstellungsbereich abbilden. Sie legt allein keine physische Größe fest. width und height am Wurzelelement, CSS oder die empfangende Anwendung bestimmen, wie groß dieser Darstellungsbereich wird.

Warum hat meine SVG im Browser die richtige Größe, in Fusion oder LightBurn aber nicht? Ein Browser kann die SVG in einem CSS-Darstellungsbereich rendern, während CAD- und Lasersoftware sie auf physische Dokumenteinheiten abbilden müssen. Diese Importprogramme können eine andere Konvention nutzen oder einen Teil der Größenmetadaten der SVG ignorieren. Miss ein Referenzquadrat und korrigiere den gesamten Import mit dem daraus ermittelten Skalierungsfaktor.

Sollte ich die SVG in DXF umwandeln, um ihre Größe zu korrigieren? Nicht als ersten Schritt. Eine Formatkonvertierung kann dieselbe Maßstabsunklarheit übernehmen oder eine weitere hinzufügen. Ermittle den Faktor zuerst mit einem Referenzquadrat. Verwende DXF, wenn der Zielworkflow es bevorzugt, und prüfe die Maße nach dem Import erneut.

Quellen

1. W3C — SVG-2-Koordinatensysteme — Definiert Benutzereinheiten, Darstellungsbereiche, viewBox und Transformationen.
2. W3C — CSS Values and Units Level 4 — Definiert die Referenzumrechnungen zwischen CSS-Pixeln, Zoll und Punkten.
3. Autodesk Fusion — SVG einfügen — Dokumentiert die Platzierungs- und Maßstabssteuerung von SVG in Fusion-Skizzen.

Vor einer Werkzeugbahn oder einem Schnitt bereite die SVG oder DXF für CNC vor und prüfe das Ergebnis. Miss das Referenzquadrat und ein tatsächliches Merkmal und prüfe die abschließende CAM-Vorschau, bevor du das Quadrat aus der Produktionsdatei entfernst.