All you need to know about SVG!
SVG, SVG ovunque... OMG!SVG!
Possiamo dire senza alcun dubbio che dopo aver assistito allo speech proposto al Codemotion 2017 da Aga Naplocha, UI - UX - font-end developer, siamo stati profondamente inspirati e incuriositi dal mondo delle SVG. Oltretutto, non si tratta di illustrazioni vettoriali qualsiasi, ma addirittura di immagini animate! Sposta il cursore sulle figure e, come per magia, le vedrai muoversi, colorarsi, trasformarsi sotto i tuoi occhi.
Vuoi seguirci nel nostro viaggio a Roma e scoprire ogni strabiliante segreto delle SVG? Clicca su "Inizia" e segui il percorso, non ne sarai deluso.
L'avventura inizia: si parte da Milano!
Utilizzo tag img
Valigie pronte, entusiasmo alle stelle: tutto pronto per il viaggio nel mondo delle SVG. Il grande successo della grafica vettoriale nel web deriva da vari fattori: scalabilità, accessibilità, ottimizzazione intrinseca per display ad elevata risoluzione, dimensioni modeste dei file. Insomma, il futuro delle immagini online è alle porte! Tutti i disegni che troverai in questa pagina sono già SVG... come abbiamo fatto? Esistono vari modi per raggiungere il risultato, ma niente paura: per iniziare a godere delle meraviglie vettoriali è sufficiente richiamare il file all'interno di un semplice tag img.
Scopri di più...
I Galli alla conquista di Roma!
Inline SVG
Tutto qui? Certo che no, ci sono ancora tantissime cose da scoprire! Iniziamo l’esplorazione delle potenzialità più nascoste delle SVG andando a vedere un secondo modo per inserirle all’interno di una pagina: si tratta del metodo inline, che prevede di includere il codice SVG direttamente all’interno del codice HTML. Facile, no?
Scopri di più...Che il Codemotion abbia inizio
Animazione con CSS
Qualcuno potrebbe chiedersi il perché del trascinare un (a volte) lungo codice SVG nella pagina, quando è possibile farne a meno: ebbene, solo in questo modo potremo scatenare la nostra fantasia! Raggruppando determinati elementi in fase di creazione dell’immagine è possibile legarli ad una serie di istruzioni per renderli animati. Ancora una volta ti chiedi come sia possibile? Con il CSS, ovviamente!!
Scopri di più...Codice e… birra!
Animazione CSS ottimizzata
Come vedi le possibilità sono davvero infinite… keyframes e proprietà “animation” sono le tue migliori alleate!! Un brindisi a loro!!
Scopri di più...Dove c’è un coder, c’è caffé
SVG "single line drawing"
Lo ripetiamo: l’unico limite è la fantasia. Effetti particolari e di grande impatto? Nessun problema, a patto di predisporre appositamente l’immagine durante la sua creazione. Realizza una SVG in cui il bordo sia un’unica lunga linea aperta e potrai implementare il cosiddetto “single line drawing”, sperimentando con la proprietà stroke-dashoffset.
Scopri di più...Da Castro Pretorio a Marconi
Animazione CSS all'hover
Si sa, in città la metropolitana molto spesso salva la vita e ci risparmia code, semafori e stress. Per raggiungere il Codemotion è stata fondamentale. Sposta il mouse sopra sulla carrozza qui a fianco e parti con noi!
Scopri di più...Dolce pausa tra uno speech e l’altro
Animazione CSS al click
Eh sì, a quanto pare dove ci sono coder ci sono anche gelati, oltre al caffé!! Un po’ di zuccheri per ripartire alla grande… fame? Clicca sul gelato a fianco per comporre il tuo cono preferito.
Scopri di più...Abbacchio, cacio, pepe e… pizza!!
Animazione CSS allo scroll
Non poteva certo mancare uno studio approfondito e attento delle bontà culinarie locali: abbacchio, fritture varie, tonnarelli cacio e pepe, pizze, focacce e pasta di ogni tipo hanno abbondatemente integrato gli spuntini offerti durante il Codemotion!
Scopri di più...Ritorno a Milano
Animazione JS con GreenSock
Tutte le belle avventure sono, purtroppo, destinate a finire: anche il nostro viaggio metaforico nel mondo delle SVG sta giungendo al termine. Prima di concludere, però, un’ultima piccola, ma importante, nota. Lavorando con le animazioni sul web, capita prima o poi di imbattersi in GreenSock, libreria JavaScript per gestire animazioni avanzate: naturalmente, possiamo sfruttarla ampiamente per aggiungere effetti sempre più ricchi alle nostre SVG.
Scopri di più...