Utilia
Κατηγορίες ▾
Γλώσσα: el ▾

Μετατροπή εικόνας σε SVG

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

Όσο μεγαλύτερο, τόσο πιο ακριβές αλλά πιο αργό.

Πρωτότυπο
Αποτέλεσμα SVG

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

  1. Σύρετε μια εικόνα PNG, JPG, WebP ή GIF στην περιοχή απόθεσης ή κάντε κλικ σε αυτήν για να την επιλέξετε. Το πρωτότυπο εμφανίζεται αριστερά.
  2. Διαλέξτε μια Προκαθορισμένη ρύθμιση: - Λογότυπο (επίπεδα χρώματα, καθαρά σχήματα) για λογότυπα, εικονίδια, σφραγίδες και επίπεδες εικονογραφήσεις· - Λεπτομερές (περισσότερα χρώματα και διαδρομές) για σχέδια με σκιάσεις ή πολλά χρώματα· - Αφίσα (4 εξομαλυμένα χρώματα) για στυλιζαρισμένο αποτέλεσμα που θυμίζει αφίσα από μια φωτογραφία.
  3. Προσαρμόστε τον Αριθμός χρωμάτων (2 έως 64) και την Παράβλεψη κηλίδων μικρότερων από (px) αν χρειάζεται. Η προκαθορισμένη ρύθμιση συμπληρώνει λογικές τιμές και για τα δύο.
  4. Επιλέξτε το Μέγεθος επεξεργασίας (μεγαλύτερη πλευρά). Η εικόνα διανυσματοποιείται σε αυτό το μέγεθος· το ίδιο το SVG κρατά τις αρχικές διαστάσεις.
  5. Πατήστε Μετατροπή σε SVG. Το αποτέλεσμα εμφανίζεται δεξιά με το μέγεθος αρχείου, τον αριθμό διαδρομών και χρωμάτων και τον χρόνο που χρειάστηκε.
  6. Πατήστε Λήψη SVG ή Αντιγραφή κώδικα SVG για να επικολλήσετε τον κώδικα στο HTML ή στο εργαλείο σχεδιασμού σας.

Πώς λειτουργεί η διανυσματοποίηση

Αυτό το εργαλείο χρησιμοποιεί το imagetracerjs, έναν ανοιχτού κώδικα διανυσματοποιητή, σε τρία βήματα:

  1. Κβαντισμός χρωμάτων: η εικόνα περιορίζεται στον αριθμό χρωμάτων που επιλέξατε. Κάθε εικονοστοιχείο αντιστοιχίζεται στο πλησιέστερο χρώμα της παλέτας και η παλέτα βελτιώνεται σε αρκετές επαναλήψεις.
  2. Ανίχνευση ακμών: για κάθε χρώμα ακολουθούνται τα περιγράμματα κάθε περιοχής αυτού του χρώματος, μαζί με τις τρύπες (όπως το εσωτερικό ενός «Ο»).
  3. Προσαρμογή διαδρομών: τα περιγράμματα απλοποιούνται σε ευθείες γραμμές και τετραγωνικές καμπύλες, που γίνονται στοιχεία <path> στο SVG.

Οι περιοχές μικρότερες από το όριο Παράβλεψη κηλίδων μικρότερων από (px) απορρίπτονται, κάτι που αφαιρεί θόρυβο και ελαττώματα JPG. Η τιμή 0 κρατά τα πάντα· το 8 έως 20 είναι καλό για λογότυπα· μεγαλύτερες τιμές δίνουν πιο καθαρό αλλά απλούστερο σχέδιο. Οι εντελώς διαφανείς περιοχές αφαιρούνται, ώστε ένα λογότυπο σε διαφανές φόντο να παραμένει διαφανές.

Τι δίνει καλά αποτελέσματα

Η διανυσματοποίηση λειτουργεί καλύτερα σε απλά λογότυπα και σχέδια: λίγα επίπεδα χρώματα, καθαρές ακμές, χωρίς διαβαθμίσεις. Ένα σκαναρισμένο σκίτσο, μια ασπρόμαυρη υπογραφή ή ένα εικονίδιο pixel art διανυσματοποιείται πολύ καλά με 2 έως 8 χρώματα.

Οι φωτογραφίες είναι άλλη υπόθεση. Μια φωτογραφία περιέχει χιλιάδες διακριτικούς τόνους, επομένως μια πιστή διανυσματική εκδοχή χρειάζεται πολλά χρώματα και δεκάδες χιλιάδες διαδρομές και το SVG καταλήγει πολύ βαρύτερο από το JPG. Χρησιμοποιήστε την Αφίσα (4 εξομαλυμένα χρώματα) για καλλιτεχνικό εφέ και μην περιμένετε φωτογραφικό αποτέλεσμα. Αν το SVG γίνει πολύ μεγάλο, το εργαλείο σας προειδοποιεί.

Συμβουλές για πιο καθαρό λογότυπο:

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

Απόρρητο και ασφάλεια της προεπισκόπησης

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

Συχνές ερωτήσεις

Μπορώ να μετατρέψω ένα JPG σε SVG για κοπτικό μηχάνημα;

Ναι. Για κοπή σε Cricut ή Silhouette, χρησιμοποιήστε τη ρύθμιση Λογότυπο με 2 χρώματα: παίρνετε καθαρά μαύρα σχήματα σε λευκό φόντο. Διαγράψτε το σχήμα του φόντου στο λογισμικό κοπής σας, αν χρειάζεται.

Γιατί το αρχείο SVG είναι μεγαλύτερο από το αρχικό PNG;

Κάθε περιοχή χρώματος γίνεται διαδρομή με πολλά σημεία. Μειώστε τον Αριθμός χρωμάτων, αυξήστε την Παράβλεψη κηλίδων μικρότερων από (px) ή επιλέξτε μικρότερο Μέγεθος επεξεργασίας (μεγαλύτερη πλευρά) για ελαφρύτερο αρχείο.

Θα είναι το SVG άπειρα καθαρό;

Ναι: οι διαδρομές κλιμακώνονται σε οποιοδήποτε μέγεθος χωρίς θόλωμα. Τα σχήματα όμως μπορούν να είναι τόσο ακριβή όσο η εικόνα που διανυσματοποιήθηκε, γι’ αυτό οι μικρές ή θολές πηγές δίνουν πιο στρογγυλεμένες, λιγότερο ακριβείς ακμές.

Γιατί η διανυσματοποίηση διαρκεί μερικά δευτερόλεπτα;

Ο υπολογισμός γίνεται στη συσκευή σας. Τα μεγάλα μεγέθη επεξεργασίας και τα πολλά χρώματα πολλαπλασιάζουν τη δουλειά. Τα 800 px είναι καλή ισορροπία· δοκιμάστε 400 px για γρήγορη προεπισκόπηση.

Είναι το ίδιο με την ενσωμάτωση της εικόνας σε ένα SVG;

Όχι. Κάποιοι μετατροπείς απλώς τυλίγουν το PNG μέσα σε ένα αρχείο SVG, κάτι που δεν το κάνει κλιμακούμενο. Αυτό το εργαλείο δημιουργεί πραγματικές διανυσματικές διαδρομές.

Σχετικά εργαλεία