Το SVG Grabber ανακαλύπτει κάθε SVG σε μια ιστοσελίδα — inline SVG elements, εξωτερικές αναφορές .svg αρχείων, SVG sprites (μοτίβα use/symbol) και SVG data URIs. Κάντε προεπισκόπηση κάθε SVG σε διαφορετικά μεγέθη, ελέγξτε τη διαφάνεια σε φωτεινά και σκούρα φόντα, αντιγράψτε το raw SVG markup ή κατεβάστε βελτιστοποιημένα SVG αρχεία.
Τα SVG είναι παντού στους σύγχρονους ιστότοπους — λογότυπα, εικονίδια, εικονογραφήσεις, διακοσμητικά γραφικά, οπτικοποιήσεις δεδομένων — αλλά η εξαγωγή τους είναι εκπληκτικά δύσκολη. Τα inline SVG ενσωματώνονται απευθείας στο HTML και δεν μπορούν να αποθηκευτούν ως εικόνα. Τα SVG sprites χρησιμοποιούν αναφορές use/symbol που δεν επιλύονται σε αυτόνομα αρχεία. Τα εξωτερικά SVG φορτωμένα μέσω img src ή CSS δεν μπορούν να επιθεωρηθούν χωρίς άνοιγμα της καρτέλας network. Το SVG Grabber χειρίζεται αυτόματα όλες αυτές τις πηγές. Σαρώνει το DOM για inline SVGs, επιλύει αναφορές sprite στους πλήρεις ορισμούς symbol, βρίσκει εξωτερικά URL SVG και αποκωδικοποιεί SVG data URIs. Κάθε SVG εμφανίζεται σε γκαλερί με ζωντανή προεπισκόπηση.
Βρίσκει SVGs από κάθε πηγή στη σελίδα: inline svg elements στο DOM, εξωτερικά .svg αρχεία φορτωμένα μέσω img ή object tags, SVGs CSS background-image, αναφορές use/symbol sprite (επιλυμένες σε πλήρη SVGs) και SVGs κωδικοποιημένα ως base64 data URI.
Κάντε προεπισκόπηση κάθε SVG σε διαφορετικά μεγέθη (αρχικό, 2x, 4x) σε τρία φόντα: σκούρο, φωτεινό (λευκό) και σκακιέρα. Η σκακιέρα αποκαλύπτει περιοχές διαφάνειας που μπορεί να είναι αόρατες σε μονόχρωμο φόντο.
Κάντε κλικ στο Copy SVG για να πάρετε πλήρες SVG markup — viewBox, paths, groups και όλα τα attributes συμπεριλαμβάνονται. Επικολλήστε απευθείας στο HTML, JSX, Vue template ή αρχείο SVG sprite. Ο κώδικας είναι καθαρός και σωστά μορφοποιημένος.
Κατεβάστε μεμονωμένα SVGs ως .svg αρχεία με κατάλληλες XML δηλώσεις και κωδικοποίηση. Τα αρχεία ονομάζονται βάσει του ID, ονόματος κλάσης ή aria-label του SVG — όχι γενικά ονόματα.
Κάθε SVG δείχνει τον τύπο πηγής (inline, external, sprite, data URI), διαστάσεις viewBox, μέγεθος αρχείου και πού στο DOM βρέθηκε. Χρήσιμο για κατανόηση του τρόπου υλοποίησης SVG στρατηγικής του ιστοτόπου.
Όταν μια σελίδα χρησιμοποιεί SVG sprites με αναφορές use href, το SVG Grabber επιλύει κάθε αναφορά στον πλήρη ορισμό symbol — δίνοντάς σας το πλήρες αυτόνομο SVG, όχι μόνο το use element.
Επισκεφτείτε ιστότοπο με εξαιρετικό σύστημα εικονιδίων και αρπάξτε ολόκληρο το σύνολο SVG εικονιδίων. Το SVG Grabber βρίσκει εικονίδια σε sprites, inline SVGs και εξωτερικά αρχεία — συλλέγοντας την πλήρη βιβλιοθήκη εικονιδίων ανεξάρτητα από τον τρόπο υλοποίησης.
Χρειάζεστε SVG λογότυπο εταιρείας για σελίδα συνεργασίας, case study ή press kit; Τα περισσότερα λογότυπα σε σύγχρονους ιστότοπους είναι SVGs. Το SVG Grabber τα βρίσκει και τα εξάγει στην αρχική διανυσματική ποιότητά τους — άπειρα κλιμακώσιμα.
Μελετήστε πώς υλοποιούν οι ιστότοποι παραγωγής σύνθετες SVG εικονογραφήσεις, animations ή οπτικοποιήσεις δεδομένων. Αντιγράψτε τον raw SVG κώδικα για να επιθεωρήσετε πώς δομούνται τα paths, πώς ρυθμίζεται το viewBox και πώς εφαρμόζονται animations CSS.
Αλλάζετε σε νέο σύστημα εικονιδίων; Αρπάξτε SVGs από τον ιστότοπο αναφοράς, ρίξτε τα στο SVG sprite ή component-based σύστημα εικονιδίων σας. Καθαρός κώδικας SVG με σωστές τιμές viewBox έτοιμος για ενσωμάτωση.
Ελέγξτε πώς υλοποιούνται τα SVGs στον ιστότοπό σας — είναι inline (καλό για χειρισμό), external (καλό για caching) ή sprites (καλό για αποδοτικότητα); Το SVG Grabber δείχνει τον τύπο πηγής για κάθε SVG, βοηθώντας σας να βελτιστοποιήσετε τη στρατηγική SVG σας.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο SVG Grabber. Το εργαλείο σαρώνει τη σελίδα για όλες τις πηγές SVG και κατασκευάζει τη γκαλερί.
Εμφανίζεται πλέγμα thumbnails SVG που δείχνει κάθε SVG που βρέθηκε στη σελίδα. Κάθε καταχώριση δείχνει το όνομα SVG, τον τύπο πηγής και τις διαστάσεις viewBox.
Κάντε κλικ σε οποιοδήποτε SVG για άνοιγμα μεγαλύτερης προεπισκόπησης. Εναλλάξτε μεταξύ σκούρου, φωτεινού και φόντου σκακιέρας. Αλλάξτε μέγεθος προεπισκόπησης για να δείτε πώς κλιμακώνεται το SVG.
Κάντε κλικ στο Copy SVG για να πάρετε το raw markup για inline χρήση στον κώδικά σας, ή στο Download για αποθήκευσή του ως αυτόνομο .svg αρχείο στη συσκευή σας.
Επιστρέψτε στη γκαλερί για εξερεύνηση περισσότερων SVGs. Το σήμα αριθμού δείχνει το συνολικό αριθμό που βρέθηκε στη σελίδα.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
