CodeKitHubΤι είναι αυτό το εργαλείο;
Ορισμένες ροές απόδοσης — συγκεκριμένες γεννήτριες γραμματοσειρών εικονιδίων, ορισμένες μηχανές παιχνιδιών, παλαιότεροι εξαγωγείς PDF, και εργαλεία που συνθέτουν μόνο γεμίσματα — δεν χειρίζονται σωστά ή καθόλου τα περιγράμματα SVG. Η μετατροπή ενός περιγράμματος σε γεμάτο σχήμα του ίδιου πλάτους παρακάμπτει εντελώς αυτό το πρόβλημα: το οπτικό αποτέλεσμα φαίνεται πανομοιότυπο, αλλά εκφράζεται ως ένα μεμονωμένο γεμάτο μονοπάτι αντί για μια γραμμή με περίγραμμα.
Αυτό το εργαλείο λειτουργεί δειγματοληπτώντας πολλά σημεία κατά μήκος του περιγράμματος κάθε σχήματος (χρησιμοποιώντας το δικό του API μήκους μονοπατιού του προγράμματος περιήγησης, τον ίδιο μηχανισμό που χρησιμοποιεί η κίνηση SVG) και δημιουργεί δύο παράλληλες γραμμές μετατόπισης στο μισό του πλάτους του περιγράμματος σε κάθε πλευρά, στη συνέχεια τις κλείνει σε ένα γεμάτο πολύγωνο.
Γιατί να το χρησιμοποιήσετε;
- Λειτουργεί σε στοιχεία path, line, polyline, polygon, rect, circle και ellipse — όχι μόνο σε <path> — χρησιμοποιώντας μία ενιαία μέθοδο δειγματοληψίας.
- Διατηρεί το δικό του γέμισμα του σχήματος (αν είχε) ως ξεχωριστό επίπεδο κάτω από το νέο γέμισμα περιγράμματος, ώστε τα σχήματα με γέμισμα και περίγραμμα να μετατρέπονται σωστά.
- Προεπισκόπηση πριν/μετά δίπλα-δίπλα, ώστε να μπορείτε να επιβεβαιώσετε οπτικά τη μετατροπή πριν αντιγράψετε το αποτέλεσμα.
- Εκτελείται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας — το SVG που επικολλάτε δεν μεταφορτώνεται ποτέ πουθενά.
- Δωρεάν, άμεσο, χωρίς όριο μεγέθους αρχείου πέρα από ό,τι μπορεί να αποδώσει το πρόγραμμα περιήγησής σας.
Πώς χρησιμοποιείται
- Επικολλήστε τον κώδικα SVG σας στο πλαίσιο κειμένου (ένα λειτουργικό παράδειγμα είναι προσυμπληρωμένο).
- Κάντε κλικ στο "Convert strokes to fills".
- Συγκρίνετε την προεπισκόπηση πριν/μετά για να επιβεβαιώσετε ότι το αποτέλεσμα φαίνεται σωστό.
- Κάντε κλικ στο "Copy SVG" για να αντιγράψετε τον μετατρεμμένο κώδικα χωρίς περίγραμμα.
Παράδειγμα
Είσοδος
<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>Έξοδος
Ένα μεμονωμένο <path fill="#3B82F6"> του οποίου το περίγραμμα ακολουθεί και τις δύο πλευρές της αρχικής καμπύλης, με απόσταση 12 μονάδων, χωρίς κανένα χαρακτηριστικό stroke.Το σχήμα της καμπύλης διατηρείται επειδή το εργαλείο δειγματοληπτεί σημεία συνεχώς κατά μήκος του πραγματικά αποδιδόμενου μονοπατιού, όχι μόνο των σημείων ελέγχου του.
Συχνές ερωτήσεις
Γιατί οι αιχμηρές γωνίες βγαίνουν στρογγυλεμένες αντί για μυτερές (mitered);
Αυτή είναι μια γνωστή, σκόπιμη απλοποίηση της προσέγγισης δειγματοληψίας: η πυκνή δειγματοληψία σημείων κατά μήκος ενός μονοπατιού παράγει φυσικά στρογγυλεμένες ενώσεις και άκρα, ανεξάρτητα από την αρχική τιμή stroke-linejoin ή stroke-linecap. Η ανακατασκευή ακριβών ενώσεων mitre ή bevel απαιτεί έναν διαφορετικό, πιο σύνθετο αλγόριθμο (τομή τμημάτων γραμμής σε κάθε κορυφή) που αυτό το εργαλείο δεν υλοποιεί. Για τις περισσότερες περιπτώσεις χρήσης εικονιδίων και εικονογραφήσεων, η οπτική διαφορά είναι ελάχιστη, αλλά αν χρειάζεστε ακριβείς ενώσεις mitre, η λειτουργία "outline stroke" ενός εξειδικευμένου διανυσματικού επεξεργαστή θα είναι πιο ακριβής.
Χειρίζεται αυτό διακεκομμένα περιγράμματα (stroke-dasharray);
Όχι — το εργαλείο αντιμετωπίζει κάθε περίγραμμα ως συμπαγές και αγνοεί τα stroke-dasharray/stroke-dashoffset. Ένα διακεκομμένο περίγραμμα θα μετατραπεί σαν να ήταν συμπαγές, κάτι που αλλάζει την εμφάνισή του. Αν το SVG σας χρησιμοποιεί διακεκομμένα περιγράμματα, αυτό το εργαλείο δεν είναι κατάλληλο για αυτά τα συγκεκριμένα σχήματα.
Γιατί δεν μετατράπηκε τίποτα;
Το εργαλείο μετατρέπει μόνο στοιχεία που έχουν και χρώμα περιγράμματος (όχι "none") και θετικό stroke-width, οριζόμενα είτε ως χαρακτηριστικά είτε στο δικό του style του στοιχείου. Αν το SVG σας ορίζει το περίγραμμα μέσω μιας εξωτερικής κλάσης CSS που το πρόγραμμα περιήγησης δεν μπορεί να επιλύσει μέσα στην απομονωμένη προεπισκόπηση αυτού του εργαλείου, ή μέσω ενός μπλοκ <style> που αναφέρεται σε κλάσεις, το υπολογισμένο στυλ ενδέχεται να μην επιλυθεί σωστά — δοκιμάστε να ορίσετε τα stroke και stroke-width ως άμεσα χαρακτηριστικά στο σχήμα.
Πότε πρέπει να μετατρέπω περιγράμματα σε γεμίσματα και πότε να κρατάω τα περιγράμματα;
Αν ακόμα σχεδιάζετε, κρατήστε τα περιγράμματα — το stroke-width παραμένει επεξεργάσιμο ως ένας μόνο αριθμός, κάτι που χάνετε μετά τη μετατροπή. Αν εξάγετε σε μια ροή εργασιών που χειρίζεται εσφαλμένα τα περιγράμματα (γεννήτριες γραμματοσειρών εικονιδίων, ορισμένες μηχανές παιχνιδιών ή εξαγωγείς PDF), μετατρέψτε ως τελικό βήμα εξαγωγής και κρατήστε το αρχικό αρχείο με περίγραμμα ως την επεξεργάσιμη πηγή σας, καθώς η μετατροπή είναι μονόδρομη.
Η μετατροπή κάνει το αρχείο SVG μεγαλύτερο;
Συνήθως ναι — μια καμπύλη με περίγραμμα που ορίζεται από λίγα σημεία ελέγχου γίνεται ένα γεμάτο περίγραμμα αποτελούμενο από εκατοντάδες δειγματισμένα τμήματα γραμμής, οπότε τα δεδομένα του μονοπατιού αυξάνονται σημαντικά. Για εικονίδια αυτό σπάνια έχει σημασία στην πράξη, αλλά αν το μέγεθος αποτελεί ζήτημα, περάστε το μετατρεμμένο αποτέλεσμα από έναν βελτιστοποιητή SVG στη συνέχεια για να μειώσετε την ακρίβεια των συντεταγμένων.
Το stroke-opacity μεταφέρεται στο μετατρεμμένο γέμισμα;
Όχι — το μετατρεμμένο μονοπάτι λαμβάνει το χρώμα του περιγράμματος ως γέμισμα αλλά με πλήρη αδιαφάνεια· μια τιμή stroke-opacity στο αρχικό σχήμα απορρίπτεται. Αν χρειάζεστε τη διαφάνεια να διατηρηθεί, προσθέστε fill-opacity με την ίδια τιμή στο μετατρεμμένο μονοπάτι χειροκίνητα αφού αντιγράψετε το αποτέλεσμα.