Τι είναι το SVG;

Το SVG (Scalable Vector Graphics) είναι μια μορφή διανυσματικών γραφικών βασισμένη σε XML για τη δημιουργία δισδιάστατων γραφικών. Σε αντίθεση με τις ραστερ εικόνες, το SVG περιγράφει τα γραφικά με μαθηματικούς τύπους, επιτρέποντας την κλιμάκωση των εικόνων χωρίς απώλεια ποιότητας.

Κύχα χαρακτηριστικά του SVG:

• Μορφή διανυσματική: Οι εικόνες περιγράφονται από γεωμετρικά primitives (σημεία, γραμμές, καμπύλες, σχήματα), όχι από pixels.
• Βάση XML: Η δομή του εγγράφου SVG βασίζεται στη σύνταξη XML, καθιστώντας το εύκολο στην ανάγνωση και επεξεργασία.
• Κλιμάκωση: Οι εικόνες μπορούν να μεγεθυνθούν ή να μικρύνουν χωρίς να χάνουν ευκρίνεια ή ποιότητα.
• Διαδραστικότητα: Τα στοιχεία SVG μπορούν να είναι διαδραστικά, αντιδρώντας σε γεγονότα (κλικ, hover κ.λπ.) μέσω JavaScript.
• Στυλ: Η εμφάνιση των στοιχείων SVG μπορεί να διαμορφωθεί με CSS.
• Κινηματογράφηση: Το SVG υποστηρίζει την κίνηση στοιχείων με ενσωματωμένα μέσα ή CSS/JavaScript.

Πλεονεκτήματα της χρήσης SVG στο διαδίκτυο:

• Ιδανικό για εικονίδια και λογότυπα: Η κλιμάκωση διασφαλίζει μια καθαρή εμφάνιση σε οποιαδήποτε ανάλυση οθόνης.
• Μικρότερο μέγεθος αρχείου: Για πολλούς τύπους γραφικών, τα αρχεία SVG μπορούν να είναι μικρότερα από παρόμοια ραστερ φορμά.
• Φιλικό προς το SEO: Το κείμενο στο SVG ευρετηριάζεται από τις μηχανές αναζήτησης.
• Προσβασιμότητα: Χάρη στη γραπτή φύση του, το SVG είναι πιο προσβάσιμο για βοηθητικές τεχνολογίες.
• Εύκολη τροποποίηση: Καθώς είναι XML, το περιεχόμενο μπορεί να τροποποιηθεί δυναμικά.

Παράδειγμα απλού SVG εικόνας (κύκλος):

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