Πώς μπορείτε να εισάγετε SVG σε ένα έγγραφο HTML…

Υπάρχουν διάφοροι τρόποι εισαγωγής SVG σε HTML:

Inline SVG: Άμεση εισαγωγή του κώδικα SVG στο HTML με τη χρήση της ετικέτας <svg>.
Ετικέτα <img>: Χρήση της ετικέτας <img> με το χαρακτηριστικό src που δείχνει στο αρχείο SVG.
Ετικέτα <object>: Εισαγωγή SVG μέσω της ετικέτας <object>.
Ετικέτα <embed>: Εισαγωγή SVG μέσω της ετικέτας <embed>.
CSS: Χρήση του SVG ως εικόνας φόντου μέσω CSS.
<iframe>: Εισαγωγή σελίδας HTML με SVG μέσω <iframe>.

Κάθε μέθοδος έχει τα δικά της χαρακτηριστικά και πλεονεκτήματα:

Μέθοδος	Πλεονεκτήματα	Μειονεκτήματα	Εφαρμογή
Inline SVG	Πλήρης έλεγχος, διαδραστικότητα JS/CSS	Αυξάνει το μέγεθος του HTML, πολυπλοκότητα στην cache	Μικρά και συχνά μεταβαλλόμενα SVG, εικονίδια
`<img>`	Απλότητα, cache	Περιορισμένος έλεγχος, χωρίς διαδραστικότητα JS	Στατικές εικόνες
`<object>`	Σαφής (εξωτερικό αντικείμενο), διαδραστικότητα JS	Λίγο πιο πολύπλοκο από `<img>`, υποστήριξη από browsers	Πολύπλοκα SVG, fallback περιεχόμενο
`<embed>`	Πιο απλό από `<object>`, υποστήριξη παλιών plugins	Δεν συνιστάται σε HTML5	Συμβατότητα με παλαιότερο κώδικα
CSS Background	Ευέλικτη τοποθέτηση, χωρίς επιπλέον tags στο HTML	Χωρίς διαδραστικότητα JS, περιορισμένος έλεγχος	Διακοσμητικά στοιχεία, μοτίβα
`<iframe>`	Πλήρης απομόνωση, φόρτωση ξεχωριστής σελίδας	Επιπλέον φόρτος, δυσκολίες στην αλληλεπίδραση	Εισαγωγή πολύπλοκων, ανεξάρτητων στοιχείων

Παράδειγμα inline SVG:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Παράδειγμα χρήσης της ετικέτας <img>:

<img src="image.svg" alt="Περιγραφή SVG">

Παράδειγμα χρήσης της ετικέτας <object>:

<object data="image.svg" type="image/svg+xml">
  <!-- Περιεχόμενο fallback -->
  <img src="image.png" alt="Εναλλακτική εικόνα">
</object>

Παράδειγμα χρήσης CSS:

.element {
  background-image: url('image.svg'); /* Χρήση SVG ως φόντου */
  background-size: cover; /* Παράδειγμα στυλ */
}

Πώς μπορείτε να εισάγετε SVG σε ένα έγγραφο HTML;