Λύσεις — Εφαρμογή 15 · Διανυσματικά γραφικά — SVG (σελ. 76–83) – ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ

Λύσεις — Εφαρμογή 15 · Διανυσματικά γραφικά — SVG (σελ. 76–83)

Ο κώδικας-λύση και ασκήσεις (διανυσματικά vs ψηφιδωτά, καμβάς svg, σχήματα rect/circle/line/text, fill/stroke, ομάδα g). Γλώσσες HTML5+SVG.

Ο κώδικας-λύση της Εφαρμογής 15

Ερώτηση: Σχεδιάστε με SVG έναν καμβά 200x150 με ένα ορθογώνιο, έναν κύκλο και ένα κείμενο.

Απάντηση:

• Γεια!
• Το <svg width/height> είναι ο καμβάς· το rect (x,y,width,height), το circle (cx,cy,r) και το text (x,y) με fill/stroke.

Σύνοψη: (ενδεικτική)

Κριτήρια αξιολόγησης:

• Κριτήριο:

Διανυσματικά vs ψηφιδωτά

Ερώτηση: Ποια η διαφορά διανυσματικών (SVG) από ψηφιδωτά (JPG/PNG) γραφικά;

Απάντηση:

• Ψηφιδωτά (raster): από pixel — στη μεγέθυνση θολώνουν/σπάνε.
• Διανυσματικά (SVG): από μαθηματικά σχήματα — κλιμακώνονται χωρίς απώλεια ποιότητας («Scalable»).

Σύνοψη: (ενδεικτική) Ψηφιδωτά: pixel, χαλάνε στη μεγέθυνση. Διανυσματικά (SVG): σχήματα/μαθηματικά, κλιμακώνονται χωρίς απώλεια.

Κριτήρια αξιολόγησης:

• Κριτήριο: pixel vs σχήματα + κλιμάκωση χωρίς απώλεια (vector).

Σχήματα SVG

Ερώτηση: Αναφέρετε βασικά σχήματα της SVG και τις παραμέτρους τους.

Απάντηση:

• <rect> (x, y, width, height), <circle> (cx, cy, r), <ellipse> (cx, cy, rx, ry).
• <line> (x1, y1, x2, y2), <polygon>/<polyline> (points), <text> (x, y), <path> (d).

Σύνοψη: (ενδεικτική) rect (x,y,w,h), circle (cx,cy,r), line (x1,y1,x2,y2), text (x,y), polygon (points), path (d).

Κριτήρια αξιολόγησης:

• Κριτήριο: ≥3 σχήματα με σωστές παραμέτρους.

fill, stroke ΚΑΙ g

Ερώτηση: Τι κάνουν οι fill, stroke, stroke-width και το στοιχείο ;

Απάντηση:

• fill: χρώμα γεμίσματος. stroke: χρώμα περιγράμματος. stroke-width: πάχος περιγράμματος.
• <g>: ομάδα σχημάτων με κοινά χαρακτηριστικά — τα μορφοποιούμε/μετακινούμε μαζί.

Σύνοψη: (ενδεικτική) fill: γέμισμα, stroke: περίγραμμα, stroke-width: πάχος περιγράμματος. : ομάδα σχημάτων με κοινά χαρακτηριστικά.

Κριτήρια αξιολόγησης:

• Κριτήριο: fill/stroke/stroke-width + ρόλος .