Ändern Sie das Viewbox-Attribut in Svg, das vom Illustrator exportiert wurde

Ich habe eine SVG-Datei mit viewBox = "- 155.7 -99 510 510". Ich glaube, das hat die Pfade in der Vorschau von Mac OS X um -155.7 -99 verschoben. Wenn ich die SVG-Datei in Illustrator öffne, werden die Pfade überhaupt nicht versetzt. Wie exportiere ich diese Svg so, dass:

1. viewBox = "0 0 510 510"
2. und alle Pfade wurden von -155,7 -99 abgesetzt

Ich habe versucht, die Position der Zeichenfläche zu ändern, aber der Ursprung von viewbox ist niemals 0,0.

Ich habe ein wenig über SVGs recherchiert und anscheinend ist die Viewbox kein Element, das über Illustrator exportiert werden kann. Das viewbox-Element ist nur mit bestimmten Programmen kompatibel, die dieses Element verwenden oder bearbeiten möchten. Leider gehört Illustrator nicht dazu.

Wenn Sie die SVG-Datei aus Illustrator ohne die Option "Illustrator-Bearbeitungsfunktionen beibehalten" gespeichert haben, können Sie den Vorgang umkehren. Alle Änderungen, die Sie an den Daten der SVG-Datei vornehmen, werden dann in Illustrator übernommen, jedoch durch Neupositionieren und Ändern der Größe von Zeichenfläche und Ebenen, um eine Pseudo-Ansichtsbox zu erstellen.

Derzeit können Sie nur in Illustrator entwerfen und den gesamten zusätzlichen Code zum Versetzen und Positionieren der Viewbox in den Dateidaten verwenden. Sie können eine Pseudo-Viewbox erstellen, indem Sie einfach die Position Zeichenflächenbreite + -höhe / X + Y und anschließend die Attribute Objektgröße und -position ändern. Es wird jedoch niemals ein echtes Viewbox-Attribut geben, es sei denn, sie veröffentlichen ein Update für Illustrator mit bearbeitbaren Viewbox-Funktionen.

Lesen Sie etwas über das SVG-Format in Illustrator: Adobe Illustrator Im SVG-Format speichern

Ich bin mehrmals auf dieses Problem gestoßen, und das einzige, was mir jemals geholfen hat, die SVG-Ansichtsbox beim Exportieren aus Illustrator zuverlässig auf genau 0, 0 zurückzusetzen, ist , ein neues leeres Dokument zu erstellen und das Bildmaterial zu kopieren und darin einzufügen .

Die linke obere Ecke dieser unberührten Standard-Zeichenfläche wird als Punkt 0, 0 des Ansichtsfelds exportiert. Verwenden Sie die intelligenten Hilfslinien ( cmd-u) oder das alignFenster, um festzulegen, Align to Artboardob Ihre Grafik genau bei 0, 0 beginnen soll.

Sie können die Zeichenfläche sicher von der unteren rechten Ecke aus in der Größe ändern, aber wenn Sie die obere linke Ecke verschieben, kann es zu Problemen kommen. Das Verschieben der linken oberen Ecke der Zeichenfläche oder das Importieren von SVG-Dateien in AI führt anscheinend zu einer seltsamen internen Trennung zwischen Linealen, Zeichenflächen und einem unsichtbaren Ursprungspunkt der geheimen Ansichtsbox, der nur Illustrator bekannt ist.

AFAICT Wie bei den meisten Dingen, die mit Web- oder aufstrebenden Technologien zu tun haben, bestand Adobes Ansatz bei SVG darin, etwas Grobes zusammenzubringen, damit sie sich in einer Pressemitteilung damit rühmen und es dann fehlerhaft, unvollendet und ungeliebt lassen können existieren und weitermachen wie 1998.

Ich weiß, dass das Thema sehr spät ist, aber ich hatte das gleiche Problem und habe Folgendes getan.

1. Öffnen Sie die SVG-Datei in einem Texteditor und ändern Sie das viewBox-Attribut in 0 0 xy
2. Speichern Sie es und öffnen Sie es erneut in Illustrator
3. Das Bildmaterial wird nun außerhalb der Zeichenfläche positioniert - verschieben Sie es zurück auf 0 0
4. Speichern und Vorschau, alles sollte gut funktionieren.

Hoffe das hilft jemand anderem.

Ich hatte ein sehr ähnliches Problem, dass mein von der KI erstelltes SVG nicht zentriert und auf das gesamte Browserfenster erweitert wurde, da die KI die Größe der Zeichenfläche ständig ändert und das Zentrieren vergisst.

Die einzige Möglichkeit, dies zu beheben, besteht in einem abschließenden manuellen Verarbeitungsschritt in Inkscape.

• Öffnen Sie die SVG-Datei in Inkscape
• Ändern Sie die Größe der Zeichenfläche unter Datei -> Dokumenteigenschaften
• Ändern Sie die Größe und verschieben Sie Ihre Grafik, indem Sie sie auswählen und in der Symbolleiste das Zeichen w, h eingeben

Abschließend müssen Sie die SVG-Datei erneut speichern, verwenden jedoch das Format "Optimierte SVG-Datei" im Dialogfeld "Speichern unter". Es wird ein Dialogfeld für SVG-Optionen angezeigt und Sie müssen "Viewboxing aktivieren" aktivieren.

Da alle meine SVGs Symbole der gleichen Größe sind, dauert dieser Verarbeitungsschritt nur 1 Minute, da ich immer die gleiche Leinwand- und Objektgröße habe. Aber ja, es ist eine Schande, dass dieser Schritt überhaupt benötigt wird und in AI behoben werden sollte.

Ich habe das herausgefunden. Endlich! Es gibt einen einfachen Weg, dies zu tun. Wie so:

<svg id="xbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60.7"><title>xbox</title><rect width="200" height="60.68" style="fill:none"/><path d="M195.2,49.2l-11.8-16-11.5,16h-4.8L181.2,30,168.4,12.8h4.8l10.2,14,10.5-14h4.8L185.9,30,200,49.2Zm-90.7,0L90.4,30l12.8-17.2H98.4l-10.5,14-10.3-14H72.8L85.6,30l-14,19.2h4.8l11.5-16,11.8,16Z" style="fill:#0f7c10"/><path d="M131,31.3l-2.2-1.6a8.2,8.2,0,0,0,4.4-7c0-2.6-.9-9.9-12.1-9.9H106.4V28.4h-4.8l-2.9,3.5h7.7V49.2h14.7c8.3,0,13.1-4.2,13.1-10.9a8.6,8.6,0,0,0-3.2-7m-20.5-15h10.6c3.2,0,8,1,8,6.1s-2.9,6-8,6H110.5Zm10.6,29.1H110.5V31.9h10.6c4.1,0,8.9,1.3,8.9,6.4s-5.4,7.1-8.9,7.1m32.3-33.6c-10.3,0-17.3,7.7-17.3,19.2s7,18.8,17.3,18.8,17.5-7.6,17.5-18.8-7.3-19.2-17.5-19.2m0,34.2c-7.7,0-13.1-6.1-13.1-15s5.4-15.3,13.1-15.3S166.8,22,166.8,31s-5.5,15-13.4,15M8.9,8.6h0A31,31,0,0,0,0,30.4,32.5,32.5,0,0,0,6.1,48.9h.3C4.2,41.5,16,24.3,22,16.9h0C11.8,6.4,8.9,8.9,8.9,8.6m42.9,0h0a31,31,0,0,1,8.9,21.8,32.5,32.5,0,0,1-6.1,18.5h-.3c2.2-7-9.6-24.3-15.6-31.6h0C48.9,7,51.8,9.6,51.8,9.3M30.4,0A29.9,29.9,0,0,1,46.3,4.5h0c0,.3,0,.3-.3.3C40.3,3.5,31.3,8.3,30.4,8.9h0C28.1,7.7,19.8,3.2,14.7,4.8a.3.3,0,0,1-.3-.3h0A30,30,0,0,1,30.4,0m0,24.3h0c9.2,7,24.9,24.3,20.1,29.1h0a31.5,31.5,0,0,1-40.3,0h0C5.8,48.6,21.1,31.3,30.4,24.3h0" style="fill:#0f7c10"/></svg>

Das Problem bestand darin, dass beim Exportieren eines Bildes aus Illustrator (wie bei vielen anderen) die Zeichenfläche nicht in der exportierten SVG-Datei enthalten ist. Die Pfade haben keine Grundlage für ihre Berechnungen.

In meinem Fall war die maximale Höhe für meine Bilder 100pxund ich musste die CSS-Stile für diese Bilder basierend auf ihrer Breite und Höhe festlegen. In CSS verwende ich vwEinheiten oder einfach nur alt, 100%wenn die SVG-Datei den Blockraum füllen soll. Das skaliert gut. Auf diese Weise können Sie die Breite und Höhe nicht in CSS ändern, um sicherzustellen, dass sie korrekt angezeigt werden.

Ich ging jedes Logo durch und stellte die Höhe auf ein 100pxund ließ die Breite anhand des Seitenverhältnisses automatisch berechnen. Anschließend passe ich die Zeichenfläche an das Logo an, um nicht verwendeten Platz zu entfernen.

Ich habe ein Rechteck ausgewählt und Füllung und Kontur deaktiviert und sichergestellt, dass es genau die gleiche Größe wie die Zeichenfläche hat. Platziere dieses leere Objekt auf der Rückseite. Wenn Sie jetzt exportieren, verfügt der Pfad über eine Basis, auf der die Berechnungen ausgeführt werden können.

Um dies im Code zu tun, können Sie die Pfade in ein rectumbrechen und die Breite und Höhe festlegen. Anschließend können Sie den Pfad viewBoxauf den gleichen Wert einstellen (das Seitenverhältnis beibehalten). Wie im obigen Beispiel gezeigt. Ich habe das noch nicht getestet, werde es aber testen und aktualisieren.

Ich konnte es mit Inkscape beheben . Scheint, als ob Illustrator SVG-Dateien nur unzureichend unterstützt.

1. Öffnen Sie die SVG-Datei in Inkscape CTRL + O
2. Dann erstelle eine neue Datei CTRL + N
3. CTRL + SHIFT + D Dokumenteigenschaften und passen Sie die Zeichenfläche an.
4. Wählen Sie und kopieren Sie die Svg in der neu erstellten Datei.
5. Passen Sie nun das Asset an, indem Sie die Werte für Position und Größe ändern. Wie das Festlegen der Position als Ursprung und der Breite und Höhe als Dokumentgröße.
6. Speichern Sie die neue Datei.