Πώς να μετατρέψετε εικόνες JPG και PNG σε SVG

Οι παραδοσιακές μορφές εικόνας όπως το JPG, PNG ή GIF είναι πολύ δημοφιλείς, αλλά έχουν μειονεκτήματα που καθιστούν τη χρήση τους λιγότερο από ιδανική για ορισμένες εφαρμογές.

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

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

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

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

Άλλα πλεονεκτήματα του SVG είναι ότι το μέγεθός του είναι συνήθως πολύ μικρότερο και ότι δίνει στους webmasters κάποια ευελιξία όσον αφορά την πραγματοποίηση αλλαγών σε αυτό καθώς ορισμένοι μπορούν να γίνουν απευθείας στο CSS.

Ένα παράδειγμα: ο Terence Eden αναδημιουργούσε τα λογότυπα των δημοφιλών εταιριών του Διαδικτύου όπως το Twitter, το Amazon, το WhatsApp, το YouTube ή το Reddit στο SVG. Το μέγεθος των λογοτύπων μειώθηκε σε λιγότερο από 1 Kilobyte, μερικές φορές τόσο χαμηλό όσο 200 bytes. Το λογότυπο Twitter σε μορφή PNG για παράδειγμα έχει μέγεθος 20 Kilobytes, η έκδοση SVG μεγέθους 397 byte.

Το SVG είναι μια καλή μορφή για λογότυπα και εικονίδια, αλλά δεν είναι πραγματικά κατάλληλη όταν πρόκειται για φωτογραφίες και άλλους τύπους εικόνων που εμφανίζουν πολλά διαφορετικά αντικείμενα.

Μετατροπή σε SVG

Αυτός ο οδηγός επικεντρώνεται σε εφαρμογές που μπορείτε να χρησιμοποιήσετε για να μετατρέψετε απευθείας εικόνες σε SVG. Αυτό δεν είναι ένα σεμινάριο σχετικά με τη χρήση εφαρμογών που έχουν σχεδιαστεί για τη δημιουργία διανυσματικών γραφικών από το μηδέν. Μπορείτε να χρησιμοποιήσετε διανυσματικούς επεξεργαστές γραφικών όπως το Adobe Illustrator (οι σύνδεσμοι μας δεν υπάρχουν ακόμα στην πολιτική της Adobe), το Inkscape ή το LibreOffice Draw για αυτό.

Πολλές δωρεάν μετατροπείς είναι διαθέσιμες που μπορείτε να εκτελέσετε στο διαδίκτυο, αλλά είναι αρκετά περιορισμένες όταν πρόκειται για τη διαδικασία μετατροπής. Ενώ μπορεί να επαρκούν για τη μετατροπή ενός απλού λογότυπου που είναι διαθέσιμο ως png ή jpg σε svg, τα αποτελέσματα δεν είναι εξαιρετικά καλά τις περισσότερες φορές.

Ακολουθεί ο τρόπος με τον οποίο αξιολόγησα τις υπηρεσίες: κατέβαλα το λογότυπο του Ghacks και δοκιμάσαμε τις μετατροπές σε αρκετές μετατροπές SVG. Κρίνω το αποτέλεσμα και απορρίψω κάθε υπηρεσία που δεν έδωσε καλά αποτελέσματα.

  • Aconvert - Η υπηρεσία παίρνει ένα τοπικό αρχείο ή μια διεύθυνση URL ως είσοδο. Η μόνη επιλογή που παρέχει είναι η αλλαγή της ανάλυσης της εικόνας. Η προκύπτουσα εικόνα έμοιαζε με το λογότυπο Ghacks, αλλά το μέγεθός της ήταν σχεδόν διπλάσιο από το μέγεθος της έκδοσης PNG του λογότυπου.
  • Vector Magic - Διατίθεται ως πρόγραμμα μετατροπής σε απευθείας σύνδεση και επιφάνεια εργασίας για Windows. Ωστόσο, δεν είναι δωρεάν (η διαδικτυακή δαπάνη κοστίζει $ 7, 95 ανά μήνα, η έκδοση επιτραπέζιων υπολογιστών πραγματοποιεί μια εφάπαξ πληρωμή ύψους $ 295). Ωστόσο, τα αποτελέσματα της ηλεκτρονικής έκδοσης είναι μεγάλα και έχετε πολλές επιλογές για να επεξεργαστείτε ή να τροποποιήσετε τις ρυθμίσεις και μια παράλληλη προβολή της αρχικής εικόνας και του αντίγραφου svg.
  • Vectorizer - Μια άλλη δωρεάν υπηρεσία. Αυτός έρχεται με έναν οδηγό που μπορείτε να επιλέξετε τις καλύτερες παραμέτρους εξόδου (blur, χρώματα) ή μπορείτε να τις ορίσετε απευθείας. Τα αποτελέσματα ήταν καλά με κάποια μικροαλλαγές και το μέγεθος της εικόνας που προέκυψε ήταν ένα τρίτο μικρότερο από το αρχικό λογότυπο PNG.

Τώρα: Ξέρεις μια άλλη ηλεκτρονική υπηρεσία ή πρόγραμμα για τη μετατροπή εικόνων σε μορφή SVG;