SVG per sviluppatori web

Name: SVG per sviluppatori web
Rating: 4.4 (9 reviews)

Impara SVG: da zero a esperto

Created byNicola Ciaco

Last updated 2/2025

Italian

What you'll learn

Comprensione dei vantaggi nell'usare immagini in formato svg rispetto ai formati raster (png,jpeg,gif,webp ecc.) nelle pagine web.
Capacità di modificare e personalizzare immagini svg preesistenti tramite tool online gratuiti e Adobe Illustrator
Acquisizione dei concetti e dei tag e attributi di svg che ti consentiranno di creare immagini svg da zero. Creazione di immagini svg da zero tramite software.
Includere le immagini svg nelle tue pagine html. Rendere interattive parti delle immagini tramite css e javascript. Rendere elastiche e responsive immagini svg
Alla fine del corso sarai in grado di costruire un Icon System (è l'equivalente di uno sprite per le immagini classiche).
Acquisirai le skills per diversificare le tue pagine web da quelle "uniformate" costruite con Bootstrap animando immagini svg in Css,con SMIL e/o con Javascript
Altre abilità che acquisirai in questo corso: creazione di patterns da usare nel tuo layout ,uso dei filtri, clipping e masking , typographic lookup e altro...
Il tutto sarà trattato in maniera pratica, learning by doing, senza trascurare la teoria che c'è dietro. Ci saranno molti esempi pratici che implementeremo live
Acquisire le conoscenze tecniche per diventare creativi, cioè pensare ad una feature grafica ed implementarla in autonomia

Course content

9 sections • 80 lectures • 13h 10m total length

Panoramica del corso e obiettivi10:25
Spiegazione e Risoluzione di eventuali problemi nella riproduzione dei COMPITI5:09

Ambiente di Sviluppo6:18
Download,installazione e configurazione dell'ambiente di sviluppo Visual Studio Code
Concetti basilari su SVG17:45
Scalabilità di Svg vs immagini raster. Supporto di Svg. Svg non soppianta le immagini raster in ogni caso
Repository SVG4:51
Principali repository svg online da cui attingere grafica gratis. Limiti.
Software13:27
Software online gratuiti per manipolare grafica SVG con focus su boxy-svg. Adobe Illustrator
Generazione grafica SVG da zero da software11:06
Uso di boxy-svg e Adobe Illustrator per creare grafica da zero
Riepilogo Sezione 21:52
Concetti generali su svg

Introduzione0:46
Tag <svg> e attributi width ed height5:43
Tag <circle> e sistema di coordinate della viewport6:26
Tag <rect> e alcuni attributi fondamentali di SVG8:46
Tag <ellipse>3:04
Tag <line> e <polyline>6:13
Disegnare un segmento e una spezzata
Tag <path>19:21
Disegnare un percorso complesso, anche con tratti curvilinei tramite le curve di Bezier, sintassi dell'attributo d di <path>
Inserire testo nell'immagine5:15
Inserimento di testo dentro un'immagine svg
Riepilogo Sezione2:22
Codici(immagini) della sezione0:05
Codici (immagini svg) creati durante le varie lezioni di questa sezione

Introduzione1:00
IntroduzioneSezione + codici completi di questa sezione
Includere svg con il tag <img>2:43
Includere immagine svg con css8:39
Svg inline9:26
Modificare immagini svg con CSS e JS Parte123:42
Qui c'è un esempio più complesso di inclusione e uso di immagini svg e si mostra come rendere interattiva un'immagine svg inline al click con js, e come stilizzarla con css.
Modificare immagini svg con CSS e JS Parte222:14
Altro vantaggio svg vs immagini raster2:59
Qui spiego che per rendere interattive e modificali le controparti immagini raster è necessario del lavoro in più tramite software grafici e scaricare più versioni della stessa immagini. Tutti problemi che svg non ha
Altri tag per includere svg:object,iframe,embed10:59
Come mantenere un'immagine svg esterna e continuare a manipolarla con js
Riepilogo sezione2:50
Minisfida: cambia la forma dei piedi del robot

Introduzione1:46
Scalabilità di immagini raster4:42
Svg non scala di default7:03
Viewbox Parte 121:09
Viewbox Parte 27:17
Scalare svg incluso con <img>5:27
Scalare svg inline no cross-browser3:42
Scalare svg inline cross browser7:00
Scalare svg incluso con background-image6:35
Immagine occupante il contenitore svg con width ed height fissa6:02
Scalare svg dentro svg in maniera indipendente14:14
Svg responsive15:42
Riepilogo sezione1:45
Minisfida: Disporre la stessa immagine svg ai 4 angoli ed al centro.
Codici Completi Sezione0:05

Introduzione1:47
Transizioni e animazioni Css19:45
Animare svg con animazioni css9:35
Animare svg esterno con animazioni css11:17
Animazioni css vs SMIL e supporto4:47
Animazioni SMIL Introduzione13:39
SMIL Parte 219:13
SMIL Parte 315:03
SMIL Parte 4 (cambiare una forma)9:19
SMIL animateMotion e mpath13:17
SMIL animare testo5:16
SMIL: forma che disegna se stessa13:30
SMIL animateTransform7:35
Tag <set>5:53
Animare SVG con Javascript Parte 115:42
Animare SVG con Javascript Parte 220:46
Realizzare e animare un hamburger menu in svg
Muovere una forma lungo un percorso qualunque (che non parte dall'origine)

Requirements

Un requisito fondamentale è la conoscenza almeno basilare di html e css. Non è invece strettamente necessario conoscere Javascript, dato che gli esempi inerenti sono di facile comprensione e possono comunque essere saltati senza inficiare la comprensione del resto del corso

Description

SVG esiste dal 1998 ma solo da poco ha pieno supporto nei browsers. Quindi è un formato grafico maturo per il web che ti consentirà di creare animazioni ed effetti meravigliosi e molto altro.

Il corso è un mix tra teoria e pratica (con tantissimi esempi pratici ) ed ha come target principale gli sviluppatori web.

Contenuti del corso

Usare software per creare grafica svg
Usare tag svg per creare grafica svg
Modalità di inclusione di immagini svg in una pagina web: peculiarità e differenze
Modificare parte di un'immagine svg in javascript e in css
Rendere le immagini svg scalabili e responsive
Creare un Icon System in SVG
Ottimizzare immagini svg
Animazioni SVG native con SMIL, animare SVG con css e con javascript
Clip,path,filtri,typographic-lookup, pattern

Quasi tutte le spiegazioni teoriche sono corredate da almeno un esercizio esemplificativo con un approccio didattico improntato sul learning by doing mixato anche con spiegazioni teoriche dettagliate.

Ci sono anche molti esercizi/progettini sfidanti e formativi per gli studenti per testarsi e mettersi alla prova e diventare creativi al termine di quasi ogni sezione

About me

Il mio nome è Nicola Ciaco e sono un ingegnere informatico e un web developer incentrato principalmente sul frontend. Appassionato da sempre di tecnologia e informatica, insegno anche tematiche di sviluppo web in maniera professionale per un'azienda. Sia se sei un principiante di svg sia se hai delle conoscenze più avanzate sulle tematiche trattate il corso è perfetto per te.

Who this course is for:

Sviluppatori web, front-end web developer , web designer, aspiranti sviluppatori web in formazione anche da autodidatta con conoscenze base di Html e Css

SVG per sviluppatori web

What you'll learn

Explore related topics

Course content

Introduzione2 lectures • 16min

Introduzione SVG6 lectures • 55min

Principali tag e attributi svg per creare immagini svg manualmente10 lectures • 58min

Includere Svg nelle pagine web9 lectures • 1hr 25min

Svg scalabile e responsive14 lectures • 1hr 42min

Creare e usare un Icon System Svg8 lectures • 1hr 2min

Ottimizzare immagini Svg3 lectures • 17min

Animare immagini Svg16 lectures • 3hr 6min

Clipping,masking,filter,pattern e altro12 lectures • 2hr 11min

Requirements

Description

Who this course is for: