Ändern Sie das Viewbox-Attribut in der vom Illustrator exportierten SVG-Datei

Ich bin mehrmals auf dieses Problem gestoßen, und das einzige, was jemals für mich funktioniert hat, um die SVG-Viewbox beim Exportieren aus Illustrator zuverlässig auf genau 0, 0 zurückzusetzen, besteht darin , ein neues leeres Dokument zu erstellen und das Bildmaterial zu kopieren und einzufügen .

Die obere linke Ecke dieser unberührten Standardzeichenfläche wird als Punkt 0, 0 des Ansichtsfelds exportiert. Verwenden Sie intelligente Hilfslinien ( cmd-u) oder das alignauf eingestellte Fenster, Align to Artboardwenn Ihr Bildmaterial genau bei 0, 0 beginnen soll.

Sie können die Größe der Zeichenfläche sicher von der unteren rechten Ecke aus ändern, aber die Dinge beginnen schief zu gehen, wenn Sie die obere linke Ecke verschieben. Das Verschieben der oberen linken Ecke der Zeichenflächen oder das Importieren von SVG-Dateien in AI scheint eine seltsame interne Trennung zwischen den Linealen, Zeichenflächen und einer Art unsichtbarem, geheimem Viewbox-Ursprungspunkt zu verursachen, der nur Illustrator bekannt ist.

AFAICT, wie bei den meisten Dingen, die mit Web oder neuen Technologien zu tun haben, bestand Adobes Herangehensweise an SVG darin, etwas grob zusammenzuwerfen, damit sie in einer Pressemitteilung damit prahlen können, und es dann fehlerhaft, unfertig und ungeliebt zu lassen und so zu tun, als wäre es nicht so existieren und weitermachen, als wäre es 1998.

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

1. Öffnen Sie das SVG in einem Texteditor und ändern Sie das viewBox-Attribut auf 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, es sollte alles gut funktionieren.

Hoffe, das hilft jemand anderem.

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. Leider gehört Illustrator nicht dazu.

Wenn Sie die SVG-Datei aus Illustrator ohne „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 widergespiegelt, jedoch durch Neupositionierung und Größenänderung sowohl der Zeichenfläche als auch der Ebenen, um eine Pseudo-Ansichtsbox zu erstellen.

Im Moment können Sie nur in Illustrator arbeiten und den gesamten zusätzlichen Code für den Versatz und die Positionierung der Viewbox innerhalb der Dateidaten erstellen. Sie können eine Pseudo-Viewbox erstellen, indem Sie einfach die Breite + Höhe/X + Y-Position der Zeichenfläche ändern und dann auch die Objektattribute Größe und Position ändern. Aber es wird niemals ein echtes Viewbox-Attribut geben, es sei denn, sie veröffentlichen ein Update für Illustrator mit bearbeitbaren Viewbox-Funktionen.

Etwas Lektüre zum SVG-Format in Illustrator: Adobe Illustrator im SVG-Format speichern

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

Die einzige Möglichkeit, dies zu beheben, besteht darin, einen letzten manuellen Verarbeitungsschritt in Inkscape durchzuführen.

• Öffnen Sie die SVG-Datei in Inkscape
• Ändern Sie die Größe der Leinwand unter Datei -> Dokumenteigenschaften
• Ändern Sie die Größe und verschieben Sie Ihr Bildmaterial, indem Sie es auswählen und das w, h in der Symbolleiste bearbeiten

Abschließend müssen Sie das SVG erneut speichern, verwenden aber im Speichern unter Dialog das Format „Optimized SVG“. Es wird einen Dialog für SVG-Optionen geben und Sie müssen "Viewboxing aktivieren" aktivieren.

Da alle meine SVGs Icons gleicher Größe sind, dauert dieser Bearbeitungsschritt nur 1 Minute, da ich immer die gleiche Leinwand- und Objektgröße habe. Aber ja, es ist schade, dass dieser Schritt überhaupt benötigt wird und in der KI behoben werden sollte.

Ich habe das herausgefunden. Endlich! Es gibt eine einfache Möglichkeit, dies zu tun. 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 war, wenn Sie ein Bild aus Illustrator exportieren (wie es viele tun), ist die Zeichenfläche nicht in der exportierten SVG enthalten. 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 basieren. In CSS verwende ich vwEinheiten oder einfach nur alt, 100%wenn das SVG den Blockraum füllen soll. Das skaliert schön. Auf diese Weise müssen Sie sich nicht mit dem Einstellen der Breite und Höhe in CSS herumschlagen, um sicherzustellen, dass es korrekt angezeigt wird.

Ich ging jedes Logo durch und stellte die Höhe auf ein 100pxund ließ die Breite basierend auf dem Seitenverhältnis automatisch berechnen. Dann passe ich die Zeichenfläche an das Logo an, um ungenutzten Platz zu entfernen.

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

Um dies im Code zu tun, scheint es, dass Sie die Pfade in a einwickeln rectund ihre Breite und Höhe festlegen können, und dann können Sie das viewBoxauf dasselbe festlegen (Seitenverhältnisse gleich halten). Wie im obigen Beispiel gezeigt. Ich habe das nicht wirklich getestet, aber ich werde es testen und aktualisieren.

Ich konnte es mit Inkscape beheben . Anscheinend hat Illustrator schlechte Unterstützung für SVG-Dateien.

1. Öffnen Sie die SVG-Datei in InkscapeCTRL + O
2. Erstellen Sie dann eine neue DateiCTRL + N
3. CTRL + SHIFT + DDokumenteigenschaften und passen Sie die Größe der Zeichenfläche an.
4. Wählen Sie das SVG aus und kopieren Sie es in die neu erstellte Datei.
5. Passen Sie nun das Asset an, indem Sie die Positions- und Größenwerte ändern. Wie das Festlegen der Position als Ursprung und der Breite und Höhe als Dokumentgröße.
6. Speichern Sie die neue Datei.

1. Wählen Sie in Adobe Illustrator Ihren Pfad aus

2. Gehen Sie dann zum Zeichenflächenbereich

3.Klicken Sie auf das Symbol für Zeichenflächenoptionen

4.Wählen Sie im voreingestellten Bedienfeld die Option An Grafikgrenzen anpassen

5. Klicken Sie auf OK.

6. Ergebnis ist dies:

7.<viewBox="0 0 407,02 660,98">

8.viewbox minx und miny setzt auf 0 0 ohne Übersetzung