PNG σε SVG: διανυσματοποίηση λογότυπων και εικονιδίων

Το PNG είναι εικόνα raster: ένα σταθερό πλέγμα από pixel, καθένα με χρώμα και, προαιρετικά, τιμή διαφάνειας. Ένα λογότυπο 500 × 500 px περιέχει ακριβώς 250.000 τέτοια τετραγωνάκια και τίποτε άλλο, οπότε αν το μεγεθύνετε σε μέγεθος αφίσας, κάθε τετραγωνάκι μεγαλώνει ή θολώνουν τα κενά μεταξύ τους. Το SVG είναι διανυσματική εικόνα, ένα αρχείο κειμένου που απαριθμεί σχήματα όπως <path>, <circle> και <rect> με συντεταγμένες και χρώματα γεμίσματος. Ένα πρόγραμμα περιήγησης ή ένα μηχάνημα κοπής ξανασχεδιάζει τα σχήματα στο μέγεθος που χρειάζεται, γι' αυτό ένα διανυσματικό λογότυπο μένει καθαρό τόσο στην οθόνη του κινητού όσο και σε πανό εκθέσεων.

Η μετάβαση από διανυσματικό σε raster είναι εύκολη, επειδή ο renderer απλώς ζωγραφίζει τα σχήματα σε pixel· το SVG σε PNG το κάνει σε ένα δευτερόλεπτο. Η αντίστροφη πορεία δεν έχει μέθοδο χωρίς απώλειες, γιατί το πλέγμα των pixel δεν κρατά καμία πληροφορία για τα σχήματα που το δημιούργησαν. Κάτι πρέπει να εξετάσει τα pixel και να μαντέψει πού αρχίζει και πού τελειώνει κάθε σχήμα. Αυτό το βήμα λέγεται ανίχνευση (tracing) ή διανυσματοποίηση, και κάθε αξιόπιστος μετατροπέας PNG σε SVG, από το Illustrator μέχρι ένα πρόγραμμα γραμμής εντολών, είναι στην ουσία εργαλείο ανίχνευσης.

Ορισμένοι μετατροπείς παρακάμπτουν το δύσκολο κομμάτι. Γράφουν ένα έγκυρο αρχείο SVG που περιέχει ένα μόνο στοιχείο <image> με το αρχικό PNG ενσωματωμένο ως κείμενο base64, κάτι που κάνει και το αρχείο περίπου κατά το ένα τρίτο μεγαλύτερο από το PNG. Το αποτέλεσμα ανοίγει ως SVG και περνά τον έλεγχο τύπου αρχείου, αλλά παραμένει εικόνα pixel μέσα σε διανυσματικό περιτύλιγμα: κάντε μεγέθυνση και θα δείτε τις ίδιες οδοντωτές άκρες, ενώ ένα μηχάνημα κοπής δεν βρίσκει διαδρομές να ακολουθήσει. Ανοίξτε οποιοδήποτε SVG σε πρόγραμμα επεξεργασίας κειμένου και αναζητήστε data:image/png· αν υπάρχει, δεν έγινε διανυσματοποίηση.

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

Οι φωτογραφίες είναι η αντίθετη περίπτωση. Ένα πορτρέτο ή μια φωτογραφία προϊόντος έχει χιλιάδες διακριτικά διαφορετικούς τόνους που αναμειγνύονται, και η διανυσματική μορφή δεν έχει αποδοτικό τρόπο να τους περιγράψει. Αν ζητήσετε 16 χρώματα, παίρνετε μια εικονογράφηση με posterize και ορατές ζώνες· αν ζητήσετε 64, παίρνετε δεκάδες χιλιάδες μικροσκοπικά σχήματα σε αρχείο πολύ μεγαλύτερο από το PNG, που και πάλι δεν μοιάζει με φωτογραφία. Οι απαλές διαβαθμίσεις, οι σκιές και οι λάμψεις μετατρέπονται με τον ίδιο τρόπο σε στοίβες λεπτών ζωνών. Το μικρό κείμενο είναι τρίτο πρόβλημα: στα 10–12 px το anti-aliasing συγχωνεύει κάθε γράμμα με το φόντο και το εργαλείο δεν ξεχωρίζει ένα «e» από ένα «o».

Η ανάλυση μετράει περισσότερο από οποιαδήποτε ρύθμιση. Το εργαλείο ανίχνευσης προσαρμόζει κάθε καμπύλη στη «σκάλα» των pixel κατά μήκος μιας άκρης, και όσο πιο λεπτή είναι η σκάλα, τόσο πιο πιστή είναι η καμπύλη. Αν εξαγάγατε μόνοι σας το PNG από Figma, Canva, Photoshop ή παρουσίαση, εξαγάγετέ το ξανά σε δύο ή τρεις φορές το μέγεθος προβολής· ένα λογότυπο πλάτους 1500–2000 px δίνει άφθονο υλικό στο εργαλείο. Μην μεγεθύνετε πρώτα ένα μικρό PNG με AI εργαλείο, εκτός αν το αποτέλεσμα φαίνεται καθαρό στο 100 % zoom, γιατί η επινοημένη υφή των άκρων ανιχνεύεται εξίσου πιστά με τις πραγματικές άκρες.

Στη συνέχεια, απλοποιήστε το φόντο. Το PNG υποστηρίζει πλήρη διαφάνεια και το διαφανές φόντο είναι η πιο εύκολη περίπτωση: κάθε πλήρως διαφανές pixel θεωρείται κενός χώρος, οπότε το SVG δεν έχει λευκό πλαίσιο πίσω από το σχέδιο. Αν το PNG έχει συμπαγές φόντο, περικόψτε πρώτα σφιχτά γύρω από το σχέδιο· ο οδηγός μας για το πώς να περικόψετε μια εικόνα σε αναλογία καλύπτει το ακριβές κάδρο. Ένα φόντο με πολλά στοιχεία, όπως ένα λογότυπο φωτογραφημένο σε μπλουζάκι, πρέπει να αφαιρεθεί ή να καλυφθεί με ένα ενιαίο χρώμα πριν από την ανίχνευση.

Τέλος, μειώστε τον αριθμό των χρωμάτων πριν το κάνει το εργαλείο για εσάς. Κρύψτε σκιές, λάμψεις και επικαλύψεις διαβάθμισης στο αρχείο προέλευσης και αντικαταστήστε το γέμισμα διαβάθμισης με το μεσαίο χρώμα του, αν η διανυσματική έκδοση δεν το χρειάζεται. Μετρήστε τα ομοιόχρωμα χρώματα που απομένουν, μαζί με το χρώμα του περιγράμματος, και σημειώστε τον αριθμό· είναι ο πιο χρήσιμος αριθμός που θα εισαγάγετε στο επόμενο βήμα. Αν διαλέγετε ανάμεσα σε JPEG και PNG του ίδιου λογοτύπου, προτιμήστε το PNG, καθώς η συμπίεση JPEG προσθέτει θόρυβο γύρω από κάθε άκρη, όπως εξηγείται στο JPG vs JPEG vs PNG.

Κάθε εργαλείο ανίχνευσης κάνει τις ίδιες τρεις ερωτήσεις, ακόμη κι όταν οι ετικέτες διαφέρουν. Η πρώτη είναι πόσα χρώματα θα κρατηθούν. Στον μετατροπέα PNG σε SVG, η Λειτουργία χρώματος επιλέγει ανάμεσα σε Έγχρωμο, Κλίμακα του γκρι και Ασπρόμαυρο, και ο Αριθμός χρωμάτων ορίζει σε πόσες ομάδες ταξινομούνται τα pixel, από 2 έως 64. Ταιριάξτε τον με τον αριθμό που σημειώσατε. Αν τον ορίσετε πολύ υψηλά, το εργαλείο χωρίζει τα pixel των άκρων με anti-aliasing σε δικά τους λεπτά χρώματα, κάτι που φαίνεται ως αχνό φωτοστέφανο γύρω από κάθε σχήμα· αν τον ορίσετε πολύ χαμηλά, δύο χρώματα της επωνυμίας συγχωνεύονται σε ένα.

Η δεύτερη ερώτηση είναι πώς θα αντιμετωπιστούν οι άκρες. Η Εξομάλυνση στρογγυλεύει τα σκαλοπάτια που αφήνουν τα pixel και η Λεπτομέρεια καθορίζει πόσο μικρή μπορεί να είναι μια κουκκίδα ώστε να γίνει σχήμα. Η σελίδα PNG ξεκινά με Λεπτομέρεια 70 και Εξομάλυνση 40, που διατηρεί τις μικρές γωνίες σε μια καθαρή εξαγωγή. Μειώστε τη Λεπτομέρεια αν εμφανίζονται σκόνη και αδέσποτες τελείες, αυξήστε την Εξομάλυνση αν οι καμπύλες φαίνονται κυματιστές και ορίστε τις Καμπύλες σε Ευθείες γραμμές για γεωμετρικά λογότυπα με ευθείες άκρες ή σε Άκρες pixel για pixel art που θέλετε να μείνει τετραγωνισμένο.

Η τρίτη ερώτηση αφορά μόνο την ασπρόμαυρη ανίχνευση: πού θα τραβηχτεί η γραμμή ανάμεσα σε μελάνι και χαρτί. Το Κατώφλι κυμαίνεται από 1 έως 254 με προεπιλογή το 128. Τα pixel πιο σκούρα από το κατώφλι γίνονται μαύρα, τα πιο ανοιχτά μένουν κενά. Για υπογραφή με λεπτό μπλε στυλό, ανεβάστε το προς 160–180 ώστε να επιβιώσουν οι αχνές γραμμές· για σχέδιο με χοντρό μαρκαδόρο σε ελαφρώς γκρι χαρτί, κατεβάστε το προς 100 ώστε η υφή του χαρτιού να μη γίνει κουκκίδες. Αλλάζετε μία ρύθμιση τη φορά και συγκρίνετε, γιατί τα αποτελέσματα αλληλεπιδρούν.

Μην σταματάτε στη μικρογραφία. Ανοίξτε το SVG σε πρόγραμμα περιήγησης και κάντε zoom στο 400–800 % στην πιο σφιχτή καμπύλη, στην κοιλιά ενός γράμματος ή στην άκρη μιας αιχμής. Μια καλή ανίχνευση δείχνει ομαλά τόξα και αιχμηρές γωνίες εκεί που το σχέδιο έχει γωνίες· μια αδύναμη δείχνει κυματισμούς, βαθουλώματα και στρογγυλεμένες αιχμές. Έπειτα δείτε το αρχείο σε πρόγραμμα διανυσματικής επεξεργασίας όπως Inkscape, Illustrator ή Figma και ενεργοποιήστε την προβολή περιγράμματος ή κόμβων. Ένα απλό δίχρωμο λογότυπο χρειάζεται συνήθως λίγες εκατοντάδες κόμβους· αν το δικό σας δείχνει αρκετές χιλιάδες, το εργαλείο ακολούθησε θόρυβο και οι διαδρομές θα είναι επίπονο να επεξεργαστούν ή να κοπούν.

Το μέγεθος αρχείου είναι ένας γρήγορος έλεγχος. Ένα βελτιστοποιημένο SVG ενός επίπεδου λογοτύπου είναι συνήθως από λίγα έως μερικές δεκάδες kilobyte, συχνά μικρότερο από το PNG από το οποίο προήλθε. Ένα αρχείο που προέκυψε από ανίχνευση και είναι αρκετές φορές μεγαλύτερο από το αρχικό PNG σημαίνει συνήθως υπερβολικά πολλά χρώματα, υπερβολική λεπτομέρεια ή μια φωτογραφία που δεν έπρεπε να ανιχνευτεί. Κρατήστε ενεργοποιημένη τη Βελτιστοποίηση SVG, καθώς στρογγυλεύει τις συντεταγμένες και συγχωνεύει διαδρομές χωρίς ορατή αλλαγή, και τέλος κλιμακώστε το σχέδιο σε μέγεθος αφίσας και σε μέγεθος favicon για να επιβεβαιώσετε ότι διαβάζεται καλά και στα δύο.

Η δωρεάν επιλογή για υπολογιστή είναι το Inkscape. Εισαγάγετε το PNG, επιλέξτε το και ανοίξτε Path > Trace Bitmap (Shift+Alt+B). Οι λειτουργίες μίας σάρωσης, όπως το Brightness cutoff, παράγουν μία μαύρη διαδρομή, που ταιριάζει σε σχέδια γραμμών· οι λειτουργίες πολλαπλής σάρωσης ανιχνεύουν συγκεκριμένο αριθμό χρωμάτων ή αποχρώσεων του γκρι ως στοιβαγμένα επίπεδα. Η ασπρόμαυρη ανίχνευση του Inkscape βασίζεται στο Potrace, μια βιβλιοθήκη ανίχνευσης που κυκλοφόρησε ο Peter Selinger το 2001. Το ίδιο το Potrace είναι πρόγραμμα γραμμής εντολών που διαβάζει PBM, PGM, PPM ή BMP και όχι PNG, χειρίζεται μόνο εικόνες δύο τόνων και γράφει SVG, PDF, EPS ή DXF, γι' αυτό είναι καλή επιλογή για σενάρια με μεγάλες παρτίδες σαρώσεων.

Στο Adobe Illustrator, το Image Trace αντικατέστησε το παλαιότερο Live Trace στο Illustrator CS6. Τοποθετήστε το PNG, ανοίξτε Window > Image Trace και ξεκινήστε από μια προρύθμιση όπως Black and White Logo, 3 Colors ή 16 Colors, και μετά προσαρμόστε τα Paths, Corners και Noise στην ενότητα για προχωρημένους. Η ανίχνευση παραμένει ζωντανή μέχρι να πατήσετε Expand, που τη μετατρέπει σε κανονικές επεξεργάσιμες διαδρομές. Αν δεν έχετε εγκατεστημένο κανένα από τα δύο προγράμματα, ένας μετατροπέας στο πρόγραμμα περιήγησης εκτελεί την ίδια διαδικασία μείωσης χρωμάτων, εύρεσης ακμών και προσαρμογής καμπυλών· ο μετατροπέας εικόνας σε SVG δέχεται επίσης JPG, WebP και HEIC και μπορεί να γράψει EPS, PDF ή DXF αντί για SVG.

Στον ιστό, το SVG είναι Σύσταση του W3C από το 2001 και κάθε σύγχρονο πρόγραμμα περιήγησης το εμφανίζει σε ετικέτα <img>, ως φόντο CSS ή ενσωματωμένο στο HTML, όπου τα χρώματά του μπορούν να αλλάζουν ακόμη και στο πέρασμα του ποντικιού. Ένα λογότυπο που έχει ανιχνευτεί συνήθως αντικαθιστά πολλά μεγέθη PNG για οθόνες retina με ένα μικρό αρχείο. Για μηχανές κοπής, το SVG είναι η μορφή που περιμένουν τα Cricut Design Space και Silhouette Studio: κάθε σχήμα γίνεται διαδρομή κοπής και μια πολύχρωμη ανίχνευση φτάνει ως ξεχωριστά επίπεδα που μπορείτε να κόψετε από βινύλια διαφορετικών χρωμάτων. Οι κόπτες λέιζερ και το λογισμικό CNC προτιμούν συνήθως DXF, που το παράγει το PNG σε DXF με τις ίδιες ρυθμίσεις ανίχνευσης.

Τα τυπογραφεία ζητούν διανυσματικό υλικό επειδή μια πρέσα, ένας ψηφιοποιητής κεντήματος ή ένας κόφτης επιγραφών χρειάζεται ακμές, όχι pixel, και ένα SVG από ανίχνευση συχνά αρκεί για αυτοκόλλητα, μπλουζάκια ή πανό. Παραμένει όμως προσέγγιση: οι καμπύλες είναι εκτιμήσεις, τα χρώματα προκύπτουν από μέσο όρο pixel και το κείμενο μετατρέπεται σε περιγράμματα. Πριν λοιπόν ανιχνεύσετε το λογότυπο μιας εταιρείας, ρωτήστε όποιον το δημιούργησε. Ένας σχεδιαστής ή ένα γραφείο έχει σχεδόν πάντα το αρχικό AI, EPS, PDF ή SVG με ακριβείς καμπύλες, επώνυμα χρώματα και γραμματοσειρές, και η αποστολή του παίρνει ένα λεπτό. Η ανίχνευση είναι το σωστό εργαλείο όταν το πρωτότυπο έχει χαθεί, όταν το λογότυπο σώζεται μόνο σε σαρωμένο επιστολόχαρτο ή όταν το έργο είναι δικό σας σχέδιο.