Πώς να δημιουργήσετε SVG με Scalable, Searchable Type

Ο τύπος SVG παρέχει τα ίδια πολύτιμα χαρακτηριστικά που βρίσκονται σε όλες τις πτυχές των γραφικών SVG που δημιουργούνται στο Adobe Illustrator CC : επεκτασιμότητα, δυνατότητα επεξεργασίας στο Illustrator και εγγενής υποστήριξη σε όλα τα προγράμματα περιήγησης. Αυτές οι δυνατότητες από μόνες τους υποστηρίζουν την εξαγωγή του γραφικού περιεχομένου σας που περιέχει τύπο σε μορφή SVG όταν προορίζεται για ψηφιακή ανάπτυξη.

Ακόμη και πέρα ​​από τα πλεονεκτήματα που έχετε όταν χρησιμοποιείτε το SVG για γραφικά γενικά, ορισμένες ειδικές δυνατότητες είναι διαθέσιμες όταν έχετε πληκτρολογήσει αυτά τα γραφικά.

Εκμεταλλευτείτε την τιμή του κλιμακούμενου τύπου με δυνατότητα αναζήτησης

Όπως ίσως έχετε σημειώσει, με ενθουσιάζει το γεγονός ότι ο τύπος SVG, όταν ανοίγει σε ένα παράθυρο του προγράμματος περιήγησης, μπορεί να αναζητηθεί με το πρόγραμμα περιήγησης. Συνήθως αυτά τα εργαλεία αναζήτησης προγράμματος περιήγησης λειτουργούν μόνο με τύπο HTML.

Και ο τύπος SVG δεν είναι μόνο αναζητήσιμος. Οι χρήστες μπορούν να βρουν κείμενο σε μια σελίδα, να αντιγράψουν και να επικολλήσουν και να αναζητήσουν περιεχόμενο. Για παράδειγμα, εάν ένας επισκέπτης σε ένα μπαρ χυμών ενδιαφέρεται για το εάν τα σέικ kale έχουν χυμό λεμονιού ή όχι, μπορεί να αναζητήσει το κείμενο στο αρχείο SVG, όπως φαίνεται εδώ.

Αναζήτηση κειμένου σε ένα γραφικό SVG στο Chrome.

Ή για αυτό το θέμα, εάν ένας χρήστης δεν είναι σίγουρος τι είναι το λάχανο, μπορεί να επιλέξει το κείμενο και να αναζητήσει έναν ορισμό, όπως φαίνεται.

Επιλογή τύπου σε ένα γραφικό SVG σε ένα πρόγραμμα περιήγησης

Για να καλέσετε λίγο πίσω, μπορείτε να εξαγάγετε γραφικά Illustrator που περιλαμβάνουν τύπο για οθόνες ως PNG, GIF ή JPEG. Αλλά δεν θα είναι επεκτάσιμα και δεν θα διατηρήσουν το είδος της λειτουργικότητας που παρουσιάζεται στα δύο προηγούμενα σχήματα.

Βελτιστοποιήστε τη λειτουργικότητα τύπου αποθηκεύοντας SVG

Θα επανέλθω σύντομα στο πότε και τον τρόπο αποθήκευσης αρχείων SVG και εξαγωγής σε SVG. Ωστόσο, ενώ ασχολούμαστε με το θέμα του τύπου SVG, πρέπει να γνωρίζετε ότι για να κάνετε τον τύπο SVG να συμπεριφέρεται με τον τρόπο που παρουσιάζεται, πρέπει να αποθηκεύσετε το γραφικό σας ως SVG. Και πρέπει να χρησιμοποιήσετε συγκεκριμένες ρυθμίσεις, ώστε ο τύπος να λειτουργεί όπως υποτίθεται όταν προβάλλεται η εικόνα SVG σε ένα πρόγραμμα περιήγησης.

Για να αποθηκεύσετε τον τύπο μέσα σε μια εικόνα ως τύπου SVG, ακολουθήστε τα εξής βήματα:

1. Έχοντας το γραφικό σας έτοιμο να το παραδώσετε σε έναν προγραμματιστή ιστού, επιλέξτε Αρχείο→Αποθήκευση ως. Μεταβείτε στο φάκελο όπου θέλετε να αποθηκεύσετε το αρχείο και εισαγάγετε ένα όνομα αρχείου.

Διατηρήστε τα ονόματα αρχείων συμβατά με τον ιστό, που σημαίνει ότι χρησιμοποιείτε πεζά γράμματα και αριθμούς, μην χρησιμοποιείτε ειδικούς χαρακτήρες (εκτός από την παύλα και την υπογράμμιση) και σίγουρα μην χρησιμοποιείτε κενά.

Εάν αποθηκεύετε ξανά ένα αρχείο που έχετε ήδη αποθηκεύσει σε άλλη μορφή, μπορείτε να διατηρήσετε το όνομα του αρχείου και την τοποθεσία σας και να προχωρήσετε στο Βήμα 2.

2. Στο αναπτυσσόμενο μενού μορφής στο παράθυρο διαλόγου Αποθήκευση, επιλέξτε SVG και κάντε κλικ στην επιλογή Αποθήκευση.

Ανοίγει το παράθυρο διαλόγου Επιλογές SVG.

3. Αφήστε τα Προφίλ SVG ρυθμισμένα σε SVG 1.1 (η τρέχουσα έκδοση, που υποστηρίζεται από όλα τα προγράμματα περιήγησης.

Οι άλλες επιλογές δεν είναι κρίσιμες για αυτό που κάνουμε εδώ, αλλά εν συντομία είναι οι εξής:

• • Επιλογή Subsetting: Αφήστε το Subsetting να οριστεί σε None. Οι άλλες επιλογές δεν ισχύουν για τον τύπο SVG για web.
  • Επιλογές τοποθεσίας εικόνας: Αυτές οι επιλογές ισχύουν μόνο εάν έχετε ενσωματώσει ή συνδέσει (ή και τα δύο) έργα τέχνης στο αρχείο Illustrator.
  • Επιλογές CSS Properties: Περιγράφω τις επιλογές CSS Properties αργότερα σε αυτό το κεφάλαιο, αλλά η σύντομη εξήγηση είναι ότι καθορίζονται από τις ανάγκες του προγραμματιστή στον οποίο παραδίδετε τα αρχεία. Όταν αποθηκεύετε τον τύπο ως SVG, μπορείτε να χρησιμοποιήσετε οποιαδήποτε από τις επιλογές CSS Properties.

4. Στην κάτω ενότητα του διαλόγου Επιλογές για προχωρημένους, αποεπιλέξτε το Output Fewer Elements και Use Element for Text on Path.

Σημειώστε ότι αυτές οι επιλογές επιλέγονται από προεπιλογή. Αυτή η ενότητα του διαλόγου Επιλογές SVG θα πρέπει να μοιάζει με την παρακάτω εικόνα.

Αποθήκευση γραφικού SVG για διατήρηση ειδικών χαρακτηριστικών τύπων.

Η κατάργηση της επιλογής αυτών των επιλογών μπορεί να αυξήσει ελαφρώς το μέγεθος του αρχείου σας, αλλά με την κατάργηση της επιλογής τους, διατηρείτε την εμφάνιση του κειμένου και τις ιδιότητες για τις οποίες έχω καυχηθεί σε αυτήν την ενότητα (δυνατότητα αναζήτησης, αντιγραφή και επικόλληση, αναζήτηση στο πρόγραμμα περιήγησης και άλλες δυνατότητες, ανάλογα με το περιβάλλον περιήγησης).

Το πλαίσιο ελέγχου Responsive είναι επιλεγμένο από προεπιλογή. Αυτή η ρύθμιση δεν είναι κρίσιμη για τη διατήρηση των ειδικών χαρακτηριστικών του τύπου SVG. Εδώ, όπως και στις περισσότερες επιλογές, η επιλογή σας εξαρτάται από τις ανάγκες του προγραμματιστή ιστού σας. Σε περίπτωση αμφιβολίας, η επιλογή της επιλογής Responsive είναι μια ευρέως εφαρμόσιμη επιλογή εξόδου.

5. Κάντε κλικ στο OK στο παράθυρο διαλόγου Επιλογές SVG για να αποθηκεύσετε το αρχείο ως ενσωματωμένο SVG.

Μερικές σημειώσεις για τον τύπο SVG:

• Από τη στιγμή που γράφονται αυτές οι γραμμές, η υποστήριξη για όλες τις δυνατότητες του τύπου SVG βρίσκεται σε εξέλιξη. Οι βασικές λειτουργίες που έχω διαβάσει εδώ λειτουργούν σε οποιοδήποτε πρόγραμμα περιήγησης, αλλά η υποστήριξη για διαφορετικές γραμματοσειρές ενδέχεται να απαιτεί κάποια προσαρμογή του κώδικα από τον συνεργάτη προγραμματιστή ιστού σας.
• Αναρωτιέστε αν αυτές οι εντυπωσιακές δυνατότητες επιλογής, επεξεργασίας και αναζήτησης του κειμένου SVG ισχύουν για κείμενο σε μια καμπύλη; Η απάντηση αποκαλύπτεται στο παρακάτω σχήμα. Spoiler: Ναι!

Επιλογή κειμένου σε μια διαδρομή σε ένα αρχείο SVG στο πρόγραμμα περιήγησης Safari

Προσθέστε αποσπάσματα κώδικα στα γραφικά SVG

Το Illustrator δεν θα είναι ποτέ ο κορυφαίος επεξεργαστής κώδικα κανενός, αλλά περιλαμβάνει ένα υπέροχο μικρό χαρακτηριστικό για τη συσχέτιση κώδικα με στοιχεία ενός αρχείου SVG. Ας ρίξουμε μια γρήγορη ματιά στο πώς μπορείτε να προσθέσετε ένα απόσπασμα κώδικα όταν θέλετε να προσθέσετε έναν σύνδεσμο σε μέρος ενός γραφικού SVG. Τα παρακάτω βήματα περιγράφουν την εκχώρηση JavaScript σε ένα αντικείμενο που θα κάνει αυτό το αντικείμενο να λειτουργεί σαν σύνδεσμος.

1. Με επιλεγμένο ένα αντικείμενο, προβάλετε τον πίνακα Διαδραστικότητα SVG.

Μπορείτε να εμφανίσετε αυτόν τον πίνακα εάν δεν είναι ενεργός επιλέγοντας Παράθυρο→ Διαδραστικότητα SVG.

2. Αφήστε το Event να έχει οριστεί ως προεπιλογή, Onclick.

Αυτή η εντολή JavaScript εκτελεί μια λειτουργία (κάνει κάτι να συμβεί) όταν ένας χρήστης κάνει κλικ στο επιλεγμένο αντικείμενο σε μια ιστοσελίδα.

3. Στο πλαίσιο JavaScript, χρησιμοποιήστε αυτήν τη σύνταξη για να ορίσετε έναν στόχο σύνδεσης:

window.open("[URL]");

Έτσι, για παράδειγμα, εάν συνδέατε τη σελίδα της Wikipedia στο kale, η πλήρης γραμμή κώδικα θα ήταν αυτή που έχω στο σχήμα:

window.open("https://en.wikipedia.org/wiki/Kale");

4. Αποθηκεύστε το αρχείο Illustrator ως αρχείο SVG.

Επισύναψη ενός αποσπάσματος JavaScript σε ένα αρχείο SVG για τη δημιουργία ενός συνδέσμου με δυνατότητα κλικ στο γραφικό.

Το αρχείο είναι έτοιμο να παραδοθεί στον προγραμματιστή ιστού σας. (Ή αν αυτός είναι ο άλλος σας ρόλος, μπορείτε να αλλάξετε καπέλα και να σηκώσετε το αρχείο στο αγαπημένο σας πρόγραμμα επεξεργασίας κώδικα για να το ενσωματώσετε σε ένα έργο web).

Εναλλακτικά, μπορείτε απλώς να ενσωματώσετε το αποθηκευμένο αρχείο SVG σε μια ιστοσελίδα. Ο σύνδεσμος δεν θα είναι κομψός (μέχρι ένας σχεδιαστής ιστοσελίδων να τροποποιήσει το CSS που δημιουργείται, δεν θα περιλαμβάνει ένα τυπικό εικονίδιο συνδέσμου όταν τοποθετείται πάνω, για παράδειγμα). Αλλά θα λειτουργήσει και σίγουρα θα είναι επισκευή για πρωτότυπα και δοκιμή πριν οριστικοποιηθεί η ιστοσελίδα.

Μην προσπαθήσετε να χρησιμοποιήσετε την τεχνική slice του Illustrator για την αποθήκευση αρχείων SVG. Η τεχνολογία πίσω από τα slices βασίζεται σε ράστερ και δεν συνδυάζεται με την έξοδο που βασίζεται σε διανύσματα.