ΔΙΑΝΥΣΜΑΤΙΚΑ ΓΡΑΦΙΚΑ (SVG) ΚΑΙ ΧΡΗΣΗ ΤΟΥΣ ΣΤΑ ΜΑΘΗΜΑΤΙΚΑ ΛΟΜΒΑΡΔΟΥ ΕΛΕΝΗ

Transcript

1 ΔΙΑΝΥΣΜΑΤΙΚΑ ΓΡΑΦΙΚΑ (SVG) ΚΑΙ ΧΡΗΣΗ ΤΟΥΣ ΣΤΑ ΜΑΘΗΜΑΤΙΚΑ ΛΟΜΒΑΡΔΟΥ ΕΛΕΝΗ

2 ΤΑ ΑΡΧΕΙΑ ΕΙΚΟΝΩΝ ΧΩΡΙΖΟΝΤΑΙ ΣΕ ΔΥΟ ΚΑΤΗΓΟΡΙΕΣ. Α) ΨΗΦΙΟΓΡΑΦΙΚΕΣ ΕΙΚΟΝΕΣ BITMAP Τα αρχεία αυτά αποτελούνται από σύνολο εικονοστοιχείων, συγκεκριμένου μεγέθους (ανάλογα με την ανάλυση της εικόνας) με καθορισμένο χρωματικό βάθος. Format:.jpeg,.tif,.bpm κλπ B) ΔΙΑΝΥΣΜΑΤΙΚΕΣ ΕΙΚΟΝΕΣ - VECTOR GRAPHICS Τα αρχεία αυτά περιγράφουν με αλγεβρικές-διανυσματικές μεθόδους την εικόνα. Για να δημιουργηθεί μια διανυσματική εικόνα χρειάζονται πληροφορίες όπως οι συντεταγμένες του σχήματος. Format:.cdr,.eps,.wmf,.svg

3 ΔΥΑΝΙΣΜΑΤΙΚΑ ΓΡΑΦΙΚΑ SVG (Scalable Vector Graphics) επέκταση ονόματος αρχείου (Format extension).svg Είναι γλώσσα (ανοιχτό πρότυπο) που περιγράφει διανυσματικά γραφικά και αποτελεί εφαρμογή της XML (γλώσσα σήμανσης, που περιέχει ένα σύνολο κανόνων για την ηλεκτρονική κωδικοποίηση κειμένων) και αναπτύχθηκε για τον καθορισμό διαστάσεων γραφικών τόσο στο διαδύκτυο, όσο και σε άλλες εφαρμογές. Όπως τα αρχεία XML, έτσι και οι SVG εικόνες μπορούν να δημιουργηθούν και να επεξεργαστούν με οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου. Τα κείμενα είναι Unicode έτσι οι μηχανές αναζήτησης μπορούν και εντοπίζουν κείμενο μέσα σε εικόνα. Συγκαταλέγεται στον κλάδο της επιστήμης των υπολογιστών που ασχολείται με τη θεωρία και την τεχνολογία σύνθεσης εικόνων σε ηλεκτρονικό υπολογιστή. Όλα τα μεγάλα σύγχρονα προγράμματα περιήγησης στο internet δίνουν την δυνατότητα υποστήριξης SVG και μπορούν να καταστήσουν τη σήμανση άμεσα.

4 SVG Κλιμάκωση (Scalable) Επιτρέπουν μεγέθυνση ή σμίκρυνση χωρίς να επιφέρουν απώλεια στην ευκρίνεια και την ποιότητας της εικόνας και παρέχουν λεπτομέρεια ορατή στις μέγιστες μεγεθύνσεις. Έτσι εκμεταλλεύονται πλήρως την ανάλυση ενός εκτυπωτή ή μιας οθόνης. Διανυσματικό (Vector) Μια διανυσματική γραφική παράσταση περιέχει γεωμετρικά αντικείμενα όπως γραμμές και καμπύλες. Μπορούν να ενσωματώνουν raster εικόνες και να τις συνδυάσουν με διανυσματική πληροφορία. Γραφικά (Graphics) Είναι γραφικές παραστάσεις με διανυσματική μρφή.

5 Χαρακτηριστικά Τα διανυσματικά γραφικά δεν εξαρτώνται από την ανάλυση του αρχείου. Δίνουν υψηλού επιπέδου εκτυπώσεις για κάθε ανάλυση. Καταλαμβάνουν μικρότερο χώρο στο δίσκο σε σχέση με τις ψηφιδωτές εικόνες (raster ή pixel), αφού δεν περιγράφουν τις σύνθετες πληροφορίες κάθε εικονοστοιχείου άλλα αποθηκεύουν τη γεωμετρία τους απεικόνισης. Έχουν μεγάλο βαθμό συμπίεσης και γι αυτό τον λόγο φορτώνονται γρήγορα στο διαδίκτυο. Δημιουργούνται και επεξεργάζονται με οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου.

6 Η γλώσσα SVG είναι γέφυρα μεταξύ σχεδίου και προγραμματισμού Τα βασικά σχήματα που υποστηρίζει είναι το ορθογώνιο, ο κύκλος, η έλλειψη, η γραμμή, το πολύγωνο και το μονοπάτι (path), μια πιο σύνθετη μορφή που ορίζει φόρμα. Στην συνέχεια παρέχει τον έλεγχο διαφόρων στυλ γέμισμα χρώματος (fill), ορισμό περιγράμματος (stroke), διαφάνειας (opasity), διαβάθμισης (gradient) γραμμικά και ακτινωτά, εφέ φίλτρων και scripting (λειτουργία JavaScript για το χειρισμό SVG γραφικών). Επιτρέπει την εισαγωγή κειμένου ακόμα και μέσα σε σχέδιο και εικόνων και δίνει τη δυνατότητα κίνησης (animation). Έταιρίες έχουν προχωρήσει στην έκδοση σχετικών εργαλείων όπως: adobe με την δημιουργία σχετικού plug in, το toolkit της Csiro, Webdraw της Jasc, Svg Bexier της Beez, Svg Viewer της IBM

7 Χρήση SVG σε ιστοσελίδες / 1 α) β) γ) δ) Ως αυτόνομη ιστοσελίδα και τότε το SVG αρχείο ενσωμάτωνεται απευθείας στο πρόγραμμα πλοήγησης. Ενσωμάτωση από αναφορά όπου η γονική ιστοσελίδα κάνει αναφορά σε ένα ξεχωριστά αποθηκευμένο SVG έγγραφο και καθορίζει Ότι το δεδομένο έγγραφο πρέπει να ενσωματωθεί σαν ένα συστατικό της γονικήςιστοσελίδας. Ευθύγραμμη ενσωμάτωση, όπου το SVG περιεχόμενο ενσωματώνεται ευθύγραμμα απευθείας μέσα στη γονική ιστοσελίδα. Εξωτερική σύνδεση, κάτι που επιτρέπει τη χρησιμοποίηση οποιουδήποτε αυτόνομου SVG viewer Ε) Με αναφορά από ιδιότητα CSS2 ή XSL. Αν και η SVG είναι πρόσφατη ως πρότυπο.

8 Χρήση SVG σε ιστοσελίδες / 2 ε) ζ) η) Αποτελεί λογισμικό ανοιχτού κώδικα, χρησιμοποιεί απλά εργαλεία που δεν απαιτουν την γνώση προγραμματισμού. Κάνει την εμπειρία στην περιήγηση στο διαδίκτυο εύκολη, πλούσια και ευέλικτη. Προγράμματα περιήγησης στο Internet που προβάλλουν αρχεία SVG: Firefox, Internet Explorer 9, Google Chrome, Opera και Safari.

9 <!DOCTYPE html> <html> <body> <svg xmlns=" version="1.1" height="190"> <polygon points="100,10 40, ,60 10,60 160,180" style="fill:red;stroke:orange;strokewidth:10;fill-rule:evenodd;"> </svg> </body> </html> Ένα αρχείο SVG έχει αυτή την δομή

10 Επειδή κάθε σχήμα περιγράφεται από τις συντεταγμένες του στους άξονες χ,ψ σε σχέση το πάνω σημείο της οθόνης, στο παράδειγμα ο ορισμός του πολύγονου γίνεται έτσι: <polygon points="100,10 40, ,60 10,60 160,180"> δλδ <polygon points="x1,y1 x2,y2 "/> Επιπλέον πληροφορίες για τις ιδιότητες του σχήματος δίνονται έτσι: style="fill:red;stroke:orange;stroke-width:10;fill-rule:evenodd;"> fill="color" για τον ορισμό του χρώματος του περιεχομένου stroke: για τον ορισμό του χρώματος της γραμμής του σχήματος stroke-width: για τον ορισμό του πάχους της γραμμής του σχήματος - fill-rule: προσδιορίζει τις επιλογές για το εσωτερικό ενός σχήματος

11 παράδειγμα ορίζοντας την σειρά των αντικειμένων <!DOCTYPE html> <html> <body> <svg xmlns=" version="1.1"> <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" /> </svg> </body> </html> <!DOCTYPE html> <html> <body> <svg xmlns=" version="1.1"> <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" /> <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" /> <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" /> </svg> </body> </html>

12 παράδειγμα κίνηση αντικειμένου <!DOCTYPE html> <html> <body> <p><b>note:</b> This example only works in Firefox and Google Chrome.</p> <svg xmlns=" version="1.1"> <g transform="translate(100,100)"> <text id="textelement" x="0" y="0" style="fontfamily:verdana;font-size:24; visibility:hidden"> It's SVG! <set attributename="visibility" attributetype="css" to="visible" begin="1s" dur="5s" fill="freeze" /> <animatemotion path="m 0 0 L " begin="1s" dur="5s" fill="freeze" /> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze" /> <animatetransform attributename="transform" attributetype="xml" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze" /> </text> </g> </svg> </body> </html>

13 παράδειγμα blur filter <!DOCTYPE html> <html> <body> <svg xmlns=" version="1.1"> <defs> <filter id="myfilter" filterunits="userspaceonuse" x="0" y="0" width="200" height="120"> <fegaussianblur in="sourcealpha" stddeviation="4" result="blur" /> <feoffset in="blur" dx="4" dy="4" result="offsetblur" /> </filter> </defs> <rect x="1" y="1" width="198" height="118" fill="#cccccc" /> <g filter="url(#myfilter)"> <path fill="none" stroke="#d90000" stroke-width="10" d="m50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" /> <text fill="#ffffff" stroke="black" font-size="45" fontfamily="verdana" x="52" y="76">svg</text> </g> </svg> </body> </html>

14 Βιβλιογραφία Ο Ήχος, η Εικόνα και το Βίντεο στο Εκπαιδευτικό Λογισμικό aio_me%20askiseis%20autoaksiologisis.pdf Ψηφιακά γραφικά Wikipedia Ενα σχολειο κατω απο την ακροπολη: τρια εργαλεια, δυο τεχνολογιεσ, μια φιλοσοφια Introduction to SVG