Ακαδημαϊκό έτος Εργαστήριο Προγραμματισμού και Επεξεργασίας Πληροφοριών Εισαγωγή στην γλώσσα SVG Αλεξ Καράκος

DalaB 2 SVG  Η γλώσσα SVG (Scalable Vector Graphics) αποτελεί μια εφαρμογή της XML η οποία επιτρέπει να περιγράψουμε διανυσματικά γραφικά με πολλές δυνατότητες, όπως:  Ταυτόχρονη εμφάνιση κειμένου και εικόνων  Χρήση όλων των αποχρώσεων των χρωμάτων, διάφορα φίλτρα κτλ.  Δημιουργία σελίδων ενδοεπικοινωνίας και επιδείξεων (animation)

DalaB 3 Διανυσματικά γραφικά  Τα διανυσματικά γραφικά (Vector graphics) είναι ανεξάρτητα από την ανάλυση και εξελικτικά (scalable) δηλαδή, επιτρέπουν μεγέθυνση ή σμίκρυνση (zoom in, zoom out) δίχως απώλεια της ευκρίνειας και της ποιότητας της εικόνας  Συνήθεις τιμές ανάλυσης: Έγχρωμη οθόνη, 72 dpi (dot per inch) Εκτυπωτής, 1200 dpi  Τα διανυσματικά γραφικά καταλαμβάνουν μικρότερο χώρο στο δίσκο σε σχέση με τις ψηφιδωτές εικόνες υψηλής ανάλυσης (raster ή pixel)

DalaB 4 Vector Graphics vs. Raster Graphics  Παραδείγματα Raster/Pixel/Bitmapped Graphic Formats: ΒΜΡ, GIF, JPEG, PNG κτλ  Παραδείγματα Vector/Line Graphic Formats: SVG, SWF (Flash), EPS (Encapsulated Postscript), CGM (Computer Graphics Metafile), Visio κτλ

DalaB 5 Raster/Pixel/Bitmapped

DalaB 6 Vector Graphics vs. Raster Graphics

DalaB 7 Πλεονεκτήματα μιας διανυσματικής εικόνας:  Μια διανυσματική εικόνα ορίζεται από μια μαθηματική συνάρτηση  Έχει μεγάλη ικανότητα συμπίεσης  Το μέγεθος και η μορφή της μπορούν εύκολα να προσαρμοστούν  Τα γραφικά στοιχεία είναι αντικείμενα με ιεραρχική δομή

DalaB 8 Flash vs. SVG  Macromedia Flash vs. SVG ΙδιότηταSWFSVG XML – W3C ΌχιΝαι Metadata Ναι, ιδιόκτηταΝαι, συμβατά με RDF Format ΔυαδικόΚείμενο Μέγεθος < SVG>SWF Plugin Ναι (200K)Ναι (2,3MB) Πηγαίο ΌχιΝαι  Για περισσότερες συγκρίσεις, δείτε τη σελίδα:

DalaB 9 Εξέλιξη της SVG  Το 1998 δημιουργείται μια ομάδα εργασίας από το W3C (με τη συμμετοχή των Microsoft, Autodesk, Adobe, IBM, Sun, Netscape, Xerox, Apple, Corel, HP, …)  Η έκδοση SVG 1.0 ανακοινώθηκε το Σεπτέμβριο του 2001  Η έκδοση SVG 1.1 ανακοινώθηκε τον Ιανουάριο του 2003  Η έκδοση SVG 1.2 ανακοινώθηκε τον Απρίλιο του 2005  Η έκδοση SVG 2.0 είναι υπό προετοιμασία –(  H SVG στο Firefox –(

DalaB 10 Υποδειγματικές σελίδες   05.htm 05.htm  e_Visio_2003/ e_Visio_2003/   nter_2001.pdf nter_2001.pdf 

DalaB 11 Δομή ενός εγγράφου SVG  Ένα αρχείο SVG έχει τη γενική μορφή: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " Μια ελεύθερη περιγραφή (μη υποχρεωτική)... ορισμούς... Το γραφικό περιεχόμενο Σημείωση. Για τη χρήση του κατάλληλου DTD δείτε τη σελίδα:

DalaB 12 Βασικά γραφικά αντικείμενα  Η SVG υποστηρίζεται από τα ακόλουθα γραφικά αντικείμενα: –Ένα σύνολο από στοιχειώδεις φόρμες, όπως: γραμμές ορθογώνια κύκλους ελλείψεις πολύγονα Πολυγωνικές γραμμές –Διάφορες φόρμες οι οποίες ορίζουν ένα νέο σχήμα –Κείμενο  Τοποθέτηση των αντικειμένων –Τα αντικείμενα της SVG τοποθετούνται σ’ ένα σύστημα συντεταγμένων το οποίο έχει σαν αρχή το άνω αριστερό σημείο της οθόνης –Μπορούμε να εργαστούμε και σ’ ένα σύστημα τοπικών συντεταγμένων

DalaB 13 Γραμμές  Μια γραμμή εμφανίζεται με την ετικέτα –  Η ετικέτα συνοδεύεται από τις ιδιότητες: –stroke="color" για τον ορισμό του χρώματος, όπου το color έχει τη μορφή Ενός ονόματος: black, red, blue,... Μιας τιμής: #rrggbb ή rgb(r%,g%,b%) –stroke-width="val" για τον ορισμό του πάχους της γραμμής –stroke-dasharray="lst" για τον ορισμό της μορφής, το lst έχει τη μορφή "s1 b1 s2 b2 … " –stroke-opacity="val" για τον ορισμό της εμφάνισης, με τιμή "val" μεταξύ 0 και 1

DalaB 14 Παραδείγματα γραμμών

DalaB 15 Ορθογώνια  Ένα ορθογώνιο εμφανίζεται με την ετικέτα –  Η ετικέτα συνοδεύεται από τις ιδιότητες: –fill="color" για τον ορισμό του χρώματος του περιεχομένου –fill-opacity="val" για τον ορισμό της εμφάνισης, με τιμή "val" μεταξύ 0 και 1 –rx="val" και ry="val" για τον ορισμό στρογγυλοποιημένων γωνιών –stroke… για τον ορισμό του χρώματος της γραμμής του σχήματος

DalaB 16 Παραδείγματα <rect x="10" y="110"... fill="none" stroke="blue" stroke-width="2"/> <rect x="10" y="160"... fill="#9999FF" stroke="black" stroke-width="2" stroke-dasharray="10 10"/> <rect x="10" y="210"... fill="yellow" stroke="red" stroke-width="2" stroke-dasharray=" " rx="10" ry="10"/>

DalaB 17 Κύκλοι και ελλείψεις  Ένα κύκλος εμφανίζεται με την ετικέτα –  Μια έλλειψη εμφανίζεται με την ετικέτα –  Όσον αφορά την παράστασή τους χρησιμοποιούνται οι ίδιες ιδιότητες που χρησιμοποιούνται στα ορθογώνια

DalaB 18 Παραδείγματα

DalaB 19 Πολύγωνα και πολυγωνικές γραμμές  Ένα πολύγωνο εμφανίζεται με την ετικέτα : –  Μια ανοικτή πολυγωνική γραμμή εμφανίζεται με την ετικέτα – Συνήθως η ετικέτα polyline συνοδεύεται από την ιδιότητα fill="none"  Η ετικέτα συνοδεύεται από τις ιδιότητες: –stroke-linecap με τιμές butt, round, square που ορίζουν το σχήμα των άκρων –stroke-linejoin με τιμές miter, round, bevel που ορίζουν το σχήμα των γωνιών

DalaB 20 Παραδείγματα

DalaB 21 Νέες φόρμες  Η SVG επιτρέπει να ορίσουμε και νέες φόρμες: – όπου data μπορεί να είναι: M x y : μετάβαση στο σημείο ( x, y ) L x y : σχεδίασε μια γραμμή προς το σημείο ( x, y ) H x : σχεδίασε μια γραμμή οριζόντια μήκους x V y : σχεδίασε μια γραμμή κάθετα μήκους y Z : κλείνει ο δρόμος (το σχήμα) A … : σχεδίασε ένα ελλειπτικό τόξο Q …, T …. Σχεδίασε μια καμπύλη Bézier τριών σημείων C …, S … : Σχεδίασε μια καμπύλη Bézier τεσσάρων σημείων –Παρατήρηση. Αν χρησιμοποιηθούν μικρά γράμματα ( m, l, h, v, … ) τότε αναφερόμαστε σε σχετικές συντεταγμένες

DalaB 22 Ελλειπτικά τόξα  Ένα ελλειπτικό τόξο εμφανίζεται γράφοντας: –A rx ry x-rot large-arc sweep x y όπου rx ry είναι οι ακτίνες ως προς x και y x-rot είναι οι γωνίες περιστροφής ως προς τον άξονα των x large-arc και sweep ορίζουν τον τομέα x y ορίζουν τα τελικό σημείο του τόξου

DalaB 23 Παραδείγματα Καμπύλες Bézier 3 σημείων και 4 σημείων

DalaB 24 Κείμενο  Ένα κείμενο εμφανίζεται γράφοντας: κείμενο  Η ετικέτα text συνοδεύεται από τις ιδιότητες: –font-family, font-size, font-weight και font-style, text-decoration, letter-spacing,... (όπως ένα CSS) –text-anchor με τιμές start, middle και end για την ευθυγράμμιση –fill="color" για το χρώμα  Η ετικέτα επιτρέπει να ορίσουμε εκ νέου τις ιδιότητες ενός τμήματος του κειμένου  Η SVG υποστηρίζει τους χαρακτήρες Unicode και επιτρέπει να γράψουμε: –Καθέτως (τα γράμματα ίσια ή πλαγιαστά) –Με οποιαδήποτε κλήση –Ακολουθώντας μια καμπύλη γραμμή

DalaB 25 Παραδείγματα qwerty text

DalaB 26 Εικόνες  Με την ετικέτα, μπορούμε να εισάγουμε εικόνες JPEG, PNG ή ένα άλλο αρχείο SVG  Η ετικέτα συνοδεύεται από τις ιδιότητες: –x=…, y=…, τις συντεταγμένες της θέσης της εικόνας –width=… και height=… τις διαστάσεις της εικόνας  Μπορούμε να εφαρμόσουμε και φίλτρα στην εικόνα Εκκλησία (ευρυγώνια) Εκκλησία (επιμήκης) Εκκλησία

DalaB 27 Σύστημα συντεταγμένων  Το σύστημα των συντεταγμένων ορίζεται με τις ιδιότητες της αρχικής ετικέτας οι οποιες είναι: –width, height για τον ορισμό του παραθύρου εμφάνισης Σε pixels px (défault) Σε χιλιοστά ( mm ), εκατοστά ( cm ), ίντσες ( in ) Σε τυπογραφικό μέγεθος ( em, ex, pt, pc ) –viewport="x y w h" για τον ορισμό της ορατής περιοχής

DalaB 28 Η ορατή περιοχή (viewport) Η ορατή περιοχή της SVG χαρακτηρίζεται από τα ακόλουθα:  Η ορατή περιοχή "viewport" της SVG είναι ένα το ορατό ορθογώνιο για το χρήστη στην οθόνη  Η ορατή περιοχή διαθέτει ένα δικό της ανεξάρτητο σύστημα συντεταγμένων το οποίο έχει ως αρχή των συντεταγμένων το άνω αριστερά σημείο της περιοχής ( viewport coordinate system)  Μπορούμε να ορίσουμε μια νέα ορατή περιοχή μέσα σε μια ήδη υπάρχουσα ορατή περιοχή με την επίκληση της ετικέτας  Τα σχήματα μέσα σε μια ορατή περιοχή αναφέρονται σ’ ένα ειδικό σύστημα συντεταγμένων το οποίο λέγεται σύστημα συντεταγμένων του χρήστη ( user coordinate system ή user space ) το οποίο κατά την έναρξη της λειτουργίας της SVG είναι ταυτόσημο με το σύστημα συντεταγμένων της ορατής περιοχής  Κάθε νέο σχήμα το οποίο ξεπερνά τις διαστάσεις της ορατής περιοχής αποκόπτεται (clipped)

DalaB 29 Ανασχηματισμός και αποκοπές  Η ιδιότητα preserveAspectRatio="alignment mode" επιτρέπει να διατηρήσουμε την ισομετρία, όπου – mode είναι meet ή slice - alignment είναι της μορφής xM……yM……

DalaB 30 Μετασχηματισμοί  Πριν να εμφανιστεί, ένα γραφικό αντικείμενο μπορεί να υποστεί ένα μετασχηματισμό ο οποίος ορίζεται από την ιδιότητα transform="… " με τιμές –translate(tx,ty) –rotate(a) ή rotate(a,cx,cy) –scale(f) ή scale(fx,fy) –skewX(a), skewY(a) όπου οι γωνίες εκφράζονται σε βαθμούς  Οι μετασχηματισμοί μπορούν να συνδυαστούν

DalaB 31 Μετασχηματισμοί Μετασχηματισμός πίνακα (I) Όλοι οι μετασχηματισμοί μπορούν να εκφραστούν μαθηματικά από ένα πίνακα τετραγωνικό 3 x 3 της μορφής: Έτσι, μπορούμε να χρησιμοποιήσουμε μια ανυσματική παράσταση της μορφής [ a b c d e f ]. Όπου οι τιμές των a,b,c,d,e,f είναι διάφορες του 0 ή 1. Οι μετασχηματισμοί μετατρέπουν τις συντεταγμένες και τα μήκη από το ένα σύστημα σ’ ένα άλλο σύμφωνα με τη σχέση :

DalaB 32 Μετασχηματισμοί Μετασχηματισμός πίνακα (IΙ) ΜετασχηματισμόςΠαράμετροιΠίνακας Μετατροπή tx και ty είναι οι αποστάσεις μετά τη μετατροπή των συντεταγμένων x και y Κλίμακα sx και sy είναι οι συντελεστές της κλίμακας ως προς x και y Περιστροφήa είναι η γωνία περιστροφής Κλίση των συντεταγμένων x a είναι η γωνία κλίσης ως προς x Κλίση των συντεταγμένων y a είναι η γωνία κλίσης ως προς y

DalaB 33 Ομαδοποίηση των στοιχείων (αντικειμένων)  Η SVG διαθέτει πολλούς κατασκευαστές (constructors) για να ομαδοποιήσει αντικείμενα μέσα σε ομάδες (ενότητες)  Τα αντικείμενα της SVG κληρονομούν τη μορφή (style) των γονέων τους

DalaB 34  Το είναι το αρχικό σημείο (root) ενός γραφικού της SVG  Μπορούμε όμως να συμπεριλάβουμε και άλλα στοιχεία svg  Κάθε στοιχείο δημιουργεί ένα νέο σύστημα συντεταγμένων. Έτσι, μπορούμε να ξαναχρησιμοποιήσουμε και άλλα γραφικά χωρίς να αλλάξουμε τις συντεταγμένες. Π.χ. Ομαδοποίηση των στοιχείων (αντικειμένων) HELLO <rect x="50" y="50" rx="5" ry="5" width="200" height="100" style="fill:#CCCCFF;stroke:#000099"/> HELLO

DalaB 35 Ομαδοποίηση των στοιχείων (αντικειμένων) Ορισμός και ιδιότητες  Η ετικέτα επιτρέπει να ομαδοποιήσουμε διάφορα στοιχεία  Οι απόγονοι του κληρονομούν τις ιδιότητες Παράδειγμα <line x1="5" y1="80" x2="155" y2="80" stroke-width="30" stroke="black " stroke-dasharray="none " />  Το πράσινο χρώμα και το "dashing" κληρονομούνται.  Αντίθετα, η μαύρη γραμμή χρησιμοποιεί τα "overrides".

DalaB 36 Ομαδοποίηση των στοιχείων (αντικειμένων) Ορισμός και ιδιότητες:  Η ετικέτα επιτρέπει να ορίσουμε ένα επαναχρησιμοποιούμενο γραφικό αντικείμενο το οποίο επικαλείται από την ετικέτα  Ένα αντικείμενο δεν εμφανίζεται ποτέ, εμφανίζονται μόνο τα στιγμιότυπα (instances) (βασική διαφορά από την ετικέτα )  Κάθε ετικέτα πρέπει να έχει ένα διαφορετικό όνομα, για να μπορεί να χρησιμοποιηθεί, id = …  Η ετικέτα μπορεί να συνοδεύεται από τις ιδιότητες: – viewBox και – preserveAspectRatio οι οποίες επιτρέπουν την εμφάνιση του αντικειμένου μέσα σ’ ένα παράθυρο το οποίο καθορίζεται από την ετικέτα Παράδειγμα

DalaB 37 Ομαδοποίηση των στοιχείων (αντικειμένων) Ορισμός και ιδιότητες:  Η ετικέτα είναι παρόμοια με την, (πιο απλή) Προσοχή, στο εσωτερικό της ετικέτας κάθε στοιχείο ορίζεται, δεν σχεδιάζεται !  Μπορούμε όμως, να χρησιμοποιήσουμε αυθαίρετα κάθε στοιχείο το οποίο έχει λάβει όνομα από την ιδιότητα id Παράδειγμα

DalaB 38 Ομαδοποίηση των στοιχείων (αντικειμένων) Ορισμός και ιδιότητες:  Η ετικέτα επιτρέπει να επαναχρησιμοποιήσουμε τα ακόλουθα αντικείμενα:,,, καθώς και γραφικά  Η ετικέτα συμπεριφέρεται λίγο διαφορετικά, ανάλογα με τον τύπο του αντικειμένου στο οποίο αναφέρεται Τα αντικείμενα πρέπει να έχουν ένα όνομα XML, π.χ. Οι τιμές των x, y, width και height επιτρέπουν να επανατοποθετήσουμε και να δώσουμε νέες διαστάσεις στα αντικείμενα Παρατηρήσεις Με την ιδιότητα xlink:href μπορούμε να αναφερθούμε σ’ ένα αντικείμενο, Π.χ.

DalaB 39 Ομαδοποίηση των στοιχείων (αντικειμένων) Παράδειγμα 1 Παράδειγμα 2

DalaB 40 Εξομάλυνση  Η εξομάλυνση (degratation) των χρωμάτων δημιουργείται με τις ετικέτες: και

DalaB 41 Αποκοπή (clipping)  Η ετικέτα επιτρέπει να περιορίσουμε το πεδίο εμφάνισης των δυσδιάστατων αντικειμένων Παράδειγμα... <text x="150" y="220" font-size="80" text-anchor="middle">SUN

DalaB 42 Tα φύλλα ύφους και η SVG  Η SVG επιτρέπει τη δήλωση και χρήση φύλλων ύφους CSS Παράδειγμα <![CDATA[ polygon { fill:white; stroke:black; stroke-width:2 }.green { fill:#66FF66 }.yellow { fill:yellow } ]]> <polygon class="yellow" points=" "/>

DalaB 43 Επίδειξη (Animation)  Η SVG προσφέρει ένα ειδικό μηχανισμό για τη δημιουργία σελίδων επιδείξεων (animations)  Η βασική ιδέα είναι να εισάγουμε στοιχεία επιδείξεων μέσα σε γραφικές παραστάσεις  Μια διαδικασία επίδειξης επιτρέπει να: –Μετακινήσουμε αντικείμενα –Αλλάξουμε το σχήμα και το χρώμα τους –Τα μετακινήσουμε κατά μήκος μιας διαδρομής  Οι συναρτήσεις επίδειξης εκτελούνται από την SMIL2 (Synchronized Multimedia Integration Language, level 2)

DalaB 44 Ετικέτες επιδείξεων  Η ετικέτα με τις ιδιότητες: –attributeName="…" ορίζει το όνομα –from="…" και to="…" ορίζονται οι συντεταγμένες αρχής και τέλους –begin="…" και end="…" (ή dur="…" ) ορίζονται η αρχή και το τέλος (ή η διάρκεια) της επίδειξης –fill="freeze" επιτρέπει το πάγωμα της εικόνας στο τέλος της επίδειξης Προσδιορίζει ένα αντικείμενο και τον τρόπο που θα εμφανιστεί κατά τη διάρκεια της επίδειξης  Η ετικέτα επιτρέπει να δημιουργήσουμε επίδειξη χρωμάτων  Οι ετικέτες και επιτρέπουν σύνθετες μετακινήσεις

DalaB 45 Επίδειξη με μετασχηματισμό  Η ετικέτα με την ιδιότητα attributeName="transform" type="…" επιτρέπει την εφαρμογή ενός γεωμετρικού μετασχηματισμού. Παράδειγμα: HELLO

DalaB 46 Κίνηση κατά μήκος μιας διαδρομής  Η ετικέτα Επιτρέπει την μετακίνηση κατά μήκος μιας διαδρομής η οποία ορίζεται από την ιδιότητα path="… " Παράδειγμα HELLO <animateMotion path="M Q Q " dur="4s" fill="freeze"/> Προσοχή, η ιδιότητα path δεν έχει ουδεμία σχέση με την ετικέτα !