Video Screencasts 2025, September

Tack för att du tittade på alla, det betyder allt för mig och den här webbplatsen. Det här blogginlägget är en enorm lista med resurser för allt vi täckte i den här serien "

När du använder inline finns alla element i DOM, precis som s och s och alla andra HTML-element. Om du har SVG som: och du har: var rect = "

I den här screencast gräver vi in ​​i Léonie Watsons artikel om tillgänglig SVG och går i huvudsak igenom den punkt för punkt. Jag tycker att den första punkten "

Vi har tillbringat mycket tid på att prata om att använda inline och elementet. Du kan bygga ett ikonsystem med det som är full av fördelar. Du kan skapa "

Det finns mycket du kan göra med SVG utan någon programvara alls. Förutsatt att du har en bra källa till SVG-bilder online kan du använda dem direkt. Men"

JavaScript är det sista sättet vi kommer att täcka på att animera SVG. Vi tittade på CSS, vilket är bra och ganska bekvämt, men det kan inte göra ett antal SVG "

Begreppet klippning och maskering är ganska enkelt. Dölj vissa delar av element och visa andra. Den faktiska skillnaden mellan dem är ganska enkel "

Kanske har du hört talas om CSS-filter? Du kan använda dem genom att göra vilket element som helst från CSS, som: .apply-css-filter (-webkit-filter: gråskala (0,5); filter: "

Det finns förmodligen inte ett oerhört stort användningsfall för detta, förutom det uppenbara: du behöver en rastergrafik bland annat i en större SVG-design. "

Det kan komma en dag där du önskar att en grafik du hade var SVG, men du har den bara i raster, som GIF, JPG.webp eller PNG. I den här videon tittar vi på ett exempel "

En populär liten SVG-animationsteknik är banritning. Om du inte kan föreställa dig det, här är en samling av zillionsexempel jag har skapat. I huvudsak "

Det finns ett element i SVG. Ingen stor överraskning här: det är för att lägga in text i SVG. Inte konturer av bokstäver (även om du kan göra det också) utan "

Det här är lite esoteriskt, jag behövde bara göra det själv en gång och tyckte det var förvirrande så jag trodde att jag skulle göra en hel video på den. Saken är den,"

Videon togs bort på den här. Jag ska skjuta det igen snart. Om du läser detta och jag inte har gjort det än är du välkommen att kontakta mig och bugga mig "

Detta tips gäller endast om du har Adobe Illustrator CC (Creative Cloud). Jag bekräftade att det fungerar i det, eller ännu nyare CC 2014. Det är så enkelt som möjligt "

Även om animering av SVG med CSS kan vara bekvämare för den genomsnittliga frontpersonen, har SVG ett annat sätt att göra animering inbyggd direkt i SVG "

När du använder inbyggd SVG är all den SVG-koden rätt i HTML och därmed i DOM. Du kan utforma dem precis som du skulle göra en, eller någon annan HTML "

Vi lärde oss att en begränsning av att använda för att infoga lite SVG är att du inte kan skriva sammansatta CSS-väljare som påverkar därigenom. Till exempel: Att "

Uttrycket "byggverktyg" kan vara läskigt. Det kommer att tänka på fina kommandoradsverktyg som kräver konfiguration och konstiga systemberoenden som går sönder när du "

Inline SVG kan "stylas" i den meningen att det redan har fyllningar och streck och vad inte det andra du lägger på sidan. Det är fantastiskt och en helt "

Fotograferingssajter har alltid ett sätt att filtrera sökresultat efter "vektor". Och kom ihåg, oavsett vilket format du får när du laddar ner något "

Vi har lärt oss att byggverktyg är särskilt fantastiska för uppgifter som att förvandla en mapp full av SVG till ett SVG-defs-block. Som alltid är fallet i "

Vi kan definitivt bli lite nördigare med våra byggverktyg. Vid tidpunkten för publicering av detta är affischbarnet för byggverktyg Grunt. Det finns konkurrenter, "

När vi väl har det som vi kallar vårt "defs block" av SVG - den biten av SVG som definierar alla saker vi vill rita senare - var lägger vi det? Så"

Elementet är koppling till hela idén om ett inbyggt SVG-ikonsystem. Vi lärde oss att ett rent sätt att göra det är att lägga allt du tänker rita senare "

Att sätta SVG-defs-blocket högst upp i dokumentet fungerar definitivt. Det har också några fördelar, som det faktum att ingen HTTP-begäran behöver göras, "

SVG har ett mycket coolt och kraftfullt element som heter. Det är ganska enkelt i konceptet. Den hittar en annan bit SVG-kod, refererad till ID, och klonerar den över "

Vi har täckt "inline SVG" - som släpper SVG-syntaxen direkt till HTML. Du kan också använda samma inbyggda SVG på andra platser, som i en eller "

Kom ihåg att vad som helst vektor du kan komma in i SVG. Adobes programvara är bra på detta. Det kan finnas vektorgrafik i en PDF - bara öppna PDF-filen så kommer du "

Noun-projektet är en (mycket) fantastisk plats att få SVG från. Låt oss räkna vägar Bokstavligen allt i SVG och kommer faktiskt på det sättet De är "