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

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

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

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

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

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

Απάντηση:

<svg width="200" height="150">
  <rect x="10" y="10" width="80" height="50" fill="lightblue" stroke="black" stroke-width="2"></rect>
  <circle cx="150" cy="60" r="30" fill="orange"></circle>
  <text x="20" y="120" fill="green">Γεια!</text>
</svg>

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

Σύνοψη: (ενδεικτική) <svg width height> καμβάς + <rect x/y/width/height>, <circle cx/cy/r>, <text x/y> με fill/stroke/stroke-width.

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

Κριτήριο: <svg> καμβάς + σωστά σχήματα rect/circle/text με σωστές παραμέτρους.

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

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

Απάντηση:

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

Σύνοψη: (ενδεικτική) Χαρτογραφικά (bitmap): 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 και το στοιχείο <g>;

Απάντηση:

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