ΚΕΝΤΡΟ ΠΛΗ.ΝΕ.Τ. Ν. ΦΛΩΡΙΝΑΣ

Η Τεχνολογία SVG της HTML

SVG Tutorial

Τα αρχικά SVG σημαίνουν Scalable Vector Graphics. Δηλαδή η τεχνολογία SVG δημιουργεί διανυσματικά γραφικά (vector-based graphics) σε XML format.

Παράδειγμα σε Κώδικα SVG

<!DOCTYPE html>

<html>

<body>

<h1>Το Πρώτο μου SVG</h1>

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Ο παραπάνω κώδικας θα εμφανίσει μέσα σ’ ένα πλαίσιο διαστάσεων 100 Χ 100 έναν κύκλο με πράσινο περίγραμμα (stroke) και κίτρινη γέμιση (fill). Το κέντρο του κύκλου είναι στη θέση (50, 50) και η ακτίνα του είναι ίση με 40. Το περίγραμμα του κύκλου έχει πάχος 4.

Τι Είναι το SVG

Τα αρχικά SVG σημαίνουν Scalable Vector Graphics.
Το SVG χρησιμοποιείται για να δημιουργήσουμε διανυσματικά γραφικά για το Web.
Το SVG δημιουργεί (ορίζει) τα γραφικά σε XML format.
Τα γραφικά του SVG ΔΕΝ ΧΑΝΟΥΝ την ποιότητά τους αν τα κάνουμε ζουμ ή αν τους αλλάξουμε μέγεθος.
Το κάθε στοιχείο (element) και η κάθε ιδιότητα ή χαρακτηριστικό (attribute) στα αρχεία SVG μπορεί να αποκτήσει κίνηση (animation).
Το SVG είναι μια σύσταση (recommendation) του W3C.
Το SVG ενσωματώνεται με άλλα W3C standards, όπως είναι το DOM και το XSL.

Πλεονεκτήματα του SVG

Τα πλεονεκτήματα της χρήσης του SVG σε σχέση μ’άλλα formats εικόνας, όπως είναι τα JPEG και GIF, είναι :

Οι εικόνες SVG μπορούν να δημιυργηθούν και να επεξεργαστούν με οποιονδήποτε text editor.
Οι εικόνες SVG μπορούν να αναζητηθούν, γίνουν index ή/και script καθώς και να συμπιεστούν.
Οι εικόνες SVG μπορούν να αυξομειωθούν (scalable).
Οι εικόνες SVG μπορούν να εκτυπωθούν με υψηλή ποιότητα και σε οποιαδήποτε ανάλυση (resolution).
Οι εικόνες SVG μπορούν να ζουμαριστούν.
Το SVG αποτελεί ένα ανοικτό πρότυπο (open standard).
Τα αρχεία SVG είναι καθαρός κώδικας XML.

Ο κύριος ανταγωνιστή του SVG είναι το Flash. Το μεγαλύτερο πλεονέκτημα που έχει το SVG ως προς το Flash είναι η συμμόρφωση με άλλα πρότυπα (standards), όπως είναι το XSL και το DOM. Το Flash βασίζεται σε ιδιόκτητη τεχνολογία (proprietary technology) που δεν είναι ανοικτού κώδικα (open source).

Ενσωμάτωση SVG σε HTML Σελίδες

Ακολουθεί ένα παράδειγμα ενός απλού SVG γραφικού.

<!DOCTYPE html>

<html>

<body>

<h1>Το Πρώτο μου SVG</h1>

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επεξήγηση του Κώδικα

Μια εικόνα SVG ξεκινάει με το στοιχείο <svg>.
Τα χαρακτηριστικά (attributes) width (πλάτος) και height (ύψος) του στοιχείου <svg> ορίζουν το πλάτος και μια εικόνας SVG.
Το στοιχείο <circle> χρησιμοποιείται για να σχεδιαστεί ένας κύκλος.
Τα χαρακτηριστικά cx και cy ορίζουν τις x και y συντεταγμένες του κέντρου του κύκλου και αν παραλειφθούν, το κέντρο του κύκλου είναι στη θέση (0, 0).
Το χαρακτηριστικό r ορίζει την ακτίνα (radius) του κύκλου.
Τα χαρακτηριστικά stroke και stroke-width καθορίζουν την εμφάνιση του περιγράμματος (outline) ενός σχήματος. Εδώ ορίζουμε το περίγραμμα ενός κύκλου στα 4 px και με χρώμα πράσινο (green).
Το χαρακτηριστικό fill αναφέρεται στο χρώμα μέσα στον κύκλο (γέμιση). Εδώ ορίζουμε το χρώμα γεμίσματος σε κίτρινο (yellow).
Το tag κλεισίματος </svg> κλείνει την εικόνα SVG.

Το SVG <rect>

Το SVG διαθέτει μερικά προκαθορισμένα στοιχεία σχημάτων που μπορούν να χρησιμοποιηθούν από τους προγραμματιστές (developers) :

· Rectangle <rect>, Ορθογώνιο

· Circle <circle>, Κύκλος

· Ellipse <ellipse>, Έλλειψη

· Line <line>, Γραμμή

· Polyline <polyline>, Πολλαπλή γραμμή

· Polygon <polygon>, Πολύγωνο

· Path <path>, Διαδρομή

Παράδειγμα 1

Το στοιχείο <rect> χρησιμοποιείται για να δημιουργήσουμε ένα ορθογώνιο (rectangle) με τις παραλλαγές του :

<!DOCTYPE html>

<html>

<body>

<svg width="400" height="110">

<rect width="300" height="100" style = "fill:rgb(0, 0, 255); stroke-width:3; stroke:rgb(0, 0, 0)">

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επεξήγηση του Κώδικα

Τα χαρακτηριστικά width και height του στοιχείου <rect> ορίζουν το πλάτος και το ύψος του ορθογωνίου.
Το χαρακτηριστικό style ορίζει τις ιδιότητες CSS για το ορθογώνιο.
Η ιδιότητα CSS fill ορίζει το χρώμα γεμίσματος του ορθογωνίου (εδώ είναι πλε 0, 0, 255).
Η ιδιότητα CSS stroke-width ορίζει το πλάτος του περιθωρίου (border) του ορθογωνίου (εδώ είναι το 3).
Η ιδιότητα CSS stroke ορίζει το χρώμα του περιθωρίου (border) του ορθογωνίου (εδώ είναι το μαύρο = 0, 0, 0).

Παράδειγμα 2

<!DOCTYPE html>

<html>

<body>

<svg width="400" height="180">

<rect x="50" y="20" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9">

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επεξήγηση του Κώδικα

Το χαρακτηριστικό (attribute) x ορίζει την αριστερή θέση του ορθογωνίου, π.χ. η τιμή x = "50" τοποθετεί το ορθογώνιο 50 px από το αριστερό περιθώριο.
Το χαρακτηριστικό (attribute) y ορίζει την πάνω θέση του ορθογωνίου, π.χ. η τιμή y = "20" τοποθετεί το ορθογώνιο 20 px από το πάνω περιθώριο.
Η ιδιότητα (property) CSS fill-opacity ορίζει την αδιαφάνεια (opacity) του χρώματος γεμίσματος (fill color), με τιμές από 0 έως 1.
Η ιδιότητα (property) CSS stroke-opacity ορίζει την αδιαφάνεια του χρώματος του περιγράμματος (stroke color), με τιμές από 0 έως 1.

Παράδειγμα 3

Ορισμός της αδιαφάνειας (opacity) για ολόκληρο το στοιχείο :

<!DOCTYPE html>

<html>

<body>

<svg width="400" height="180">

<rect x="50" y="20" width="150" height="150" style = "fill:blue; stroke:pink; stroke-width:5; opacity:0.5">

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επεξήγηση του Κώδικα

Η ιδιότητα CSS opacity ορίζει την τιμή της αδιαφάνειας (opacity) για ολόκληρο το στοιχείο, με τιμές από 0 έως 1.

Παράδειγμα 4

Δημιουργία ενός ορθογωνίου με στρογγυλεμένες γωνίες :

<!DOCTYPE html>

<html>

<body>

<svg width="400" height="180">

<rect x="50" y="20" rx="20" ry="20" width="150" height = "150" style="fill:red; stroke:black; stroke-width:5; opacity:0.5">

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επεξήγηση του Κώδικα

Τα χαρακτηριστικά rx και ry στρογγυλεύουν τις γωνίες του ορθογωνίου.

Το SVG <circle>

Το στοιχείο <circle> δημιουργεί έναν κύκλο :

<!DOCTYPE html>

<html>

<body>

<svg height="100" width="100">

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

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επεξήγηση του Κώδικα

Ο παραπάνω κώδικας δημιουργεί μέσα σ’ ένα πλαίσιο 100 Χ 100 έναν κύκλο με κέντρο το σημείο (50, 50), ακτίνα 40, χρώμα περιγράμματος μαύρο, πάχος περιγράμματος 3 και χρώμα γεμίσματος κόκκινο.
Τα χαρακτηριστικά cx και cy ορίζουν τις x και y συντεταγμένες του κέντρου του κύκλου και αν παραλειφθούν, το κέντρο του κύκλου ορίζεται να είναι το σημείο (0, 0).
Το χαρακτηριστικό r ορίζει την ακτίνα (radius) του κύκλου.

Το SVG <ellipse>

Το στοιχείο <ellipse> δημιουργεί μια έλλειψη. Η έλλειψη συσχετίζεται μ’ έναν κύκλο και η διαφορά είναι ότι μια έλλειψη έχει δύο ακτίνες x και y που είναι διαφορετικές μεταξύ τους :

Παράδειγμα 1

<!DOCTYPE html>

<html>

<body>

<svg height="140" width="500">

<ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow; stroke:purple; stroke-width:2" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επεξήγηση του Κώδικα

Ο παραπάνω κώδικας δημιουργεί μέσα σ’ ένα πλαίσιο 150 Χ 140 μια έλλειψη με κέντρο της έλλειψης το σημείο (200, 80), ακτίνες 100 και 50, χρώμα περιγράμματος πορφυρό, πάχος περιγράμματος 2 και χρώμα γεμίσματος κίτρινο.
Το χαρακτηριστικό cx ορίζει την x συντεταγμένη του κέντρου της έλλειψης.
Το χαρακτηριστικό cy ορίζει την y συντεταγμένη του κέντρου της έλλειψης.
Το χαρακτηριστικό rx ορίζει την οριζόντια ακτίνα.
Το χαρακτηριστικό ry ορίζει την κάθετη ακτίνα

Παράδειγμα 2

Το παρακάτω παράδειγμα δημιουργεί τρεις ελλείψεις, την μια πάνω στην άλλη :

<!DOCTYPE html>

<html>

<body>

<svg height="150" width="500">

<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />

<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />

<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Παράδειγμα 3

Το παρακάτω παράδειγμα συνδυάζει δύο ελλείψεις, μία κίτρινη και μία άσπρη.

<!DOCTYPE html>

<html>

<body>

<svg height="100" width="500">

<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />

<ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Το SVG <line>

Το στοιχείο <line> δημιουργεί μια γραμμή :

<!DOCTYPE html>

<html>

<body>

<svg height="210" width="500">

<line x1="0" y1="0" x2="200" y2="200" style = "stroke:rgb(255,0,0); stroke-width:2" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επεξήγηση του Κώδικα

Ο παραπάνω κώδικας δημιουργεί μέσα σ’ ένα πλαίσιο 500 Χ 210 μια γραμμή με χρώμα κόκκινο και πάχος 2, που ξεκινάει από το σημείο (0, 0) και καταλήγει στο σημείο (200, 200).
Το χαρακτηριστικό x1 ορίζει την αρχή της γραμμής στον άξονα x.
Το χαρακτηριστικό y1 ορίζει την αρχή της γραμμής στον άξονα y.
Το χαρακτηριστικό x2 ορίζει το τέλος της γραμμής στον άξονα x.
Το χαρακτηριστικό y2 ορίζει το τέλος της γραμμής στον άξονα y.

Το SVG <polygon>

Το στοιχείο <polygon> δημιουργεί ένα γραφικό που περιέχει τουλάχιστον τρεις πλευρές (πολύγωνο). Τα πολύγωνα αποτελούνται από ευθείες γραμμές και το όλο σχήμα είναι κλειστό, δηλ. όλες οι γραμμές συνδέονται μεταξύ τους.

Παράδειγμα 1

Το παρακάτω παράδειγμα δημιουργεί ένα πολύγωνο με τρεις πλευρές (τρίγωνο).

<!DOCTYPE html>

<html>

<body>

<svg height="210" width="500">

<polygon points="200,10 250,190 160,210" style="fill:lime; stroke:purple; stroke-width:1" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επεξήγηση του Κώδικα

Ο παραπάνω κώδικας δημιουργεί μέσα σ’ ένα πλαίσιο 500 Χ 210 ένα τρίγωνο με κορυφές τα σημεία (200, 10), (250, 190) και (160, 210), χρώμα γεμίσματος lime (έντονο πράσινο σαν λεμόνι), χρώμα περιγράμματος πορφυρό και πάχος περιγράμματος 1.

Παράδειγμα 2

Το παρακάτω παράδειγμα δημιουργεί ένα πολύγωνο με τέσσερις πλευρές (τετράπλευρο).

<!DOCTYPE html>

<html>

<body>

<svg height="250" width="500">

<polygon points="220,10 300,210 170,250 123,234" style="fill:lime; stroke:purple; stroke-width:1" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Παράδειγμα 3

Με το στοιχείο <polygon> μπορούμε να δημιουργήσουμε ένα αστέρι (star) :

<!DOCTYPE html>

<html>

<body>

<svg height="210" width="500">

<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime; stroke:purple; stroke-width:5; fill-rule:nonzero;"/>

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Ο παραπάνω κώδικας δημιουργεί ένα αστέρι με 5 γωνίες και γέμισμα με χρώμα lime, όπου το κέντρο του αστεριού είναι κι αυτό γεμάτο με χρώμα lime (fill-rule:nonzero).

Παράδειγμα 4

Δημιουργούμε ξανά ένα αστέρι με πέντε γωνίες, αλλά αλλάζουμε την ιδιότητα fill-rule στην τιμή "evenodd" :

<!DOCTYPE html>

<html>

<body>

<svg height="210" width="500">

<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5; fill-rule:evenodd;"/>

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Ο παραπάνω κώδικας δημιουργεί ένα αστέρι με πέντε γωνίες και γέμισμα με χρώμα lime, όπου το κέντρο του αστεριού δεν έχει γέμιση lime αλλά είναι άσπρο (fill-rule:evenodd).

Το SVG <polyline>

Το στοιχείο <polyline> δημιουργεί ένα σχήμα που αποτελείται μόνο από ευθείες γραμμές (straight lines) :

Παράδειγμα 1

<!DOCTYPE html>

<html>

<body>

<svg height="200" width="500">

<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none; stroke:black; stroke-width:3" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Το παραπάνω παράδειγμα δημιουργεί μια μαύρη τεθλασμένη γραμμή με πάχος 3.

Παράδειγμα 2

Ακόμα ένα παράδειγμα με μόνο ευθείες γραμμές :

<!DOCTYPE html>

<html>

<body>

<svg height="180" width="500">

<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white; stroke:red; stroke-width:4" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Το παραπάνω παράδειγμα δημιουργεί μια κόκκινη τεθλασμένη γραμμή με πάχος 4 και με σχήμα ζιγκ-ζαγκ.

Το SVG <path>

Το στοιχείο <path> δημιουργεί μια διαδρομή (path) και διαθέτει τις παρακάτω εντολές :

M = move to
L = line to
H = horizontal line to
V = vertical line to
C = curve to
S = smooth curve to
Q = quadratic Bézier curve
T = smooth quadratic Bézier curve to
A = elliptical Arc
Z = close path

Όλες οι παραπάνω εντολές μπορούν να γραφούν και με μικρά γράμματα, ενώ τα κεφαλαία γράμματα σημαίνουν απόλυτη τοποθέτηση και τα μικρά γράμματα σημαίνουν σχετική τοποθέτηση.

Παράδειγμα 1

Το παρακάτω παράδειγμα ορίζει μια διαδρομή (path) που ξεκινάει από τη θέση (150, 0) με μια γραμμή μέχρι τη θέση (75, 200) και μετά από εκεί με μια γραμμή μέχρι τη θέση (225, 200) και τελικά κλείνει τη διαδρομή (path) πίσω στη θέση (150, 0). Στην ουσία δημιουργεί ένα μαύρο τρίγωνο.

<!DOCTYPE html>

<html>

<body>

<svg height="210" width="400">

<path d="M150 0 L75 200 L225 200 Z" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Παράδειγμα 2

Οι καμπύλες Bézier χρησιμοποιούνται για να μοντελοποιήσουμε ομαλές καμπύλες (smooth curves) που μπορούν να κλιμακωθούν (scaled) αόριστα. Σε γενικές γραμμές, ο χρήστης επιλέγει δύο τελικά σημεία (endpoints) και ένα ή δύο σημεία ελέγχου (control points). Μια καμπύλη Bézier με ένα σημείο ελέγχου αποκαλείται τετραγωνική (quadratic) καμπύλη Bézier και εκείνη με δύο σημεία ελέγχου αποκαλέιται κυβική (cubic).

Το παρακάτω παράδειγμα δημιουργεί μια τετραγωνική καμπύλη Bézier, όπου τα σημεία A και C είναι το αρχικό και το τελικό σημείο και το B είναι το σημείο ελέγχου :

<!DOCTYPE html>

<html>

<body>

<svg height="400" width="450">

<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />

<path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />

<path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />

<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />

<g stroke="black" stroke-width="3" fill="black">

<circle id="pointA" cx="100" cy="350" r="3" />

<circle id="pointB" cx="250" cy="50" r="3" />

<circle id="pointC" cx="400" cy="350" r="3" />

</g>

<g font-size="30" font-family="sans-serif" fill="black" stroke="none" text-anchor="middle">

<text x="100" y="350" dx="-30">A</text>

<text x="250" y="50" dy="-10">B</text>

<text x="400" y="350" dx="30">C</text>

</g>

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Το παραπάνω παράδειγμα δημιουργεί τρία σημεία A, B και C, όπου το A είναι στα αριστερά, το Β στο κέντρο και πάνω και το C στα δεξιά. Τα σημεία A και B καθώς και τα σημεία B και C ενώνονται με μια κόκκινη γραμμή, τα σημεία A και C ενώνονται με μια μπλε καμπύλη με το κοίλο της προς τα πάνω και υπάρχει και μια πράσινη γραμμή που ενώνει τα κέντρα των γραμμών AB και BC.

Το SVG <text>

Το στοιχείο <text> δημιουργεί κείμενο (text).

Παράδειγμα 1

Γράψτε ένα κείμενο :

<!DOCTYPE html>

<html>

<body>

<svg height="30" width="200">

<text x="0" y="15" fill="red">I love SVG!</text>

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Παράδειγμα 2

Περιστροφή του κειμένου :

<!DOCTYPE html>

<html>

<body>

<svg height="60" width="200">

<text x="0" y="15" fill="red" transform="rotate(30 20, 40)">I love SVG</text>

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Παράδειγμα 3

Το στοιχείο <text> μπορεί να διαταχθεί σε πολλά sub-groups (υπο-ομάδες) με τη βοήθεια του στοιχείου <tspan>, όπου το κάθε στοιχείο <tspan> μπορεί να περιέχει διαφορετική μορφοποίηση (formatting) και θέση (position).

Εμφάνιση κειμένου σε πολλές γραμμές με το στοιχείο <tspan> :

<!DOCTYPE html>

<html>

<body>

<svg height="90" width="200">

<text x="10" y="20" style="fill:red;">Several lines :

<tspan x="10" y="45">First line.</tspan>

<tspan x="10" y="70">Second line.</tspan>

</text>

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Παράδειγμα 4

Κείμενο ως σύνδεσμος (link) με τη βοήθεια του στοιχείου <a> :

<!DOCTYPE html>

<html>

<body>

<svg height="30" width="200"

xmlns:xlink="http://www.w3.org/1999/xlink">

<a xlink:href=http://www.w3schools.com/svg/ target="_blank">

<text x="0" y="15" fill="red">I love SVG!</text>

</a>

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Οι Ιδιότητες SVG Stroke

Η τεχνολογία SVG προσφέρει προσφέρει μια ευρεία σειρά από ιδιότητες περιγράμματος (stroke properties). Θα δούμε τις παρακάτω ιδιότητες :

stroke
stroke-width
stroke-linecap
stroke-dasharray

Όλες οι ιδιότητες stroke μπορούν να εφαρμοσθούν σ’ όλα τα είδη γραμμών (lines), κειμένου (text) καθώς σε περιγράμματα (outlines) στοιχείων όπως είναι ο κύκλος.

Η Ιδιότητα SVG Stroke

Η ιδιότητα stroke ορίζει το χρώμα μιας γραμμής, ενός κειμένου ή του περιγράμματος ενός στοιχείου :

<!DOCTYPE html>

<html>

<body>

<svg height="80" width="300">

<g fill="none">

<path stroke="red" d="M5 20 l215 0" />

<path stroke="black" d="M5 40 l215 0" />

<path stroke="blue" d="M5 60 l215 0" />

</g>

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Ο παραπάνω κώδικας εμφανίζει τρεις οριζόντιες γραμμές, μια κόκκινη, μια μαύρη και μια μπλε.

Η Ιδιότητα SVG Stroke-Width

Η ιδιότητα stroke-width ορίζει το πάχος μιας γραμμής, ενός κειμένου ή του περιγράμματος ενός στοιχείου :

<!DOCTYPE html>

<html>

<body>

<svg height="80" width="300">

<g fill="none" stroke="black">

<path stroke-width="2" d="M5 20 l215 0" />

<path stroke-width="4" d="M5 40 l215 0" />

<path stroke-width="6" d="M5 60 l215 0" />

</g>

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Ο παραπάνω κώδικας εμφανίζει τρεις μαύρες γραμμές με διαφορετικά πάχη.

Η Ιδιότητα SVG stroke-linecap

Η ιδιότητα stroke-linecap ορίζει διαφορετικά είδη καταλήξεων ή άκρων (endings) σε μια ανοικτή διαδρομή (open path) :

<!DOCTYPE html>

<html>

<body>

<svg height="80" width="300">

<g fill="none" stroke="black" stroke-width="6">

<path stroke-linecap="butt" d="M5 20 l215 0" />

<path stroke-linecap="round" d="M5 40 l215 0" />

<path stroke-linecap="square" d="M5 60 l215 0" />

</g>

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Ο παραπάνω κώδικας εμφανίζει τρεις μαύρες γραμμές με ίδιο μήκος και ίδιο πάχος αλλά με διαφορετικά άκρα.

Η Ιδιότητα SVG stroke-dasharray

Η ιδιότητα stroke-dasharray χρησιμοποιείται για να δημιουργήσει διακεκομμένες γραμμές (dashed lines) :

<!DOCTYPE html>

<html>

<body>

<svg height="80" width="300">

<g fill="none" stroke="black" stroke-width="4">

<path stroke-dasharray="5,5" d="M5 20 l215 0" />

<path stroke-dasharray="10,10" d="M5 40 l215 0" />

<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />

</g>

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Ο παραπάνω κώδικας εμφανίζει τρεις διακεκομμένες μαύρες γραμμές με ίδιο μήκος και ίδιο πάχος, όπου η πρώτη αποτελείται μόνο από τελείες, η δεύτερη μόνο από παύλες και η τρίτη από μία παύλα και δύο τελείες εναλλάξ.

Τα Φίλτρα SVG

Τα φίλτρα SVG προσθέτουν ειδικά εφέ (special effects) στα γραφικά της SVG. Τα διαθέσιμα φίλτρα στην SVG είναι τα εξής :

<feBlend> - για συνδυασμό εικόνων
<feColorMatrix> - για μετασχηματισμό χρωμάτων
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feFlood>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset> - για σκιές (drop shadows)
<feSpecularLighting>
<feTile>
<feTurbulence>
<feDistantLight> - για φωτισμό
<fePointLight> - για φωτισμό
<feSpotLight> - για φωτισμό

Θα πρέπει να έχουμε υπόψη μας ότι μπορούμε να χρησιμοποιήσουμε πολλαπλά φίλτρα σε κάθε σε κάθε στοιχείο της SVG.

Τα SVG Blur Effects

Όλα τα φίλτρα της SVG ορίζονται μέσα σ’ ένα στοιχείο <defs>, τα αρχικά του οποίου σημαίνουν definitions. Το στοιχείο <filter> ορίζει ένα φίλτρο της SVG και χρειάζεται το χαρακτηριστικό (attribute) id το οποίο αναγνωρίζει μοναδικά (identifies) το φίλτρο, ώστε να μπορεί να χρησιμοποιηθεί από το αντίστοιχο γραφικό.

Το SVG <feGaussianBlur>

Το στοιχείο <feGaussianBlur> δημιουργεί εφέ κηλίδας (blur effects) :

<!DOCTYPE html>

<html>

<body>

<svg height="110" width="110">

<defs>

<filter id="f1" x="0" y="0">

<feGaussianBlur in="SourceGraphic" stdDeviation="15" />

</filter>

</defs>

<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επεξήγηση του Κώδικα

Το χαρακτηριστικό id του στοιχείου <filter> ορίζει ένα μοναδικό όνομα για το φίλτρο.
Το εφέ blur ορίζεται με το στοιχείο <feGaussianBlur>.
Ο κώδικας in="SourceGraphic" ορίζει ότι το εφέ δημιουργείται για ολόκληρο το στοιχείο.
Το χαρακτηριστικό stdDeviation ορίζει την ποσότητα του εφέ blur.
Το χαρακτηριστικό filter του στοιχείου <rect> συσχετίζει (συνδέει) το στοιχείο με το φίλτρο "f1".

Τα SVG Drop Shadows - Το <feOffset>

Το στοιχείο <feOffset> δημιουργεί εφέ σκιάς (drop shadow effects). Η ιδέα είναι να πάρουμε ένα γραφικό SVG (εικόνα ή στοιχείο) και να το μετακινήσουμε λίγο στο επίπεδο xy. Το πρώτο στοιχείο μετακινεί (offsets) ένα ορθογώνιο με το <feOffset> και μετά μετακινεί το αρχικό στην κορυφή με τη βοήθεια του <feBlend> :

Παράδειγμα 1

<!DOCTYPE html>

<html>

<body>

<svg height="120" width="120">

<defs>

<filter id="f1" x="0" y="0" width="200%" height="200%">

<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />

<feBlend in="SourceGraphic" in2="offOut" mode="normal" />

</filter>

</defs>

<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επεξήγηση του Κώδικα

Το χαρακτηριστικό id του στοιχείου <filter> ορίζει ένα μοναδικό όνομα για το φίλτρο.
Το χαρακτηριστικό filter του στοιχείου <rect> συνδέει το στοιχείο με το φίλτρο "f1".

Παράδειγμα 2

Τώρα, η εικόνα offset μπορεί να μουντζουρωθεί (blurred) με το εφέ <feGaussianBlur> :

<!DOCTYPE html>

<html>

<body>

<svg height="140" width="140">

<defs>

<filter id="f1" x="0" y="0" width="200%" height="200%">

<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />

<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />

<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />

</filter>

</defs>

<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επεξήγηση του Κώδικα

Το χαρακτηριστικό stdDeviation του στοιχείου <feGaussianBlur> ορίζει την ποσότητα του μουντζουρώματος (blur).

Παράδειγμα 3

Τώρα θα κάνουμε τη σκιά μαύρη :

<!DOCTYPE html>

<html>

<body>

<svg height="140" width="140">

<defs>

<filter id="f1" x="0" y="0" width="200%" height="200%">

<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />

<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />

<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />

</filter>

</defs>

<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επεξήγηση του Κώδικα

The in attribute of the <feOffset> element is changed to "SourceAlpha" which uses the Alpha channel for the blur instead of the entire RGBA pixel

Παράδειγμα 4

Τώρα αντιμετωπίζουμε τη σκιά ως χρώμα :

<!DOCTYPE html>

<html>

<body>

<svg height="140" width="140">

<defs>

<filter id="f1" x="0" y="0" width="200%" height="200%">

<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />

<feColorMatrix result = "matrixOut" in = "offOut" type = "matrix" values = "0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>

<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />

<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />

</filter>

</defs>

<rect width="90" height="90" stroke="green"

stroke-width="3" fill="yellow" filter="url(#f1)" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επεξήγηση του Κώδικα

Το φίλτρο <feColorMatrix> μετασχηματίζει τα χρώματα στην εικόνα offset που είναι κοντύτερα στο μαύρο. Οι τρεις τιμές '0.2' πολλαπλασιάζονται με τα κανάλια red, green και blue. Η ελάττωση των τιμών τους φέρνει τα χρώματα πιο κοντά στο μαύρο (τιμή μαύρου = 0).

Τα SVG Gradients - Linear

Ένα βαθμωτό (gradient) είναι μια ομαλή μετάβαση από ένα χρώμα σ’ ένα άλλο χρώμα. Επιπλέον, πολλές αρκετές μεταβάσεις χρωμάτων μπορού να εφαρμοσθούν στο ίδιο στοιχείο. Υπάρχουν δύο βασικά είδη gradients στο SVG :

Γραμμικό (Linear)
Ακτινωτό (Radial)

Το SVG <linearGradient>

Το στοιχείο <linearGradient> ορίζει ένα γραμμικό (linear) gradient και πρέπει να εμπεριέχεται μέσα σ’ ένα tag <defs>. Τα γραμμικά (linear gradients) μπορούν να ορισθούν ώστε να είναι οριζόντια (horizontal), κατακόρυφα (vertical) ή γωνιακά (angular) :

Τα οριζόντια (horizontal) gradients δημιουργούνται όταν τα y1 και y2 είναι ίσα και τα x1 και x2 διαφέρουν.
Τα κατακόρυφα (vertical) gradients δημιουργούνται όταν τα x1 και x2 είναι ίσα και τα y1 και y2 διαφέρουν.
Τα γωνιακά (angular) gradients δημιουργούνται όταν τα x1 και x2 αλλά και τα y1 και y2 διαφέρουν.

Παράδειγμα 1

Δημιουργία μιας έλλειψης (ellipse) μ’ ένα οριζόντιο γραμμικό gradient από κίτρινο χρώμα σε κόκκινο χρώμα :

<!DOCTYPE html>

<html>

<body>

<svg height="150" width="400">

<defs>

<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">

<stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1" />

<stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1" />

</linearGradient>

</defs>

<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επεξήγηση του Κώδικα

Το χαρακτηριστικό id του tag <linearGradient> ορίζει ένα μοναδικό όνομα για το βαθμωτό (gradient).
Τα χαρακτηριστικά x1, x2, y1, y2 του tag <linearGradient> ορόζουν το αρχικό και τελικό σημείο (θέση) του gradient.
Η περιοχή χρωμάτων ενός gradient μπορεί να αποτελείται από δύο ή περισσότερα χρώματα, όπου το κάθε χρώμα καθορίζεται με το tag <stop>. Το χαρακτηριστικό offset ορίζει πού (σε ποια σημεία) αρχίζει και τελειώνει το χρώμα του gradient.
Το χαρακτηριστικό fill συνδέει το στοιχείο της έλλειψης με το gradient.

Παράδειγμα 2

Δημιουργία μιας έλλειψης (ellipse) μ’ ένα κατακόρυφο γραμμικό gradient από κίτρινο χρώμα σε κόκκινο χρώμα :

<!DOCTYPE html>

<html>

<body>

<svg height="150" width="400">

<defs>

<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">

<stop offset="0%" style="stop-color:rgb(255,0,0); stop-opacity:1" />

<stop offset="100%" style="stop-color:rgb(255,255,0); stop-opacity:1" />

</linearGradient>

</defs>

<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Παράδειγμα 3

Δημιουργία μιας έλλειψης μ’ ένα οριζόντιο γραμμικό gradient από κίτρινο χρώμα σε κόκκινο χρώμα και προσθήκη κειμένου μέσα στην έλλειψη :

<!DOCTYPE html>

<html>

<body>

<svg height="150" width="400">

<defs>

<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">

<stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1" />

<stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1" />

</linearGradient>

</defs>

<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επεξήγηση του Κώδικα

Το στοιχείο <text> δημιουργεί ένα κείμενο (text).

Το SVG <radialGradient>

Το στοιχείο <radialGradient> δημιουργεί ένα ακτινωτό (radial) gradient και πρέπει να εμπεριέχεται μέσα σ’ ένα tag <defs>.

Παράδειγμα 1

Δημιουργία μιας έλλειψης μ’ ένα ακτινωτό (radial) gradient από άσπρο σε μπλε χρώμα :

<!DOCTYPE html>

<html>

<body>

<svg height="150" width="500">

<defs>

<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">

<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />

<stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1" />

</radialGradient>

</defs>

<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επεξήγηση του Κώδικα

Το χαρακτηριστικό id του tag <radialGradient> ορίζει ένα μοναδικό όνομα για το βαθμωτό (gradient).
Τα χαρακτηριστικά cx, cy και r ορίζουν τον εξωτερικό κύκλο και τα χαρακτηριστικά fx και fy ορίζουν τον εσωτερικό κύκλο.
Η περιοχή χρωμάτων ενός gradient μπορεί να αποτελείται από δύο ή περισσότερα χρώματα, όπου το κάθε χρώμα καθορίζεται με το tag <stop>. Το χαρακτηριστικό offset ορίζει το πού (σε ποια σημεία) αρχίζει και τελειώνει το χρώμα του gradient.
Το χαρακτηριστικό fill συνδέει το στοιχείο της έλλειψης με το gradient.

Παράδειγμα 2

Δημιουργία μιας άλλης έλλειψης μ’ ένα ακτινωτό (radial) από άσπρο σε μπλε χρώμα :

<!DOCTYPE html>

<html>

<body>

<svg height="150" width="500">

<defs>

<radialGradient id="grad1" cx="20%" cy="30%" r="30% fx="50%" fy="50%">

<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />

<stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1" />

</radialGradient>

</defs>

<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Επιστροφή