6 συνήθεις αποτυχίες SVG (και πώς να τις διορθώσετε)

Κάποιος με ρώτησε πρόσφατα πώς προσεγγίζω τον εντοπισμό σφαλμάτων inline SVG. Επειδή είναι μέρος του DOM, μπορούμε να επιθεωρήσουμε οποιοδήποτε ενσωματωμένο SVG σε οποιοδήποτε DevTools του προγράμματος περιήγησης. Και γι' αυτό, έχουμε τη δυνατότητα να διερευνήσουμε τα πράγματα και να αποκαλύψουμε πιθανά ζητήματα ή ευκαιρίες για βελτιστοποίηση του SVG.

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

1. ο viewBox αξιών

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

Τα στοιχεία υπάρχουν όταν κοπούν — βρίσκονται απλώς σε ένα μέρος του συστήματος συντεταγμένων που δεν βλέπουμε. Αν ανοίγαμε το αρχείο σε κάποιο πρόγραμμα επεξεργασίας γραφικών, θα μπορούσε να μοιάζει με αυτό:

Ο ευκολότερος τρόπος να το διορθώσετε; Προσθήκη overflow="visible" στο SVG, είτε είναι στο φύλλο στυλ μας, ενσωματωμένο στο style χαρακτηριστικό ή απευθείας ως χαρακτηριστικό παρουσίασης SVG. Αν όμως εφαρμόσουμε και α background-color στο SVG ή αν έχουμε άλλα στοιχεία γύρω του, τα πράγματα μπορεί να φαίνονται κάπως άδοξα. Σε αυτήν την περίπτωση, η καλύτερη επιλογή θα είναι να επεξεργαστείτε το viewBox για να δείξει το μέρος του συστήματος συντεταγμένων που ήταν κρυμμένο:

Υπάρχουν μερικά επιπλέον πράγματα σχετικά με το viewBox που αξίζει να καλύψουμε όσο βρισκόμαστε στο θέμα:

Πώς λειτουργεί το viewBox λειτουργεί;

Το SVG είναι ένας άπειρος καμβάς, αλλά μπορούμε να ελέγξουμε τι βλέπουμε και πώς το βλέπουμε μέσω της θύρας προβολής και του viewBox.

Η θύρα προβολής είναι ένα πλαίσιο παραθύρου στον άπειρο καμβά. Οι διαστάσεις του ορίζονται από width και height χαρακτηριστικά, ή σε CSS με το αντίστοιχο width και height ιδιότητες. Μπορούμε να καθορίσουμε οποιαδήποτε μονάδα μήκους θέλουμε, αλλά αν παρέχουμε αριθμούς χωρίς μονάδες, από προεπιλογή είναι pixel.

Η viewBox ορίζεται από τέσσερις τιμές. Τα δύο πρώτα είναι το σημείο εκκίνησης στην επάνω αριστερή γωνία (x και y τιμές, αρνητικοί αριθμοί επιτρέπονται). Τα επεξεργάζομαι για να ξαναπλαισιώσω την εικόνα. Τα δύο τελευταία είναι το πλάτος και το ύψος του συστήματος συντεταγμένων μέσα στο παράθυρο προβολής — εδώ μπορούμε να επεξεργαστούμε την κλίμακα του πλέγματος (στην οποία θα μπούμε στην ενότητα για μεγέθυνση).

Ακολουθεί η απλοποιημένη σήμανση που δείχνει το SVG viewBox και την width και height ιδιότητες και οι δύο ορίζονται στο <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

Αναδιαμόρφωση

Λοιπόν, αυτό:

<svg viewBox="0 0 700 700">

…χάρτες σε αυτό:

<svg viewBox="start-x-axis start-y-axis width height">

Το παράθυρο προβολής που βλέπουμε ξεκινάει από εκεί 0 στον άξονα x και 0 στον άξονα y συναντώνται.

Αλλάζοντας αυτό:

<svg viewBox="0 0 700 700">

…σ 'αυτό:

<svg viewBox="300 200 700 700">

…το πλάτος και το ύψος παραμένουν ίδια (700 μονάδες το καθένα), αλλά η έναρξη του συστήματος συντεταγμένων είναι τώρα στο 300 σημείο στον άξονα x και 200 στον άξονα y.

Στο παρακάτω βίντεο προσθέτω ένα κόκκινο <circle> στο SVG με το κέντρο του στο 300 σημείο στον άξονα x και 200 στον άξονα y. Παρατηρήστε πώς αλλάζετε το viewBox οι συντεταγμένες στις ίδιες τιμές αλλάζουν επίσης την τοποθέτηση του κύκλου στην επάνω αριστερή γωνία του πλαισίου ενώ το μέγεθος που αποδίδεται του SVG παραμένει το ίδιο (700×700). Το μόνο που έκανα ήταν να «αναπλαισιώσω» τα πράγματα με το viewBox.

μεγέθυνση

Μπορούμε να αλλάξουμε τις δύο τελευταίες τιμές μέσα στο viewBox για μεγέθυνση ή σμίκρυνση της εικόνας. Όσο μεγαλύτερες είναι οι τιμές, τόσο περισσότερες μονάδες SVG προστίθενται για να χωρέσουν στη θύρα προβολής, με αποτέλεσμα μια μικρότερη εικόνα. Αν θέλουμε να διατηρήσουμε μια αναλογία 1:1, η δική μας viewBox το πλάτος και το ύψος πρέπει να ταιριάζουν με τις τιμές πλάτους και ύψους της θύρας προβολής.

Ας δούμε τι συμβαίνει στο Illustrator όταν αλλάξουμε αυτές τις παραμέτρους. Το artboard είναι το viewport που αντιπροσωπεύεται από ένα λευκό τετράγωνο 700 px. Οτιδήποτε άλλο εκτός αυτής της περιοχής είναι ο άπειρος καμβάς μας SVG και περικόπτεται από προεπιλογή.

Το σχήμα 1 παρακάτω δείχνει μια μπλε κουκκίδα στο 900 κατά μήκος του άξονα x και 900 κατά μήκος του άξονα y. Αν αλλάξω τα δύο τελευταία viewBox αξίες από 700 προς την 900 σαν αυτό:

<svg viewBox="300 200 900 900" width="700" height="700">

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

Υπάρχει ένα ροζ τετράγωνο ως απόδειξη του τρόπου με τον οποίο το πλέγμα κλιμακώνεται για να ταιριάζει στο παράθυρο προβολής: η μονάδα γίνεται μικρότερη και περισσότερες γραμμές πλέγματος χωρούν στην ίδια περιοχή της θύρας προβολής. Μπορείτε να παίξετε με τις ίδιες τιμές στο παρακάτω στυλό για να δείτε ότι λειτουργεί σε δράση:

2. Λείπει width και height

Ένα άλλο κοινό πράγμα που εξετάζω κατά τον εντοπισμό σφαλμάτων inline SVG είναι εάν η σήμανση περιέχει το width or height γνωρίσματα. Αυτό δεν είναι μεγάλη υπόθεση σε πολλές περιπτώσεις, εκτός εάν το SVG βρίσκεται μέσα σε ένα κοντέινερ με απόλυτη τοποθέτηση ή σε ένα ευέλικτο δοχείο (όπως το Safari υπολογίζει το SVG width αξία με 0px αντί του auto). Εξαιρώντας width or height σε αυτές τις περιπτώσεις μας εμποδίζει να δούμε την πλήρη εικόνα, όπως μπορούμε να δούμε άνοιγμα αυτής της επίδειξης του CodePen και συγκρίνοντάς το σε Chrome, Safari και Firefox (πατήστε τις εικόνες για μεγαλύτερη προβολή).

Η λύση? Προσθέστε ένα πλάτος ή ύψος, είτε ως χαρακτηριστικό παρουσίασης, είτε ως ενσωματωμένο χαρακτηριστικό στυλ είτε σε CSS. Αποφύγετε τη χρήση του ύψους από μόνο του, ιδιαίτερα όταν είναι ρυθμισμένο σε 100% or auto. Μια άλλη λύση είναι να ορίστε το σωστό και  αριστερές τιμές.

Μπορείτε να παίξετε με το παρακάτω στυλό και συνδυάστε τις διάφορες επιλογές.

3. Εκ παραδρομής fill και stroke χρωματιστά

Μπορεί επίσης να είναι ότι εφαρμόζουμε χρώμα στο <svg> ετικέτα, είτε πρόκειται για ενσωματωμένο στυλ είτε προέρχεται από CSS. Αυτό είναι εντάξει, αλλά θα μπορούσαν να υπάρχουν άλλες τιμές χρώματος σε όλη τη σήμανση ή στυλ που έρχονται σε αντίθεση με το σύνολο χρωμάτων στο <svg>, με αποτέλεσμα τα μέρη να είναι αόρατα.

Γι' αυτό τείνω να αναζητώ το fill και stroke χαρακτηριστικά στη σήμανση του SVG και διαγράψτε τα. Το παρακάτω βίντεο δείχνει ένα SVG που διαμόρφωσα σε CSS με κόκκινο fill. Υπάρχουν μερικές περιπτώσεις όπου μέρη του SVG γεμίζονται με λευκό απευθείας στη σήμανση που αφαίρεσα για να αποκαλύψω τα κομμάτια που λείπουν.

4. Λείπουν ταυτότητες

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

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

Σε μεγάλα αρχεία SVG μπορεί να δυσκολευτούμε να βρούμε αυτά τα αναγνωριστικά. Αυτή είναι η κατάλληλη στιγμή για να ανοίξετε τα Εργαλεία προγραμματισμού, να επιθεωρήσετε το τμήμα του γραφικού που δεν λειτουργεί και να δείτε εάν αυτά τα αναγνωριστικά εξακολουθούν να ταιριάζουν.

Έτσι, θα έλεγα ότι αξίζει να ανοίξετε ένα εξαγόμενο αρχείο SVG σε ένα πρόγραμμα επεξεργασίας κώδικα και να το συγκρίνετε με το πρωτότυπο πριν ανταλλάξετε τα πράγματα. Εφαρμογές όπως το Illustrator, το Figma και το Sketch είναι έξυπνες, αλλά αυτό δεν σημαίνει ότι δεν είμαστε υπεύθυνοι για τον έλεγχο τους.

5. Λίστα ελέγχου για αποκοπή και κάλυψη

Εάν ένα SVG κοπεί απροσδόκητα και το viewBox ελέγχει μια χαρά, συνήθως κοιτάζω το CSS clip-path or mask ιδιότητες που ενδέχεται να επηρεάσουν την εικόνα. Είναι δελεαστικό να συνεχίσετε να κοιτάτε την ενσωματωμένη σήμανση, αλλά είναι καλό να θυμάστε ότι το στυλ ενός SVG μπορεί να συμβαίνει αλλού.

Αποκοπή και κάλυψη CSS μας επιτρέπουν να «κρύψουμε» μέρη μιας εικόνας ή ενός στοιχείου. Στο SVG, <clipPath> είναι μια διανυσματική πράξη που κόβει μέρη μιας εικόνας χωρίς αποτελέσματα στα μισά. ο <mask> Η ετικέτα είναι μια λειτουργία pixel που επιτρέπει τη διαφάνεια, τα εφέ ημιδιαφάνειας και τις θολές άκρες.

Αυτή είναι μια μικρή λίστα ελέγχου για τον εντοπισμό σφαλμάτων σε περιπτώσεις όπου εμπλέκεται η αποκοπή και η κάλυψη:

• Βεβαιωθείτε ότι η διαδρομή αποκοπής (ή η μάσκα) και το γραφικό επικαλύπτονται μεταξύ τους. Τα επικαλυπτόμενα μέρη είναι αυτά που εμφανίζονται.
• Εάν έχετε μια πολύπλοκη διαδρομή που δεν τέμνει το γραφικό σας, δοκιμάστε να εφαρμόσετε μετασχηματισμούς μέχρι να ταιριάζουν.
• Μπορείτε ακόμα να επιθεωρήσετε τον εσωτερικό κώδικα με τα DevTools, παρόλο που το <clipPath> or <mask> δεν αποδίδονται, γι' αυτό χρησιμοποιήστε το!
• Αντιγράψτε τη σήμανση μέσα <clipPath> και <mask> και επικολλήστε το πριν κλείσετε το </svg> ετικέτα. Στη συνέχεια προσθέστε ένα fill σε αυτά τα σχήματα και ελέγξτε τις συντεταγμένες και τις διαστάσεις του SVG. Εάν εξακολουθείτε να μην βλέπετε την εικόνα, δοκιμάστε να προσθέσετε overflow="hidden" στο <svg> tags.
• Ελέγξτε ότι a μοναδικός Το ID χρησιμοποιείται για το <clipPath> or <mask>, και ότι το ίδιο αναγνωριστικό εφαρμόζεται στα σχήματα ή την ομάδα σχημάτων που έχουν κοπεί ή καλύπτεται. Μια αναντιστοιχία ταυτότητας θα σπάσει την εμφάνιση.
• Ελέγξτε για τυπογραφικά λάθη στη σήμανση μεταξύ των <clipPath> or <mask> ετικέτες.
• fill, stroke, opacity, ή κάποια άλλα στυλ που εφαρμόζονται στα στοιχεία μέσα <clipPath> είναι άχρηστα — το μόνο χρήσιμο μέρος είναι η γεωμετρία της περιοχής πλήρωσης αυτών των στοιχείων. Γι' αυτό αν χρησιμοποιήσετε α <polyline> θα συμπεριφέρεται ως α <polygon> και αν χρησιμοποιείτε ένα <line> δεν θα δείτε κανένα αποτέλεσμα αποκοπής.
• Εάν δεν βλέπετε την εικόνα σας μετά την εφαρμογή του a <mask>, βεβαιωθείτε ότι το fill του περιεχομένου κάλυψης δεν είναι εντελώς μαύρο. Η φωτεινότητα του στοιχείου κάλυψης καθορίζει την αδιαφάνεια του τελικού γραφικού. Θα μπορείτε να δείτε μέσα από τα φωτεινότερα μέρη και τα πιο σκοτεινά μέρη θα κρύψουν το περιεχόμενο της εικόνας σας.

Μπορείτε να παίξετε με καλυμμένα και αποκομμένα στοιχεία αυτό το στυλό.

6. Χώροι ονομάτων

Γνωρίζατε ότι η SVG είναι μια γλώσσα σήμανσης που βασίζεται σε XML; Λοιπόν, είναι! Ο χώρος ονομάτων για το SVG έχει οριστεί στο xmlns Χαρακτηριστικό:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

Υπάρχουν πολλά να ξέρετε για τον χώρο ονομάτων σε XML και το MDN έχει ένα εξαιρετικό primer σε αυτό. Αρκεί να πούμε ότι ο χώρος ονομάτων παρέχει πλαίσιο στο πρόγραμμα περιήγησης, ενημερώνοντάς το ότι η σήμανση είναι συγκεκριμένη για το SVG. Η ιδέα είναι ότι οι χώροι ονομάτων βοηθούν στην αποφυγή διενέξεων όταν περισσότεροι από ένας τύποι XML βρίσκονται στο ίδιο αρχείο, όπως το SVG και το XHTML. Αυτό είναι ένα πολύ λιγότερο κοινό ζήτημα στα σύγχρονα προγράμματα περιήγησης, αλλά θα μπορούσε να βοηθήσει στην εξήγηση των προβλημάτων απόδοσης SVG σε παλαιότερα προγράμματα περιήγησης ή προγράμματα περιήγησης όπως το Gecko που είναι αυστηρά κατά τον ορισμό τύπων εγγράφων και χώρων ονομάτων.

Η προδιαγραφή SVG 2 δεν απαιτεί χώρο ονομάτων όταν χρησιμοποιείτε σύνταξη HTML. Αλλά είναι κρίσιμο εάν η υποστήριξη για προγράμματα περιήγησης παλαιού τύπου είναι προτεραιότητα — επιπλέον, δεν βλάπτει τίποτα να την προσθέσετε. Με αυτόν τον τρόπο, όταν το <html> στοιχεία xmlns Το χαρακτηριστικό ορίζεται, δεν θα έρχεται σε σύγκρουση σε αυτές τις σπάνιες περιπτώσεις.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

Αυτό ισχύει επίσης όταν χρησιμοποιείτε ενσωματωμένο SVG σε CSS, όπως όταν το ορίζετε ως εικόνα φόντου. Στο παρακάτω παράδειγμα, εμφανίζεται ένα εικονίδιο σημάδι επιλογής στην είσοδο μετά την επιτυχή επικύρωση. Έτσι φαίνεται το CSS:

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

Όταν αφαιρούμε τον χώρο ονομάτων μέσα στο SVG στην ιδιότητα φόντου, η εικόνα εξαφανίζεται:

Ένα άλλο κοινό πρόθεμα χώρου ονομάτων είναι xlink:href. Το χρησιμοποιούμε πολύ όταν αναφέρουμε άλλα μέρη του SVG όπως: μοτίβα, φίλτρα, κινούμενα σχέδια ή διαβαθμίσεις. Η σύσταση είναι να αρχίσετε να το αντικαθιστάτε με href καθώς το άλλο έχει καταργηθεί από το SVG 2, αλλά ενδέχεται να υπάρχουν προβλήματα συμβατότητας με παλαιότερα προγράμματα περιήγησης. Σε αυτή την περίπτωση, μπορούμε να χρησιμοποιήσουμε και τα δύο. Απλώς θυμηθείτε να συμπεριλάβετε τον χώρο ονομάτων xmlns:xlink="http://www.w3.org/1999/xlink" εάν εξακολουθείτε να χρησιμοποιείτε xlink:href.

Αναβαθμίστε τις SVG δεξιότητές σας!

Ελπίζω αυτές οι συμβουλές να σας βοηθήσουν να εξοικονομήσετε χρόνο, εάν αντιμετωπίζετε προβλήματα που δεν έχουν αποδοθεί σωστά inline SVG. Αυτά είναι μόνο τα πράγματα που ψάχνω. Ίσως έχετε διαφορετικές κόκκινες σημαίες που προσέχετε — αν ναι, πείτε μου στα σχόλια!

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

Υπάρχουν μερικά άτομα που προτείνω να ακολουθήσω για καλοσύνη που σχετίζεται με το SVG:

• SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
• Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
• πηγή: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/