SVG
GEOMETRY IN CODING
Cos'è SVG
SVG = Scalable Vector Graphic è un linguaggio di markup come HTML che serve per creare dei disegni vettoriali.
Il tag SVG serve per creare uno spazio per la tela che serve per fare i disegni vettoriali.
Le dimensioni si specificano con width e height nel tag di apertura.
CIRCLE
Il tag “circle” serve per creare un cerchio con il centro cx = 150 e cy = 100 e il raggio r = 50.
<!DOCTYPE html>
<html>
<head>
<title>Scalable Vector Graphics</title>
</head>
<body>
<svg width=”200″ height=”220″>
<circle cx=”150″ cy=”100″ r =”50″ fill=”white”></circle>
</svg>
</body>
</html>
Nel tuo browser fa visualizzare così:
ELLIPSE
Il tag “ellipse” è come quello del cerchio ma si deve specificare rx ed ry.
<!DOCTYPE html>
<html>
<head>
<title>Scalable Vector Graphics</title>
</head>
<body>
<svg width=”220″ height=”180″>
<ellipse cx = “155” cy = “80” rx = “50” ry = “10” stroke=”red” stroke-width=”3″ fill=””></ellipse>
</svg>
</body>
</html>
Nel tuo browser fa visualizzare così:
RECT
Il tag “rect” serve per creare un rettangolo.
L’angolo sinistro in alto è nel punto x = 55 e y = 30.
Il rettangolo è largo 200 width e alto 100 height.
<!DOCTYPE html>
<html>
<head>
<title>Scalable Vector Graphics</title>
</head>
<body>
<svg width=”300″ height=”150″>
<rect x = “55” y = “30” width=”200″ height=”100″ stroke=”blue” stroke-width=”8″ fill=”red”></rect>
</svg>
</body>
</html>
Nel tuo browser fa visualizzare così:
LINE
Il tag “line” serve per creare una linea dal punto x1=110 y1=20 al punto x2=150 y2=180.
Il colore della linea è arancione e lo spessore 6.
<!DOCTYPE html>
<html>
<head>
<title>Scalable Vector Graphics</title>
</head>
<body>
<svg width=”200″ height=”200″>
<line x1 = “110” y1 = “20” x2 = “150” y2 =”180″ stroke=”red” stroke-width=”6″></line>
</svg>
</body>
</html>
Nel tuo browser fa visualizzare così:
POLYLINE
Il tag “polyline” serve per creare una figura che è composta da tanti punti connessi.
I punti da connettere sono specificati nell’attributo points, si deve specificare un minimo di 3 punti.
<!DOCTYPE html>
<html>
<head>
<title>Scalable Vector Graphics</title>
</head>
<body>
<svg width=”300″ height=”300″>
<polyline points=”100, 10 175, 200 60, 200″fill=”white”></polyline>
</svg>
</body>
</html>
Nel tuo browser fa visualizzare così:
POLYGON
Il tag “polygon” è simile al tag di polyline, è composto da tanti punti connessi.
La differenza è che il primo punto e l’ultimo sono automaticamente connessi.
<!DOCTYPE html>
<html>
<head>
<title>Scalable Vector Graphics</title>
</head>
<body>
<svg width=”100″ height=”300″>
<polygon points=”50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180“fill=”white”></polygon>
</svg>
</body>
</html>
Nel tuo browser fa visualizzare così:
TEXT
Il tag “text” serve per disegnare il testo su qualsiasi parte indicando con “x” e “y”.
<!DOCTYPE html>
<html>
<head>
<title>Scalable Vector Graphics</title>
</head>
<body>
<svg width=”180″ height=”100″fill=”white”>
<text x=”1″ y=”70″>BUONGIORNO!</text>
</svg>
</body>
</html>
Nel tuo browser fa visualizzare così: