SVG σε HTML

Μετατροπή SVG σε HTML διαδικτυακά

Επιλέξτε ένα αρχείο SVG ή επικολλήστε τον κώδικά του για να δημιουργήσετε inline SVG για μια σελίδα HTML. Δείτε το αποτέλεσμα σε προεπισκόπηση, προσαρμόστε τις ρυθμίσεις βελτιστοποίησης και αντιγράψτε τον κώδικα. Η ανάλυση, η βελτιστοποίηση και η μετατροπή γίνονται τοπικά στο πρόγραμμα περιήγησής σας, χωρίς να αποστέλλεται το SVG σας σε διακομιστή.

Προετοιμάστε προσαρμοστικό inline SVG

Διατηρήστε το viewBox για να μείνει ίδιο το σύστημα συντεταγμένων του SVG. Αφαιρέστε το σταθερό πλάτος και ύψος όταν το SVG έχει αξιοποιήσιμο viewBox και ορίστε το μέγεθός του στο δικό σας CSS.

Κατανοήστε το μέγεθος του SVG και την εξοικονόμηση

Το «Αρχικό μέγεθος» είναι το μέγεθος του SVG που εισαγάγατε. Το «Μέγεθος βελτιστοποιημένου SVG» είναι το μέγεθός του μετά την επεξεργασία με τις επιλογές σας, όπως η αφαίρεση σχολίων, η στρογγυλοποίηση συντεταγμένων και η ελαχιστοποίηση του κώδικα. Τα μεγέθη εμφανίζονται σε kB, όπου 1 kB ισούται με 1.000 byte. Η «Εξοικονόμηση» είναι το ποσοστό μείωσης: από 10 kB σε 7 kB εξοικονομείτε 30%. Αν το αποτέλεσμα είναι μεγαλύτερο, για παράδειγμα λόγω ευανάγνωστης μορφοποίησης, εμφανίζεται «Αύξηση μεγέθους». Οι τιμές αυτές συγκρίνουν τον κώδικα SVG, όχι το μέγεθος των εξαγωγών JSX, React, CSS Data URI ή Base64.

Ακρίβεια δεκαδικών και εσοχή

Η ακρίβεια δεκαδικών ορίζει πόσα ψηφία διατηρούνται μετά την υποδιαστολή στις συντεταγμένες και στα αριθμητικά χαρακτηριστικά. Με ακρίβεια 2, το 12,34567 γίνεται 12,35. Λιγότερα δεκαδικά ψηφία μπορούν να μειώσουν το μέγεθος του αρχείου, αλλά ενδέχεται να αλλοιώσουν λεπτές λεπτομέρειες· η προεπιλογή 3 είναι ένα σημείο εκκίνησης, οπότε ελέγξτε την προεπισκόπηση. Η εσοχή χρησιμοποιεί 2 κενά, 4 κενά ή στηλοθέτες για να γίνει ο κώδικας HTML και JSX πιο ευανάγνωστος, χωρίς να αλλάζει η εικόνα. Η «Ελαχιστοποίηση SVG» αφαιρεί τα περιττά κενά μορφοποίησης για να συμπτύξει το αποτέλεσμα, γι’ αυτό η εσοχή απενεργοποιείται όσο είναι ενεργή η ελαχιστοποίηση.

HTML, JSX, React και Data URI για SVG

Η έξοδος HTML είναι κώδικας inline SVG και η λήψη της γίνεται ως αρχείο SVG. Το JSX προσαρμόζει τα ονόματα των χαρακτηριστικών και τα inline στυλ για το React. Το «Στοιχείο React» το περικλείει σε μια συνάρτηση TypeScript που δέχεται τα τυπικά props του SVG. Το CSS Data URI παράγει μια δήλωση background-image· το Base64 παράγει ένα κωδικοποιημένο URI εικόνας SVG. Τα στατιστικά μεγέθους αφορούν το βελτιστοποιημένο SVG, όχι τις μεγαλύτερες κωδικοποιημένες μορφές. Ελέγξτε τα ID πριν χρησιμοποιήσετε πολλά inline αντίγραφα στην ίδια σελίδα.

Στατική και τοπική επεξεργασία SVG

Η προεπισκόπηση είναι μια απομονωμένη εικόνα και όχι εκτελέσιμος κώδικας σελίδας. Τα scripts, το ενσωματωμένο HTML, τα εφέ κίνησης, οι εξωτερικές εικόνες και τα φύλλα στυλ αφαιρούνται. Τα υποστηριζόμενα inline στυλ παρουσίασης και οι τοπικές αναφορές τμημάτων διατηρούνται. Το εργαλείο αυτό προορίζεται για στατικά σχέδια· οι λειτουργίες που δεν υποστηρίζονται ενδέχεται να αλλάξουν την εμφάνιση του σχεδίου. Το currentColor αλλάζει τα συμπαγή γεμίσματα και περιγράμματα και κληρονομεί το χρώμα του όταν χρησιμοποιείται inline· μια προεπισκόπηση εικόνας χρησιμοποιεί το δικό της χρωματικό πλαίσιο.