Angenommen, Sie haben eine Grafik wie diese in Adobe Illustrator
Beachten Sie, dass die Grafik die Ränder des Zeichenbereichs nicht berührt. Angenommen, Sie *möchten* diesen Platz drum herum haben und möchten ihn als SVG für die Verwendung im Web speichern.
Nein: Für Web speichern
DER KRALLEN! Sie sehen hier Platz, aber leider exportiert der klassische Dialog "Für Web speichern" überhaupt nicht als SVG, also ist das eigentlich keine Option.
Diese Funktion wird bereits als „Legacy“ bezeichnet, daher stelle ich mir vor, dass sie bald verschwindet.
Nein: Exportieren als
Die Funktion „Exportieren als“ unterstützt SVG, und Sie werden wahrscheinlich ziemlich zufrieden mit dem Ergebnis sein. Es ist recht optimiert, ohne Ballast und so ziemlich bereit für die Verwendung im Web.
Aber… es schneidet die Grafik zu, ohne die Möglichkeit, das zu ändern, also verlieren wir den Platz drum herum, den wir hier anstreben.
Ein möglicher Workaround hier ist, ein Rechteck hinter die Grafik zu legen, das den benötigten Abstand hat, aber dann bekommen wir ein Rechteck im Output, was eigentlich nicht nötig sein sollte.
Nein: Asset Export
Das Bedienfeld "Asset Export" ist sehr praktisch, aber der Export schneidet die Grafik zu, und es gibt keine Möglichkeit, das zu ändern.
Ja: Exportieren für Bildschirme
Der Trick, um den Platz zu erhalten, ist der Export des Zeichenbereichs selbst. Das können Sie im Dialogfeld "Exportieren für Bildschirme" tun.
Der `viewBox` spiegelt dann den Zeichenbereich und den Platz wider, den wir um die Grafik herum gelassen haben. Das ist es, was wir angestrebt haben, also bin ich froh, dass es einen Weg gibt!
Hmmm… Ich bin mir ziemlich sicher, wenn Sie einfach auf "Speichern unter" gehen und "SVG" als Dateityp auswählen, wird auch aller Platz um Ihren Zeichenbereich herum beibehalten… Das scheint der Fall zu sein, als ich es gerade getestet habe.
Ich speichere ständig SVGs aus Illustrator. Ich finde, der einfachste Weg ist, einfach "Speichern unter" zu wählen und dann SVG als Typ auszuwählen. Sie erhalten ein zusätzliches Dialogfeld, sobald Sie auf "Speichern" klicken, das es Ihnen ermöglicht, die SVG-Einstellungen zu ändern, und es behält Ihren Zeichenbereichs-Platz bei. Sie können sogar auf einen kleinen Button am unteren Rand des SVG-Einstellungsfensters klicken, um den SVG-Code anzuzeigen (bei mir öffnet sich dieser als Klartext in einem Browser), was großartig ist, wenn Sie Ihren Code einfach kopieren/einfügen möchten, ohne eine neue SVG-Datei speichern zu müssen.
Ah ja! Stimmt. Ich vermeide es nur immer, auf diese Weise SVG zu speichern, da Sie so den ganzen Ballast bekommen. Sachen wie
Diese Sachen werden herausgefiltert, wenn Sie Optimierungssoftware wie SVGO verwenden, aber das ist nicht immer Teil des SVG-Workflows von jedem.
Sie müssen auch darauf achten, die Einstellungen richtig zu wählen, zum Beispiel "Illustrator-Bearbeitungsfunktionen beibehalten" deaktiviert lassen, sonst erhalten Sie VIEL MEHR Ballast, wie
Ich denke, die von Illustrator bereitgestellten Methoden zum "Exportieren" sind der richtige Weg, und dann die Originalgrafiken im nativen Illustrator-Format speichern.
Hm, ich mag Inkscape. Ich hätte nie an solche Probleme gedacht – es funktioniert wie am Schnürchen :)
Sie können Zeichenbereiche auch mit Exportieren als… exportieren.
Nachdem Sie Datei > Exportieren > Exportieren als… ausgewählt haben, öffnet sich der anfängliche Exportdialog. Hier können Sie Zeichenbereiche verwenden auswählen, und Illustrator behält die Abstände von Zeichenbereichen mit einer viewBox bei.
Das funktioniert, aber es wird (ärgerlicherweise) die Zeichenbereichsnummer nach dem Dateinamen eingefügt.
Speichern unter > svg
Oder machen Sie eine vollständig transparente Box, die dem Dokument entspricht, und exportieren Sie dann ;)
Das ist meine Methode
Auf jeden Fall verwende ich beim Codieren immer Gulp mit SVG-Optimierer, also keine Notwendigkeit für manuelle Müllbereinigung :)