In rete : http://www.elegio.it/omnia/sv/svg-promemo.html

Esempi usabili come promemoria SVG

 

Esempio curva di Bézier quadratica nei dati del path Il disegno mostra i comandi "Q" e "T", e i punti di controllo e le linee tra i punti ed i punti di controllo. Promemoria Prima Scritta usando la marca text. Seconda Scritta usando la marca tspan Terza Scritta centrata in mezzo Quarta scritta grassetta seguita da una scritta rossa ma non in grassetto. Quinta Scritta ancora rossa e Sesta verde e un'altra che è ancora verde ed alla fine una Settima blu consecutiva anche lei fatta con la marca tspan.

Qui, per esempio uso la marca path e uso le marche necessarie per scrivere dentro l'immagine della marca svg.
Notare che non impongo esplicitamente la dimensione dell'immagine scrivendo width="1400" height="700" ed in questo modo l'immagine si adatta alle dimensioni disponibili della pagina ( quando si stampa il foglio è piuttosto stretto ossia 640 pixel mentre il video è largo circa 1920 pixel e poco alto... )

 

 
Come fare una scritta che segua un path assegnato

Qui vado in su poi vado giù e poi ritorno su Qui scrivo attorno ad una ellisse di due archi Qui scrivo dentro ad una ellisse di due archi

Qui viene usata la marca textPath e, non specificando la esatta dimensione della immagine, l'immagine si adatta alla larghezza disponibile del documento. Ma questo non succede con Internet Explorer mentre tutto va bene, oltre che con Firefox, anche con Chrome ed Opera. Col Safari che ho... le cose vanno così così ...

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath
http://www.w3schools.com/graphics/svg_intro.asp
http://www.w3schools.com/graphics/svg_path.asp
http://www.w3schools.com/graphics/svg_text.asp
http://www.elegio.it/svg/embed/
http://www.elegio.it/svg/tanteparabole.html
http://www.elegio.it/svg/svg2012/
http://www.elegio.it/svg/svg2012/applico-il-path.xhtml
http://www.elegio.it/svg/svg2013/
http://www.elegio.it/svg/svg2014/

 

Come scrivere linee senza spigoli, fatte da pezzi di linea cubica ( comandi C o S maiuscoli o minuscoli ) o di linea quadrica ( comandi Q o T maiuscoli o minuscoli )

Esempio di uso delle direttive cubiche ossia la C assoluta e la c relativa che richiedono tre punti, due di controllo ed uno finale e la S assoluta la s relativa che bisogna usare dopo la C o c dato che richiedono due punti, uno di controllo ed uno finale ma in realtà usano due punti di controllo generando il primo in modo che la linea non abbia spigoli ossia sia "morbida". Dunque la linea è un insieme di linee cubiche definite da 3 punti. Per esempio le due linee tutte rosse sono generate così: d="M 60,425 c 100,-250 225,-250 150,100 s 200,350 350,0 200,200 300,600" d="M 130,200 c 100,-250 225,-250 150,100 s 200,350 350,0 200,200 300,600" Per completezza mostro esempi di spezzate rettilinee... Esempio di uso delle direttive quadriche ossia la Q assoluta e la q relativa che richiedono due punti, uno di controllo ed uno finale e la T assoluta la t relativa che bisogna usare dopo la Q o q dato che richiedono un punto, nessuno di controllo ed uno finale ma in realtà usano un punto di controllo generandolo in modo che la linea non abbia spigoli ossia sia "morbida". Dunque la linea è un insieme di linee quadriche definite da 2 punti. Per esempio le due linee tutte rosse sono generate così: d="M 60,425 q 225,-250 150,100 t 350,0 300,600" d="M 130,200 q 225,-250 150,100 t 350,0 300,600"

Dunque le linee cubiche sono le più belle e facili da definire graficamente ( hanno due punti di controllo, oltre quello finale, nel primo spezzone e negli altri spezzoni uno dedotto col vincolo di assenza di spigoli, ed uno solo esplicito ) ma le quadriche, anche se più rischiose da gestire ( hanno solo un primo punto di controllo esplicito ed i seguenti dedotti per non avere spigoli e dunque l'intera linea dipende dal primo punto di controllo esplicito che, se definito male, crea serpentine ) ed essendo fatte da parabole sono più facili da trattare matematicamente.

http://www.elegio.it/utili/
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
http://www.elegio.it/omnia/sv/traiettoria-cubica.html
http://www.elegio.it/svg/ellisse.html