Το SVG είναι μια διανυσματική μορφή εικόνας (βασισμένη στο XML), επομένως κλιμακώνεται σε οποιοδήποτε μέγεθος χωρίς θόλωμα. Μπορείτε να το συμπεριλάβετε με δύο κύριους τρόπους, ο καθένας με τις δικές του αντιστάσεις.
Πλεονεκτήματα: μπορείτε να το στυλ με CSS (fill, stroke), να κινούν τα μέρη του, να αλλάξετε το χρώμα μέσω currentColor (κληρονομεί το χρώμα του κειμένου), και να αποκρίνεστε σε γεγονότα — επειδή είναι πραγματικό DOM. Κανένα επιπλέον αίτημα HTTP.
Μειονεκτήματα: φουσκώνει το HTML, δεν αποθηκεύεται ξεχωριστά, τα επαναλαμβανόμενα εικονίδια διπλότυπο markup.
<img> — αναφορά ως αρχείο<img src="logo.svg" alt="Company logo" width="120" />
Πλεονεκτήματα: αποθηκευμένα από τον περιηγητή, διατηρεί το HTML καθαρό, απλό. Μειονεκτήματα: δεν μπορείτε να στυλ ή να γράψετε σενάρια στα εσωτερικά μέρη με CSS/JS — είναι μια αδιαφανής εικόνα.
Need to recolor/animate/interact with the SVG → inline SVG
Static logo/illustration, want caching + clean HTML → <img src=".svg">
Many repeated icons → an SVG sprite (<use>) or an icon component
<svg role="img" aria-label="Settings">...</svg> <!-- meaningful icon -->
<svg aria-hidden="true">...</svg> <!-- decorative: hide from AT -->
Η επιλογή μεταξύ inline και <img> SVG κατέληξε σε το αν χρειάζεστε στυλ/κινούν τα γραφικά (inline) ή απλώς να τα εμφανίσετε αποτελεσματικά (<img>).
Τα εικονίδια που αλλάζουν χρώμα κατά τη διάρκεια του hover ή του θέματος πηγαίνουν inline (συχνά ως στοιχεία)? στατικά περιουσιακά στοιχεία μάρκας πηγαίνουν μέσω <img>.
Σε κάθε περίπτωση, τα διανύσματα παραμένουν κρυστάλλινα σε κάθε ανάλυση — ιδανικό για εικονίδια και λογότυπα.