Web advanced-10-svg

Corso Data Journalist gen-mar 2017
TECNOLOGIE WEB AVANZATO
SVG e grafica vettoriale

Grafica raster Grafica vettoriale
ingrandimento
Una figura è
definita da una
matrice di pixel
Una figura è definita da primitive
grafiche quali linee o poligoni
Primitive grafiche
ingrandimento
dimensione 1 dimensione 2

SVG (Scalable Vector Graphics)
SVG è il linguaggio di
programmazione riconosciuto
dai normali browser per definire
immagini vettoriali.
<!DOCTYPE html>
<html>
<head/>
<meta charset="utf-8">
<title>Grafico Line</title>
</head>
<body>
<svg width="150" height="150">
Primitive grafiche
</svg>
</body>
</html>

Viewport
La viewport è definita dai valori assegnati agli attributi
width e height.
Il valore dei due attributi è un intero+l’unità di misura:
.. px : dimensione in pixel
...em: n volte la dimensione del carattere standard
..cm: dimensione in centimetri
………..
Se l’unità di misura non è specifica, il browser considera il
valore espresso in pixel.
Ad esempio:
definisce una viewport larga 200 pixel e alta 100 pixel
Viewbox
La viewbox è un attributo a cui devono essere assegnati
una sequenza di 4 valori:
1) x del punto in alto a sinistra;
2) y del punto in alto a sinistra;
3) larghezza del box;
4) altezza del box;
definisce il sistema di coordinate interno alla figura svg.
Ad esempio:
<svg width="200" height="200"
viewBox="0 0 100 100">
definisce un sistema di coordinate interno alla figura svg,
con origine al punto 0,0 e lunghezza 100 e larghezza 100.
Il sistema riproporziona in automatico la viewbox alle dimensioni della viewport

Relazione tra viewport e viewbox
viewBox=”0 0 100 100” >
viewBox=”0 0 100 100” >
viewBox=”-50 0 100 100” >
viewBox=”50 0 100 100” >

Linee e rettangoli
<rect x="10" y="30"
width="300" height="100"
style="fill : rgb(0,100,100);
stroke-width:4;
stroke:rgb(0,0,0)"/>
</svg>
<svg height="200" width="200"
viewBox="0 0 200 200">
<line x1="0" y1="0"
x2="200" y2="200"
style="stroke:rgb(255,0,0);
stroke-width:2" />
</svg>
line rect

Disegno di un rettangolo per analizzare la relazione tra viewport e viewbox
<style>
svg {background-color:rgb(200,200,200);}
</style>
<svg width="200" height="200" viewBox="00 0 100 100">
<rect x="0" y="0" width="100" height="100"
style="fill : rgb(0,100,100);
stroke-width:4;
stroke:rgb(0,0,0)"/>
</svg>

Cerchi ed ellissi
<svg height="140" width="500">
<ellipse cx="200" cy="80"
rx="100" ry="50"
style="fill:yellow;
stroke:purple;
stroke-width:2" />
</svg>
<svg height="100" width="100">
<circle cx="50" cy="50" r="40"
style="stroke:black;
stroke-width:3;
fill:red" />
</svg>
circle ellipse

Poligoni
0,0 200
100
<svg width="400" height="200" viewBox=”0 0 200 100” >
<polygon points="20,90 70,20 130,20 180,90" style="fill:rgb(256,160,60);
stroke:rgb(60,160,240);
stroke-width:10"
</svg>
viewBox

LEZIONE 1..
www.fordatascientist.org
C00-Web-Base
C50-SVG-Introduction

PATH
<path d ="M0 10 L100 50 L100 100 L200 0"
style="stroke:red; stroke-width:6; fill:none"
</svg>
0,10
100,50
100,100
100,200
<path d="M50 50 A30 50 0 0 1 100 100"
</svg>
0,0
0,0
100
200
100
200
50,50
100,100
30
50
0
0
1
x-axis-rotation (non si usa quasi mai)
large-arc-flag (per scegliere l’arco minore o maggiore)
sweep-flag (per scegliere l’arco opposto rispetto all’asse x)
Line
Arcs

PATH
<path d="M50,50 Q50,130 100,100"
</svg>
100,100
0,0
200
200
Quadratic Bezier Curves
50,50
50,130control point . Questo punto attrae
la curva come un magnete
50,130

Attributi Valori di style
<rect x="0" y="0"
width="100"
height="50"
fill= "red"
stroke="green"
stroke-width="2"
>
<rect x="0" y="0"
width="100"
height="50"
style="fill:red;
stroke:green;
stroke-width:2"
>
le due istruzioni sono equivalenti

Gruppi di elementi che condividono uno stile
Le primitive SVG possono essere riunite in gruppi attraverso il tag <g>...</g>
Esempio:
<g style="stroke:green; stroke-width:5;">
<line x1="0" y1="20" x2="70" y2="125"/>
<rect x="100" y="100" width="200" height="100" style="fill:#CCCC99;"/>
</g>

Programmi per scrivere programmi: d3js
2000 2005 2010 2015
<g style="fill:green; stroke:none">
<rect x="0" y="40" width="10" height="110" />
<rect x="45" y="60 width="10" height="90" />
………..
</g>
</sgv>
Ciclo

CONTATTI TELEFONO
051 22 35 20
EMAIL
WORKSHOP@VICEM.IT

Web advanced-10-svg

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Web advanced-10-svg

Similar to Web advanced-10-svg (6)

More from Studiabo

More from Studiabo (20)

Web advanced-10-svg