Unvollständiges Bild beim Exportieren von SVG aus Inkscape

Vielen Dank für Ihre Antworten im Voraus.

Ich habe das folgende Bild in Inkscape, das keine Ebenen hat (der Hintergrund ist normalerweise weiß).

gewünschtes Bild

Wenn ich in optimiertes SVG exportiere, erscheint es unvollständig (und scheinbar zufällig).

unvollständiges Bild

Ich habe versucht, die Gruppen zu ändern, von der Aufhebung der Gruppierung bis zur Gruppierung in einer, aber dies führt nur zu unterschiedlichen unvollständigen Bildern. Ich habe versucht, die Dezimalstellen von 6 auf 5 zu ändern, die 'Collapse Groups' und das Häkchen darunter zu aktivieren und zu deaktivieren.

Was mache ich falsch, damit das Bild falsch als optimierte SVG-Datei exportiert wird? Ich kann PNG oder PDF nicht verwenden, da der Webdesigner speziell nach SVG gefragt hat.

Nochmals vielen Dank im Voraus, und wenn Sie weitere Informationen benötigen, lassen Sie es mich wissen.

Hallo. Willkommen bei GDSE. Dies ist ohne Zugriff auf das SVG schwer zu beantworten und hängt davon ab, wie es erstellt wurde. Einige Dinge, die Sie ausprobieren sollten: Stellen Sie sicher, dass keine Pfadeffekte vorhanden sind, und versuchen Sie, wenn möglich, keine Filter zu verwenden. Versuchen Sie auch, als Dateityp "Plain SVG" zu exportieren. Diese sind in der Regel die Ursache für solche Probleme. Stellen Sie außerdem sicher, dass Sie das SVG in einem neueren/aktuellen Browser anzeigen.
@BillyKerr Danke! Es gibt keine Pfadeffekte oder Filter, ich sehe es im aktuellsten Browser an und das Exportieren als einfaches SVG hat nichts geändert. Wie füge ich die SVG-Datei hinzu, damit Sie sie sehen können?
@BillyKerr Ich habe gerade versucht, das Bild zu kopieren, das in Inkscape korrekt ist, und es in Krita (eine andere Zeichensoftware) einzufügen, und es führte zu demselben unvollständigen Bild, als würde ich die gespeicherte Datei in einem Browser öffnen. Ich bin mir nicht sicher, ob dies nützliche Informationen sind.
Sie können ein SVG-Bild auf SVGshare teilen und den Link posten.
@BillyKerr Bitte schön. Dies ist die unvollständige Version. svgshare.com/i/LH4.svg
Wie ich sehe, haben Sie viele Schnittmasken eingestellt. Ich bin mir nicht sicher, warum auf allen Kreisen im Hintergrund Schnittmasken sind, aber das ist wahrscheinlich das Problem. Ich habe versucht, die große grüne zu lösen und die weiß gefüllte Maske zu entfernen. Und dann funktionierte es, wenn es im Browser angezeigt wurde. Wie haben Sie diese Kreise erstellt?
@BillyKerr Hallo Billy. Toll, dass es funktioniert! Ich setze die Maske, um das Bild so zuzuschneiden, dass es in den gelben Rand passt - das Gemüse um den Rand herum lugt sonst aus den Rändern hervor. Gibt es eine andere Möglichkeit, dies zu tun?
@BillyKerr Ich habe die Kreise nur mit dem Kreiswerkzeug erstellt. Nachdem ich den Hintergrund erstellt hatte, gruppierte ich ihn und benutzte dann die weiße Maske, um ihn so zuzuschneiden, dass er hinter den Rahmen passte. Dies scheint die Probleme zu verursachen (und das Entfernen ist sehr zeitaufwändig - ich habe 60 davon zu tun!)
Ja, es gibt Probleme mit einigen Inkscape-SVG-Funktionen, die in Browsern nicht unterstützt werden. Verwenden Sie am besten keine Schnittmasken, um etwas zu konstruieren. Halten Sie es einfach – nur Formen, Striche und Füllungen, nichts Besonderes. Wenn Sie etwas schneiden müssen, verwenden Sie boolesche Operationen.
@BillyKerr ah! Das könnte einfach funktionieren! Danke Billi!
Außerdem sollte der große gelb gefüllte Kreis das überlappende Gemüse verdecken, sodass es sowieso nicht nötig war, eine Schnittmaske zu verwenden.
Ja, das tut es in diesem (außer den Zwiebelblättern), aber ich habe mehrere andere, bei denen der Hintergrund außerhalb des Rahmens liegt, also werde ich versuchen, diese mit booleschen Operationen zu sortieren. Danke schön!
Ich habe jetzt eine Antwort hinzugefügt und die Kommentare zusammengefasst.

Antworten (1)

Nach der Überprüfung des SVG scheint das Problem mehrere Schnittmasken im gesamten Design zu sein – insbesondere die Hintergrundelemente und Farbblöcke.

Es gibt Probleme mit einigen Inkscape-SVG-Funktionen, die in Browsern nicht unterstützt werden, und es scheint, dass Schnittmasken eine dieser Funktionen sind.

Ich schlage vor, dass Sie diese Schnittmasken freigeben und das Bild stattdessen nur mit Pfaden mit Strichen und Füllungen erstellen. Wenn Sie Objekte zerschneiden müssen, verwenden Sie stattdessen boolesche Operationen.

Beachten Sie auch, dass Sie einfache gefüllte Formen verwenden können, um Überlappungen auszublenden, ohne Schnittmasken zu benötigen.