SVG: τι είναι, βασικές έννοιες και χρήση στην ανάπτυξη ιστού

Τι είναι το SVG;

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

Η αρχιτεκτονική του SVG περιλαμβάνει πολλές βασικές έννοιες. viewBox καθορίζει ένα εικονικό σύστημα συντεταγμένων, ανεξάρτητο από τα πραγματικά μεγέθη του στοιχείου. Για παράδειγμα, viewBox="0 0 100 100" δημιουργεί ένα τετράγωνο πλέγμα 100×100, εντός του οποίου όλες οι συντεταγμένες είναι σταθερές. Όταν αλλάζει το πλάτος ή το ύψος του περιέκτη, το περιεχόμενο κλιμακώνεται αναλογικά.

Σύμφωνα με το W3C SVG 2 Specification, η σύγχρονη έκδοση του SVG υποστηρίζει διαβαθμίσεις, μάσκες, φίλτρα, κείμενο με αυθαίρετη τοποθέτηση, διαδραστικότητα μέσω JavaScript και κινούμενα σχέδια μέσω CSS και SMIL. Το SVG είναι ενσωματωμένο στο DOM ως πλήρες στοιχείο HTML, επιτρέποντας τον προγραμματισμό κάθε γραφικού πρωτογενούς στοιχείου.

Στην ανάπτυξη κινητών, το SVG χρησιμοποιείται επίσης στο iOS μέσω UIGraphicsImageRenderer και στο Android μέσω VectorDrawable — και οι δύο μορφές μετατρέπουν περιγραφές παρόμοιες με SVG σε επιταχυνόμενες ραστεροποιημένες εικόνες στην GPU.

Ιστορία και εξέλιξη της μορφής SVG

Το SVG 1.0 έγινε σύσταση W3C το 2001, το SVG 1.1 το 2003, το SVG 2.0 βρίσκεται υπό ανάπτυξη από το 2012. Η κύρια καινοτομία του SVG 2 είναι η βαθύτερη ενσωμάτωση με CSS, η υποστήριξη compositing και blending modes, καθώς και η δυνατότητα χρήσης SVG σε HTML χωρίς προθέματα namespace.

Παρά το γεγονός ότι το SVG 2 δεν έχει φτάσει ακόμη σε κατάσταση Σύστασης, τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν ήδη το μεγαλύτερο μέρος της λειτουργικότητάς του. Τα Chrome, Safari, Firefox και Edge έχουν σχεδόν πλήρη υποστήριξη για SVG 1.1 και σημαντικό μέρος του SVG 2.

Βασικά στοιχεία SVG

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

• <rect> — ορθογώνιο με χαρακτηριστικά x, y, width, height, rx, ry (στρογγυλοποίηση γωνιών).
• <circle> — κύκλος με χαρακτηριστικά cx, cy (κέντρο) και r (ακτίνα).
• <ellipse> — έλλειψη με χαρακτηριστικά cx, cy, rx, ry.
• <line> — ευθύγραμμο τμήμα με χαρακτηριστικά x1, y1, x2, y2.
• <polyline> — τεθλασμένη γραμμή με χαρακτηριστικό points (λίστα συντεταγμένων).
• <polygon> — κλειστό πολύγωνο με χαρακτηριστικό points.
• <path> — αυθαίρετο περίγραμμα με χαρακτηριστικό d (εντολές: M, L, C, Q, A, Z).
• <text> — στοιχείο κειμένου με χαρακτηριστικά x, y, font-size, font-family.

Το στοιχείο path — το πιο ισχυρό και ευέλικτο στοιχείο SVG. Το χαρακτηριστικό d περιέχει μια ακολουθία εντολών: M (moveTo), L (lineTo), C (cubic Bezier curve), Q (quadratic Bezier curve), A (arc), Z (close path). Κάθε εντολή έχει απόλυτη ή σχετική μορφή (κεφαλαίο ή πεζό γράμμα).

Το SVG υποστηρίζει επίσης την ομαδοποίηση στοιχείων μέσω <g>. Η ομάδα κληροδοτεί οπτικά χαρακτηριστικά (fill, stroke, transform) σε όλα τα θυγατρικά στοιχεία. Αυτό επιτρέπει την εφαρμογή ενιαίου στυλ σε ένα ολόκληρο σύνολο σχημάτων και τη διαχείριση της θέσης τους μέσω ενός transform.

SVG vs ραστεροποιημένα γραφικά: σύγκριση μορφών

Η κύρια διαφορά μεταξύ SVG και ραστεροποιημένων μορφών (JPEG, PNG, WebP) — ο τρόπος αποθήκευσης πληροφοριών. Η ραστεροποιημένη μορφή αποθηκεύει το χρώμα κάθε εικονοστοιχείου σε ένα πλέγμα σταθερού μεγέθους. Το SVG αποθηκεύει μαθηματικές εντολές για την αναπαραγωγή σχημάτων. Αυτή η διαφορά καθορίζει όλα τα πλεονεκτήματα και μειονεκτήματα των μορφών.

Σύμφωνα με το HTTP Archive, 2025, το 68% των ιστοτόπων χρησιμοποιεί SVG για εικονίδια, το 34% για εικονογραφήσεις και το 22% για λογότυπα. Το μέσο μέγεθος ενός εικονιδίου SVG είναι 0.5–2 KB, ενώ ένα ραστεροποιημένο εικονίδιο παρόμοιας ποιότητας είναι 5–20 KB σε μορφή PNG.

Για φωτογραφίες και σύνθετες ραστεροποιημένες εικόνες, το SVG δεν είναι κατάλληλο — το μέγεθος της περιγραφής XML θα υπερβεί το μέγεθος ενός ισοδύναμου JPEG. Συνιστώμενος τομέας εφαρμογής SVG: εικονίδια, λογότυπα, εικονογραφήσεις, σχήματα, γραφήματα, στοιχεία διεπαφής με προσαρμοστικό σχεδιασμό.

Πότε να επιλέξετε SVG και πότε ραστεροποιημένη μορφή

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

Υβριδική προσέγγιση — συνδυασμός SVG για στοιχεία διεπαφής και WebP/AVIF για φωτογραφικό περιεχόμενο — παρέχει την καλύτερη ισορροπία μεταξύ ποιότητας και απόδοσης φόρτωσης σελίδας.

Inline SVG και styling μέσω CSS

Inline SVG — είναι η ενσωμάτωση σήμανσης SVG απευθείας σε ένα έγγραφο HTML, όχι ως ξεχωριστό αρχείο μέσω <img> ή background-image. Το πλεονέκτημα του inline SVG είναι ότι τα στοιχεία SVG γίνονται μέρος του DOM και μπορούν να υποστούν styling μέσω CSS, να ελεγχθούν μέσω JavaScript και να δημιουργήσουν κινούμενα σχέδια χωρίς επιπλέον αιτήματα στον διακομιστή.

Σε αντίθεση με το <img src="icon.svg"> όπου το SVG είναι απομονωμένο στο shadow DOM, το inline SVG κληρονομεί τα χρώματα και τις γραμματοσειρές του γονικού εγγράφου. Αυτό επιτρέπει, για παράδειγμα, την αλλαγή χρώματος ενός εικονιδίου κατά την αιώρηση μέσω της ψευδοκλάσης CSS :hover χωρίς φόρτωση ξεχωριστού αρχείου για κάθε κατάσταση.

Σύμφωνα με το CSS-Tricks, το inline SVG είναι ο συνιστώμενος τρόπος χρήσης εικονιδίων σε σύγχρονες εφαρμογές ιστού. Οι ιδιότητες CSS fill, stroke, stroke-width εφαρμόζονται απευθείας στα στοιχεία SVG. Για προσαρμογή μέσω CSS, είναι σημαντικό στο αρχικό SVG τα fill και stroke να μην ορίζονται ως inline χαρακτηριστικά — διαφορετικά, το CSS δεν μπορεί να τα παρακάμψει.

• Πλεονεκτήματα: styling μέσω CSS, έλεγχος μέσω JS, χωρίς αιτήματα HTTP, προσαρμοστικότητα viewBox.
• Μειονεκτήματα: αύξηση μεγέθους σελίδας HTML, αδυναμία προσωρινής αποθήκευσης ξεχωριστά από το HTML.
• Εναλλακτική: SVG-sprites — συνδυασμός πολλών SVG σε ένα αρχείο και χρήση <use href="#id">.

Τα SVG-sprites λύνουν το πρόβλημα προσωρινής αποθήκευσης: όλα τα εικονίδια συλλέγονται σε ένα αρχείο, το πρόγραμμα περιήγησης το φορτώνει μία φορά, και μεμονωμένα εικονίδια συνδέονται μέσω <use> με αναφορά στο id του απαιτούμενου στοιχείου εντός του sprite.

Κινούμενα σχέδια SVG: CSS και SMIL

Κινούμενα σχέδια CSS SVG — ο πιο διαδεδομένος και αποδοτικός τρόπος δημιουργίας κινούμενων σχεδίων διανυσματικών γραφικών στο πρόγραμμα περιήγησης. Οι ιδιότητες CSS, όπως transform, opacity και fill, εφαρμόζονται σε στοιχεία SVG όπως ακριβώς και σε στοιχεία HTML. Για κινούμενα σχέδια κατά μήκος μιας αυθαίρετης διαδρομής χρησιμοποιείται η ιδιότητα CSS offset-path.

SMIL (Synchronized Multimedia Integration Language) — ένας ενσωματωμένος μηχανισμός κινούμενων σχεδίων στο SVG, ανεξάρτητος από CSS. Τα στοιχεία <animate>, <animateTransform> και <animateMotion> επιτρέπουν τη δημιουργία κινούμενων σχεδίων οποιωνδήποτε χαρακτηριστικών SVG χωρίς JavaScript και CSS. Τα κινούμενα σχέδια SMIL είναι εγγυημένα συγχρονισμένα με τον ρυθμό καρέ του προγράμματος περιήγησης.

Σύμφωνα με το MDN Web Docs, το SMIL υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης, αλλά τα κινούμενα σχέδια CSS θεωρούνται πιο προβλέψιμα και αποδοτικά. Το κύριο σενάριο για SMIL — κινούμενα σχέδια χαρακτηριστικών που δεν είναι προσβάσιμα μέσω CSS, για παράδειγμα d (path) του στοιχείου <path>.

JavaScript + requestAnimationFrame παρέχει μέγιστο έλεγχο στα κινούμενα σχέδια SVG. Οι προγραμματιστές ιστού χρησιμοποιούν τις βιβλιοθήκες GSAP και Anime.js για σύνθετες ακολουθίες κινούμενων σχεδίων με χρονοδιαγράμματα και συναρτήσεις easing που είναι δύσκολο να υλοποιηθούν με καθαρό CSS.

Παραδείγματα κώδικα: δημιουργία γραφικών SVG

Πρώτο παράδειγμα — ένα απλό εικονίδιο σπιτιού χρησιμοποιώντας βασικά στοιχεία SVG. Όλα τα σχήματα είναι rect και polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

Δεύτερο παράδειγμα — κινούμενα σχέδια περιστροφής φόρτωσης μέσω CSS. Χρησιμοποιείται <circle> με χαρακτηριστικό stroke-dasharray για δημιουργία διακεκομμένου περιγράμματος:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

Τρίτο παράδειγμα — κινούμενα σχέδια path μέσω της βιβλιοθήκης GSAP για ομαλή σχεδίαση περιγράμματος. Το GSAP λειτουργεί με το χαρακτηριστικό stroke-dashoffset, δημιουργώντας το εφέ εμφάνισης της γραμμής:

// Σχεδίαση διαδρομής με GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});