Διανυσματικές (Vector) Εικόνες

Δείτε την παρουσίαση του μαθήματος:

Διανυσματικές εικόνες σχηματίζονται από την σύνθεση γεωμετρικών σχημάτων (γραμμών, ορθογωνίων, ελλείψεων και τόξων).

Λόγω της κατασκευής τους έχουν τα εξής πλεονεκτήματα έναντι των ψηφιογραφικών εικόνων:

  • αποθηκεύονται σε πολύ μικρό μέγεθος μνήμης

  • όσο κι αν τις μεγενθύνουμε αυτές αναπαράγουν τέλεια το περιεχόμενό τους


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


Τύπος εικόνας

Εικόνα

Zoom

Ψηφιογραφική

sheep.png
sheepZoomPng.jpg

Διανυσματική

sheep.png
sheepZoomPdf.jpg

Στον παρακάτω πίνακα συγκρίνουμε τα μεγέθη εικόνων σε σχέση με τον τύπο τους και την ανάλυσή τους. Παρατηρήστε ότι το μέγεθος της διανυσματικής εικόνας παραμένει ίδιο όταν μεγαλώνει η ανάλυση της εικόνας και το μέγεθος του αντικειμένου που περιέχει (με ίδιο αριθμό αντικειμένων στην εικόνα φυσικά). Αντίθετα το μέγεθος της ψηφιογραφικής εικόνας (.bmp) τετραπλασιάζεται όταν τετραπλασιάζεται ο αριθμός των εικονοστοιχείων από τα οποία αποτελείται.

Ανάλυση Εικόνας

Τύπος Εικόνας

Μέγεθος αρχείου KB

640x480

bmp

(ψηφιογραφική)

900

640x480

svg

(διανυσματική)

3

1280x960

bmp

3600

1280x960

svg

3


Παράδειγμα: για την παρακάτω εικόνα βλέπουμε δεξιά της τον κώδικα που περιέχει το αρχείο της.

Παρατηρήστε την εντολή που περιγράφει το παραλληλόγραμμο (<rect height="157" width="290" y="158" x="199">) δίνοντας το ύψος του, το μήκος του και τις συντεταγμένες μιας κορυφής του.

Επίσης το μέγεθος της εικόνας σε pixel δίνεται με την εντολή <svg width="640" height="480">.

Οπότε αν θέλουμε να μία μεγαλύτερη σε Pixel εικόνα με μεγαλύτερο παραλληλόγραμμο αρκεί να αλλάξουμε τις παραπάνω τιμές, χωρίς αυτό βέβαια να αλλάξει το μέγεθος του αρχείου της εικόνας.



Διανυσματική εικόνα
Περιεχόμενα αρχείου διανυσματικής εικόνας
rectangle.JPG
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<rect id="svg_1" height="157" width="290" y="158" x="199" stroke-width="5" stroke="#000000" fill="#ff0000"/>
</g>
</svg>




Προγράμματα δημιουργίας διανυσματικών εικόνων:

  • Adobe Illustrator (εμπορικό πακέτο)

  • Photoshop (εμπορικό πακέτο)

  • Corel Draw (εμπορικό πακέτο)

  • svg-editor (δωρεάν online)

  • raven (aviary suite) (δωρεάν online)


Τύποι (format) αρχείων διανυσματικών εικόνων:

psd, cdr, svg, eps, swf

Online εφαρμογή για μετατροπή ψηφιογραφική εικόνας σε διανυσματική: http://vectormagic.com


question.jpgΔιερευνήστε τις ιδιότητες των διανυσματικών εικόνων με τις δραστηριότητες του εμπλουτισμένου βιβλίου πληροφορικής:

  1. Δημιουργώνταςδιανυσματικές εικόνες

  2. Μεγενθύνοντας διανυσματικές εικόνες

  3. Υπολογίζοντας Μέγεθος διανυσματικές εικόνες

  4. Αλλάζοντας Διαστάσεις διανυσματικές εικόνες - (Δεν μεταβάλλεται η ποιότητα της εικόνας από διαδοχικές αλλαγές μεγέθους, σε αντίθεση με τις ψηφιογραφικές)

  5. Αλλάζοντας Κλίμακα διανυσματικές εικόνες



computer-practise.jpg

Δραστηριότητα:

Δημιουργήστε με το svg-editor μία εικόνα 640x480. Σχεδιάστε την παρακάτω εικόνα και αποθηκεύστε την με το όνομα redBlue.svg.

Σημείωση: Για την αποθήκευση της θα πρέπει να ανοίξετε το σημειωματάριο και να επικολλήσετε σε αυτό τον κώδικα που εμφανίζεται όταν επιλέξετε την εντολή save στον svg-editor. αποθηκεύστε το αρχείο του σημειωματαρίου με τo όνομα redBlue.svg.
redBlue.png

α) ποιό είναι το μέγεθος του αρχείου της εικόνας;


β) ανοίξτε το αρχείο με το σημειωματάριο (δεξί κλικ-->άνοιγμα με--> επιλογή σημειωματαρίου από την λίστα) και δείτε τα περιεχόμενά του. Εντοπίστε το σημείο που περιγράφεται η ανάλυση της εικόνας σε pixel (width="640" height="480"). Μεγαλώστε την ανάλυση σε 1280x960, τροποποιώντας απλά τα νούμερα. Αποθηκεύστε την νέα εικόνα με το όνομα redBlue-big.svg. Ποιό είναι το μέγεθος του αρχείου της νέας εικόνας;


γ) δημιουργήστε αντίστοιχη εικόνα (1280x960) στο πρόγραμμα της ζωγραφικής και αποθηκεύστε την με βάθος χρώματος 24bit και όνομα RedBlue.bmp. Ποιό είναι το μέγεθος του αρχείου της εικόνας; Συγκρίνετε το με το μέγεθος του αρχείου redBlue.svg.