Αυτό δεν είναι παρά ένα απόσπασμα και περισσότερο μια υπενθύμιση για κάτι που αναζητώ συχνά. Κατά τη δημιουργία αρχείων SVG στο Adobe Illustrator, υπάρχουν μερικές διαφορετικές μέθοδοι για την εξαγωγή των αρχείων. Και οι δύο μέθοδοι περιλαμβάνουν μια χούφτα επιλογών, μερικές από τις οποίες ξεχνώ εντελώς τι σημαίνουν και τι να επιλέξω.
Μέθοδος 1: Αποθήκευση ως…
Πιθανότατα δεν θα χρησιμοποιούσατε αυτήν τη μέθοδο για να αποθηκεύσετε το SVG για χρήση στον ιστό. Αυτό είναι σε μεγάλο βαθμό για την αποθήκευση ενός κύριου εγγράφου. Στην πραγματικότητα, ίσως θέλετε να αποθηκεύσετε απλώς τη μορφή Illustrator απευθείας. Θα χρησιμοποιούσατε μερικές από τις άλλες επιλογές εξαγωγής για εξαγωγή στον Ιστό.
Ο πιο συνηθισμένος τρόπος για να αποθηκεύσετε ένα αρχείο ως SVG στο Adobe Illustrator είναι να επιλέξετε File > Save As… από το κύριο μενού.
Το Illustrator θα εμφανίσει ένα παράθυρο διαλόγου που θα σας ρωτά τι να ονομάσετε το αρχείο και πού να το αποθηκεύσετε. Το πιο σημαντικό, ρωτά επίσης τι τύπο αρχείου θα αποθηκευτεί, το οποίο, στην περίπτωση αυτή είναι το SVG. Δεν συμπιέζεται SVG (svgz). Απλό SVG.
Κάντε κλικ στο κουμπί Αποθήκευση και θα εμφανιστεί ένα άλλο σύνολο επιλογών. Εδώ είναι που η μνήμη μου τείνει να με αποτυγχάνει και πρέπει να ψάχνω στον Ιστό για απαντήσεις. Ακολουθεί ένα στιγμιότυπο οθόνης ενός τέλεια βέλτιστου τρόπου αποθήκευσης ενός αρχείου SVG στο Adobe Illustrator.
- Προφίλ SVG : Ορίζει τον τύπο εγγράφου XML στην
ετικέτα ανοίγματος . Το SVG 1.1 είναι η τελευταία έκδοση, καλύπτει την πιο ευρεία υποστήριξη και είναι πιθανώς η πιο κατάλληλη επιλογή. Όλα τα άλλα είναι είτε μια παλαιότερη έκδοση είτε ένα υποσύνολο του SVG 1.1 και δεν έχω ακόμη αντιμετωπίσει κάποιο πρόβλημα κατά την επιλογή του. - Γραμματοσειρές> Τύπος : Η επιλογή "Μετατροπή σε περίγραμμα" θα διασφαλίσει ότι οποιοδήποτε κείμενο που πληκτρολογείται στο αρχείο εξάγεται είναι διανυσματικές διαδρομές και όχι γλύφοι. Οι Γλύφοι έχουν την πιθανότητα να μην αποδίδονται, αλλά οι διανυσματικές διαδρομές είναι πάντα ένας μεγάλος αντίχειρας.
- Επιλογές> Τοποθεσία εικόνας : Εάν στο αρχείο χρησιμοποιούνται εικόνες ράστερ (ανάγνωση: JPG.webp, PNG, GIF), τότε θα θέλαμε να ορίσουμε την επιλογή «Σύνδεση». Διαφορετικά, η εικόνα ράστερ θα ενσωματωθεί στο αρχείο και θα απορροφήσει τα οφέλη απόδοσης απευθείας από το SVG αυξάνοντας το μέγεθος του αρχείου ώστε να συμπεριλάβει αυτά τα επιπλέον στοιχεία. Καλύτερα να τα αναφέρετε ως συνδέσμους και φροντίστε να συμπεριλάβετε αυτά τα αρχεία προέλευσης στον ίδιο κατάλογο με το αρχείο SVG.
- Επιλογές> Τοποθεσία εικόνας> Δυνατότητες επεξεργασίας εικονογράφησης : Αυτό έχει τεράστιο αντίκτυπο στην έξοδο του αρχείου SVG. Επειδή πιθανότατα αποθηκεύετε ένα "κύριο" αντίγραφο εδώ, που δεν προορίζεται για εμάς στον Ιστό, θα το αφήσετε αυτό επιλεγμένο. Αυτό θα διατηρήσει τα ιδιοκτησιακά πράγματα του Illustrator (όπως οδηγούς) για την επόμενη φορά που θα ανοίξετε το αρχείο. Μη επιλεγμένο θα σημαίνει ότι τέτοια πράγματα θα αφαιρεθούν και θα χαθούν.
- Επιλογές για προχωρημένους> Ιδιότητες CSS : Επιλέγω "Χαρακτηριστικά παρουσίασης" για αυτό επειδή τοποθετεί ιδιότητες (π.χ. γεμίσματα, εγκεφαλικά επεισόδια και τέτοια) στο χαμηλότερο επίπεδο ειδικότητας. Για παράδειγμα
. Αυτό διαμορφώνει το στοιχείο, αλλά είναι πολύ εύκολο να παρακαμφθεί σε CSS. - Επιλογές για προχωρημένους> Δεκαδικά μέρη : Εάν έχετε περιηγηθεί στον κώδικα για ένα
, τότε γνωρίζετε ότι οι τιμές που καθορίζουν αυτά τα σχήματα μπορεί να είναι εξαιρετικά ακριβείς. Πολλές φορές, ωστόσο, είναι πολύ ακριβείς και προσθέτουν στο συνολικό μέγεθος του αρχείου SVG. Επειδή πιθανότατα αποθηκεύετε ένα κύριο αρχείο εδώ, μπορείτε να το διατηρήσετε αρκετά υψηλό, επειδή το μέγεθος του αρχείου δεν προκαλεί μεγάλη ανησυχία. - Επιλογές για προχωρημένους> Κωδικοποίηση : Δεν είμαι λάτρης της κωδικοποίησης UTF, αλλά το αφήνω αυτό στο "Unicode UTF-8" εξασφαλίζει συμβατότητα προς τα πίσω. Επίσης, τα μεγέθη αρχείων UTF-8 τείνουν να είναι μικρότερα από το UTF-16, οπότε αυτό κερδίζει από μόνο του.
- Επιλογές για προχωρημένους> Αποκριτική : Εάν αφήσετε αυτό το μη επιλεγμένο, θα οριστούν σταθερά
heightκαιwidthχαρακτηριστικά στο SVG. Ελέγξω αυτήν την επιλογή γιατί μου επιτρέπει να ορίσω αυτά τα χαρακτηριστικά είτε στον κώδικα είτε στο CSS.
Μέθοδος 2: Εξαγωγή ως
Ένας άλλος τρόπος για να λάβετε SVG από το Adobe Illustrator είναι να κάνετε την File > Export > Export As… επιλογή από το κύριο μενού. Ωστόσο, υπάρχει ένας δεύτερος τρόπος για να φτάσετε εκεί χρησιμοποιώντας τον πίνακα "Ενέργειες" στο χώρο εργασίας του Illustrator.
Αυτή η επιλογή είναι ιδανική αν γνωρίζετε ότι πρόκειται να χρησιμοποιήσετε αυτό το αρχείο απευθείας στον Ιστό και δεν σκοπεύετε να παίξετε αργότερα με το σχέδιο. Παρέχει πολύ λιγότερες ρυθμίσεις και μερικές επιλογές που επιτρέπουν στο αρχείο να βελτιστοποιήσει περαιτέρω το αρχείο για καλύτερη απόδοση. Στην πραγματικότητα, είναι καλύτερη πρακτική να το κάνετε αυτό σε ένα αντίγραφο του αρχείου και όχι στο ίδιο το κύριο αρχείο, οπότε υπάρχει μια έκδοση που μπορεί να ανοίξει και να επεξεργαστεί αργότερα στο Illustrator και μια άλλη που είναι πιο κατάλληλη για προβολή σε έναν ιστότοπο παραγωγής.
- Στυλ : Το καλύψαμε αυτό νωρίτερα στις ρυθμίσεις της μεθόδου 1, αλλά επιλέγω εδώ "Χαρακτηριστικά παρουσίασης" επειδή είναι ένας τρόπος οργάνωσης ιδιοτήτων στα χαρακτηριστικά υψηλότερου επιπέδου. Αυτό προσθέτει τάξη στη σήμανση, ευελιξία στην ικανότητά μας να σχεδιάζουμε τα επόμενα χαρακτηριστικά με CSS και συχνά οδηγεί σε μικρότερα μεγέθη αρχείων.
- Γραμματοσειρά : Αυτό είναι ένα άλλο που καλύψαμε παραπάνω, αλλά επιλέγοντας "Μετατροπή σε περιγράμματα" ανταλλάσσει γλύφους για διαδρομές διανύσματος για χαρακτήρες που διασφαλίζει την απόδοση κειμένου σωστά.
- Εικόνες : Αυτό είναι ακόμη ένα που καλύψαμε παραπάνω, αλλά η επιλογή "Σύνδεσμος" θα αποτρέψει τη συσκευασία εικόνων ράστερ στο SVG, γεγονός που καθιστά το αρχείο πολύ μεγαλύτερο.
- Αναγνωριστικά αντικειμένων : Αυτή η ρύθμιση δίνει στο Illustrator εντολές πορείας για τον τρόπο ονομασίας αναγνωριστικών στη σήμανση. Μπορείτε να του πείτε να ονομάσει αναγνωριστικά βάσει του τρόπου με τον οποίο ονομάζονται τα επίπεδα στο αρχείο.
- Δεκαδικό : Λιγότερα δεκαδικά ψηφία στον κώδικα σημαίνουν μικρότερα μεγέθη αρχείων. Η ρύθμιση αυτού
1είναι ιδανική και εντάξει σε πολλές περιπτώσεις και δεν θα έχει αισθητή διαφορά στο σχεδιασμό, αλλά2είναι συνήθως ασφαλής. Είτε έτσι είτε αλλιώς, αξίζει να ελέγξετε πώς αποδίδεται το SVG. - Ελαχιστοποίηση : Ναι, παρακαλώ! Αυτό μειώνει τον κώδικα προς τα κάτω για να μειώσει το κενό διάστημα και να αυξήσει την απόδοση του ιστού, όπως η ελαχιστοποίηση του CSS.
- Ανταπόκριση : Ακριβώς όπως και η πρώτη μέθοδος, η επιλογή αυτής της επιλογής είναι ιδανική επειδή σταθερά
heightκαιwidthδιαφορετικά τα χαρακτηριστικά θα τοποθετηθούν στο SVG.