Screencast video 2025, Luglio

Grazie per aver guardato tutti, significa tutto per me e questo sito. Questo post del blog è un enorme elenco di risorse per tutto ciò di cui abbiamo parlato in questa serie "

Quando si utilizza inline, tutti gli elementi sono nel DOM, proprio come se se qualsiasi altro elemento HTML. Se hai SVG come: e lo fai: var rect = "

In questo screencast approfondiamo l'articolo di Léonie Watson sugli SVG accessibili e lo analizziamo punto per punto. Mi piace il primo punto "

Abbiamo passato molto tempo a parlare dell'utilizzo di inline e dell'elemento. Puoi costruire un sistema di icone con quello pieno di vantaggi. Puoi creare "

C'è molto che puoi fare con SVG senza alcun software. Supponendo che tu abbia una buona fonte di immagini SVG online, potresti usarle direttamente. Ma"

JavaScript è l'ultimo dei modi in cui tratteremo l'animazione di SVG. Abbiamo esaminato i CSS, che sono ottimi e abbastanza comodi, ma non possono eseguire molti SVG "

Il concetto di ritaglio e mascheramento è piuttosto semplice. Nascondi alcune parti degli elementi e mostrane altre. La differenza effettiva tra loro è piuttosto semplice "

Forse hai sentito parlare dei filtri CSS? Puoi applicarli con qualsiasi elemento CSS, come: .apply-css-filter (-webkit-filter: grayscale (0.5); filter: "

Probabilmente non c'è un caso d'uso tremendamente enorme per questo, a parte l'ovvio: hai bisogno di una grafica raster tra le altre cose in un design SVG più grande ".

Potrebbe venire un giorno in cui desideri che un elemento grafico che hai fosse SVG, ma lo hai solo in formato raster, come GIF, JPG.webp o PNG. In questo video guardiamo un esempio "

Una piccola tecnica di animazione SVG popolare è il disegno del percorso. Se non riesci a immaginarlo, ecco una raccolta di un'infinità di esempi che ho creato. Essenzialmente il "

C'è un elemento in SVG. Nessuna grande sorpresa qui: è per inserire del testo nell'SVG. Non contorni di forme di lettere (anche se puoi farlo anche tu) ma "

Questa è una cosa un po 'esoterica, avevo solo bisogno di farlo da solo una volta e l'ho trovato confuso, quindi ho pensato di fare un intero video su di esso. La cosa è,"

Il video è stato rimosso su questo. Un giorno lo riprenderò di nuovo presto. Se stai leggendo questo e non l'ho ancora fatto, non esitare a contattarmi e infastidirmi "

Questo suggerimento si applica solo se hai Adobe Illustrator CC (Creative Cloud). Ho confermato che funziona in quello, o nell'ancora più recente CC 2014. È il più semplice possibile "

Anche se l'animazione di SVG con CSS potrebbe essere più comoda per la persona media front-end, SVG ha un altro modo di fare l'animazione incorporata direttamente nell'SVG "

Quando usi SVG inline, tutto il codice SVG è proprio nell'HTML, e quindi nel DOM. Puoi modellarli proprio come faresti con un, o qualsiasi altro HTML "

Abbiamo appreso che una limitazione dell'utilizzo per inserire un po 'di SVG è che non è possibile scrivere selettori CSS composti che influiscono su di essi. Ad esempio: "

Il termine "strumento di costruzione" potrebbe essere spaventoso. Ricorda fantasiosi strumenti da riga di comando che richiedono configurazione e strane dipendenze di sistema che si interrompono quando "

Inline SVG può essere "stilizzato" nel senso che ha già riempimenti e tratti e quant'altro non appena lo metti nella pagina. È fantastico e totalmente "

I siti di fotografia di stock hanno sempre un modo per filtrare i risultati della ricerca per "vettore". E ricorda, indipendentemente dal formato che ottieni quando scarichi qualcosa "

Abbiamo imparato che gli strumenti di compilazione sono particolarmente fantastici per attività come trasformare una cartella piena di SVG in un blocco di definizioni SVG. Come sempre accade in "

Possiamo sicuramente diventare un po 'più nerd con i nostri strumenti di costruzione. Al momento della pubblicazione di questo messaggio, il poster secondario degli strumenti di costruzione è Grunt. Ci sono concorrenti "

Una volta che abbiamo quello che chiamiamo il nostro "blocco defs" di SVG - quel pezzo di SVG che definisce tutte le cose che vogliamo disegnare in seguito - dove lo mettiamo? Così"

L'elemento è legato a questa idea di un sistema di icone SVG in linea. Abbiamo imparato che un modo pulito per farlo è mettere tutto ciò che intendi disegnare in seguito "

Mettere quel blocco SVG defs nella parte superiore del documento funziona decisamente. Presenta anche alcuni vantaggi, come il fatto che non è necessario effettuare alcuna richiesta HTTP ",

SVG ha un elemento molto interessante e potente chiamato. È piuttosto semplice nel concetto. Trova un altro bit di codice SVG, referenziato dall'ID, e lo clona "

Abbiamo coperto "SVG inline", che sta trasferendo la sintassi SVG direttamente in HTML. Puoi utilizzare lo stesso SVG in linea anche in altri luoghi, come in un "

Ricorda che qualsiasi cosa vettoriale puoi inserire in SVG. Il software Adobe è ottimo in questo. Potrebbero esserci elementi vettoriali in un PDF: apri semplicemente il PDF e "

The Noun Project è un posto (molto) fantastico da cui ottenere SVG. Contiamo i modi in cui tutto letteralmente in SVG e in realtà viene in questo modo.