Προεπισκόπηση / Επεξεργαστής SVG

Πώς λειτουργεί η προεπισκόπηση / επεξεργαστής SVG

Τι κάνει το εργαλείο

Η προεπισκόπηση / επεξεργαστής SVG αποδίδει (render) ζωντανά τη σήμανση SVG καθώς την επεξεργάζεστε και εξάγει μεταδεδομένα (πλάτος, ύψος, viewBox, πλήθος στοιχείων) για γρήγορο έλεγχο. Ένας διακόπτης προσθέτει καρό φόντο ώστε να βλέπετε καθαρά τις διαφανείς περιοχές. Το εργαλείο παράγει επίσης ένα URL-encoded data URI κατάλληλο για άμεση χρήση σε CSS background-image ή σε HTML src attributes.

Συνηθισμένες περιπτώσεις χρήσης για προγραμματιστές

Οι designers εικονιδίων δοκιμάζουν τα μαθηματικά του viewBox και τα πλάτη stroke σε διαφορετικά μεγέθη. Οι frontend developers επαληθεύουν ότι ένα χειροκίνητα επεξεργασμένο SVG εικονίδιο εξακολουθεί να αποδίδεται σωστά μετά από βελτιστοποίηση (χειροκίνητη ή μέσω SVGO). Οι email developers δημιουργούν συμπαγείς εκδόσεις data URI των brand marks για ενσωμάτωση (inlining) σε HTML. Οι εκπαιδευτικοί δείχνουν πώς attributes όπως preserveAspectRatio και overflow επηρεάζουν την απόδοση.

Μορφές δεδομένων, τύποι ή παραλλαγές

Η είσοδος είναι ακατέργαστη σήμανση SVG XML. Η έξοδος είναι το ίδιο SVG αποδοσμένο σε sandboxed iframe, συν ένα URL-encoded data URI (data:image/svg+xml;charset=utf-8,…). Η μέτρηση πλήθους στοιχείων μετρά κάθε ετικέτα ανοίγματος (συμπεριλαμβανομένων defs, g, gradients και παρόμοιων εμφωλευμένων στοιχείων), δίνοντας μια κατά προσέγγιση αίσθηση πολυπλοκότητας. Οι εξαγόμενες τιμές attributes εμφανίζονται σε ακατέργαστη μορφή.

Συνηθισμένα λάθη και οριακές περιπτώσεις

Εξωτερικοί πόροι που αναφέρονται από στοιχεία `use` ή `image` με href δεν θα φορτώσουν μέσα στο sandboxed iframe. Inline JavaScript μέσα σε στοιχεία script μπλοκάρεται από το sandbox — τα animations θα πρέπει να βασίζονται σε SMIL ή CSS keyframes. SVGs που εξαρτώνται από μια συγκεκριμένη γραμματοσειρά που δεν είναι εγκατεστημένη στο σύστημα θα κάνουν fallback σε μια προεπιλογή· ενσωματώστε γραμματοσειρές ή χρησιμοποιήστε γραμματοσειρές συστήματος για προεπισκοπήσεις.

Πότε να χρησιμοποιήσετε αυτό το εργαλείο έναντι κώδικα

Χρησιμοποιήστε το εργαλείο του browser για εφάπαξ σχεδίαση εικονιδίων, debugging ή δημιουργία data URIs. Για παραγωγικά assets, περάστε τα SVGs από το SVGO με ρυθμισμένη διαμόρφωση για να αφαιρέσετε μεταδεδομένα και να ελαχιστοποιήσετε τη σήμανση, και χρησιμοποιήστε ένα σύστημα sprites ή σωστή ενσωμάτωση bundler για να φορτώνετε εικονίδια στην εφαρμογή σας αντί να κάνετε inlining data URIs παντού.