Μετατρέψτε κλιμακούμενα διανύσματα SVG σε έτοιμες εικόνες PNG
Ένα αρχείο SVG είναι ένα σύνολο οδηγιών, όχι μια ολοκληρωμένη εικόνα. Ανοίξτε ένα σε επεξεργαστή κειμένου και θα βρείτε XML που περιγράφει διαδρομές, σχήματα, γεμίσματα και καμπύλες — μια συνταγή που ο browser ακολουθεί για να σχεδιάσει το έργο τέχνης φρέσκο σε όποιο μέγεθος ζητήσετε. Ένα PNG είναι το αντίθετο: ένα πλέγμα χρωματιστών pixel παγωμένο σε σταθερό πλάτος και ύψος. Η μετατροπή του ενός στο άλλο ονομάζεται ραστεροποίηση, και αυτό το εργαλείο την κάνει εξ ολοκλήρου μέσα στον browser σας. Επιλέγετε μέγεθος εξόδου, το SVG ζωγραφίζεται σε ένα HTML canvas, και επιστρέφει ένα PNG — κανένα αρχείο δεν εγκαταλείπει ποτέ τη συσκευή σας.
Διάνυσμα έναντι ράστερ, με απλά λόγια
Η βασική διαφορά είναι πώς χειρίζεται η ανάλυση. Επειδή το SVG αποθηκεύει μαθηματικά αντί για pixel, είναι ανεξάρτητο από ανάλυση: κλιμακώστε ένα λογότυπο από favicon σε διαφημιστική πινακίδα και κάθε ακμή επανυπολογίζεται ώστε να παραμένει μαθηματικά ευκρινής. Ένα PNG δεν έχει τέτοια ελευθερία. Τα pixel του είναι ενσωματωμένα, οπότε η μεγέθυνσή του πέρα από το φυσικό του μέγεθος αναγκάζει τον θεατή να τεντώσει υπάρχουσες κουκκίδες, και αρχίζετε να βλέπετε το θόλωμα και τη σκαλιστή εμφάνιση που προδίδει τις εικόνες ράστερ.
Αυτός ο συμβιβασμός λειτουργεί και προς τις δύο κατευθύνσεις. Τα διανύσματα είναι ασυναγώνιστα για λογότυπα, εικονίδια και επίπεδες εικονογραφήσεις φτιαγμένες από καθαρά σχήματα, και τα αρχεία είναι συνήθως πολύ μικρά. Μορφές ράστερ όπως το PNG χειρίζονται διαβαθμίσεις, απαλές σκιές και φωτογραφική λεπτομέρεια πιο φυσικά, και — το σημαντικότερο — γίνονται κατανοητές από σχεδόν τα πάντα. Όταν ραστεροποιείτε, ανταλλάσσετε την άπειρη κλιμακωσιμότητα του SVG με την καθολική συμβατότητα του PNG σε ένα επιλεγμένο μέγεθος.
Γιατί καν να ραστεροποιήσετε ένα SVG;
Αν το SVG κλιμακώνεται τόσο όμορφα, γιατί να το μετατρέψετε; Η συμβατότητα είναι η συνήθης απάντηση. Πολλά μέρη απλώς δεν δέχονται SVG: πολλοί πελάτες email αφαιρούν ή αρνούνται να το εμφανίσουν, οι επεξεργαστές εγγράφων και το λογισμικό παρουσιάσεων συχνά θέλουν μια επίπεδη εικόνα, οι αγορές και τα δίκτυα διαφημίσεων απαιτούν PNG ή JPG, και οι περισσότερες κοινωνικές πλατφόρμες αγνοούν εντελώς τα ανεβάσματα διανυσμάτων. Ορισμένα συστήματα περιεχομένου επίσης μπλοκάρουν εντελώς το SVG για λόγους ασφαλείας, αφού η μορφή μπορεί να ενσωματώσει scripts.
Ο δεύτερος λόγος είναι ότι μερικές φορές θέλετε ένα στοιχείο σταθερού μεγέθους. Εικονίδια εφαρμογών, μικρογραφίες, εικόνες προεπισκόπησης Open Graph και έντυπα υλικά περιμένουν όλα ακριβείς διαστάσεις σε pixel. Ένα PNG κλειδώνει το έργο τέχνης σε αυτόν τον στόχο ώστε να αποδίδεται πανομοιότυπα παντού, χωρίς εκπλήξεις από έναν θεατή που ερμηνεύει το διάνυσμα διαφορετικά. Η μετατροπή του πηγαίου SVG σας στα ακριβή μεγέθη που απαιτεί μια πλατφόρμα είναι συχνά ο πιο καθαρός δρόμος προς ένα συνεπές αποτέλεσμα.
Επιλέγοντας τη σωστή ανάλυση εξαγωγής
Επειδή ένα PNG δεν μπορεί να μεγεθυνθεί με χάρη, το μέγεθος στο οποίο εξάγετε έχει μεγαλύτερη σημασία απ' ό,τι με οποιοδήποτε διάνυσμα. Εξάγετε πολύ μικρό και η εικόνα φαίνεται μαλακή σε σύγχρονες οθόνες· εξάγετε αχρείαστα μεγάλο και σπαταλάτε εύρος ζώνης. Ένας απλός εμπειρικός κανόνας: αποφασίστε το μεγαλύτερο μέγεθος στο οποίο θα εμφανιστεί ποτέ η εικόνα, μετά αποδώστε τουλάχιστον αυτό, και ιδανικά περισσότερο για οθόνες υψηλής πυκνότητας.
Οι τυπικές οθόνες είναι μια χαρά στο 1x — το ονομαστικό μέγεθος του έργου τέχνης. Οι οθόνες υψηλής ανάλυσης και Retina πακετάρουν περίπου διπλάσια pixel στον ίδιο χώρο, οπότε μια εξαγωγή 2x διατηρεί εικονίδια και γραφικά ευκρινή αντί για θολά. Για εκτύπωση, αφίσες ή πολύ μεγάλες οθόνες, το 3x ή 4x σας δίνει περιθώριο. Αφού η πηγή είναι διάνυσμα, η εξαγωγή σε μεγαλύτερο μέγεθος δεν σας κοστίζει τίποτα σε ποιότητα — οι καμπύλες απλώς επανυπολογίζονται στον υψηλότερο αριθμό pixel πριν επιπεδοποιηθούν. Σε περίπτωση αμφιβολίας, αποδώστε γενναιόδωρο μέγεθος· μπορείτε πάντα να σμικρύνετε ένα μεγάλο PNG, αλλά ποτέ δεν μπορείτε να ανακτήσετε λεπτομέρεια μεγεθύνοντας ένα μικρό.
Η διαφάνεια ακολουθεί τη διαδρομή
Το PNG υποστηρίζει πλήρες κανάλι alpha, που σημαίνει ότι η διαφάνεια επιβιώνει τη μετατροπή. Αν το SVG σας δεν έχει γέμισμα φόντου, το προκύπτον PNG διατηρεί αυτές τις περιοχές διάφανες, οπότε ένα λογότυπο ή εικονίδιο τοποθετείται καθαρά σε οποιοδήποτε χρώμα χωρίς άσχημο λευκό πλαίσιο γύρω του. Αν χρειάζεστε συμπαγές φόντο αντ' αυτού, δώστε ένα στο SVG πριν τη μετατροπή. Σε κάθε περίπτωση, ό,τι βλέπετε στο διάνυσμα είναι αυτό που θα διατηρήσει το PNG, γι' αυτό ακριβώς το PNG — αντί για JPG — είναι ο φυσικός στόχος για εικονίδια, σήματα και επικαλύψεις.
Όλα παραμένουν στη συσκευή σας
Αυτός ο μετατροπέας εκτελείται ως τοπικός κώδικας στον browser σας χρησιμοποιώντας το canvas API. Το SVG σας διαβάζεται, σχεδιάζεται και εξάγεται χωρίς ποτέ να αποσταλεί σε server, οπότε δεν υπάρχει ανέβασμα, ουρά αναμονής, ή αντίγραφο του έργου τέχνης σας που να βρίσκεται στην αποθήκευση κάποιου άλλου. Αυτό είναι πιο γρήγορο για εσάς και πιο ασφαλές για οτιδήποτε δεν θα προτιμούσατε να παραδώσετε σε τρίτο, από αδημοσίευτη επωνυμία έως εσωτερικά διαγράμματα. Όταν τελειώσετε εδώ, εξερευνήστε τα υπόλοιπα εργαλεία εικόνας μας — αν χτίζετε ένα στοιχείο Windows ή favicon, ο μετατροπέας PNG σε ICO είναι το φυσικό επόμενο βήμα.
Συχνές ερωτήσεις
Θα φαίνεται το PNG τόσο ευκρινές όσο το SVG;
Στο μέγεθος που εξάγετε, ναι. Επειδή το διάνυσμα αποδίδεται φρέσκο στην επιλεγμένη σας ανάλυση, οι ακμές παραμένουν αιχμηρές. Η διαφορά είναι ότι το PNG δεν μπορεί να μεγεθυνθεί εκ των υστέρων χωρίς να απαλύνει, ενώ το πρωτότυπο SVG πάντα μπορούσε.
Διατηρεί η μετατροπή τη διαφάνεια;
Ναι, τη διατηρεί. Το PNG έχει κανάλι alpha, οπότε οποιεσδήποτε διάφανες περιοχές στο SVG σας παραμένουν διάφανες στο PNG. Προσθέστε φόντο στο SVG πρώτα αν θέλετε συμπαγές γέμισμα αντ' αυτού.
Ποια ανάλυση πρέπει να επιλέξω;
Ταιριάξτε ή ξεπεράστε το μεγαλύτερο μέγεθος στο οποίο θα εμφανιστεί η εικόνα. Χρησιμοποιήστε 1x για τυπικές οθόνες, 2x για Retina και οθόνες υψηλής ανάλυσης, και 3x ή 4x για εκτύπωση ή υπερμεγέθη γραφικά. Η απόδοση σε μεγαλύτερο μέγεθος δεν κοστίζει τίποτα σε ποιότητα αφού η πηγή είναι διάνυσμα.
Γιατί να μη χρησιμοποιώ απλώς το SVG παντού;
Πολλοί πελάτες email, επεξεργαστές εγγράφων, αγορές και κοινωνικές πλατφόρμες δεν δέχονται ή δεν αποδίδουν αξιόπιστα το SVG. Ένα PNG λειτουργεί σχεδόν παντού και κλειδώνει το έργο τέχνης σε προβλέψιμο, σταθερό μέγεθος.
Ανεβαίνουν τα αρχεία μου κάπου;
Όχι. Όλα εκτελούνται τοπικά στον browser σας. Το SVG σας δεν αποστέλλεται ποτέ σε server, οπότε τίποτα δεν ανεβαίνει, αποθηκεύεται, ή παρακολουθείται.
Μπορώ να μετατρέψω το PNG πίσω σε SVG;
Όχι πιστά. Η ραστεροποίηση απορρίπτει τα αρχικά μαθηματικά, οπότε η επιστροφή σημαίνει ιχνηλάτηση των pixel σε νέες διανυσματικές διαδρομές, κάτι που σπάνια ταιριάζει με την πηγή. Κρατήστε το πρωτότυπο SVG σας ως το κύριο αρχείο.