Video Screencasts 2025, April

Takk for at du ser på alle, det betyr alt for meg og dette nettstedet. Dette blogginnlegget er en enorm liste over ressurser for alt vi dekket i denne serien "

Når du bruker innebygd, er alle elementene i DOM, akkurat som s og s og ethvert annet HTML-element. Hvis du har SVG som: og du har: var rect = "

I denne skjermsendingen graver vi i Léonie Watsons artikkel om tilgjengelig SVG og går i det vesentlige gjennom punkt for punkt. Jeg liker det første punktet "

Vi har brukt mye tid på å snakke om å bruke inline og elementet. Du kan bygge et ikon-system med det som er full av fordeler. Du kan opprette "

Det er mye du kan gjøre med SVG uten programvare i det hele tatt. Forutsatt at du har en god kilde til SVG-bilder på nettet, kan du bruke dem direkte. Men"

JavaScript er den siste måten vi skal dekke på animering av SVG. Vi så på CSS, som er flott og ganske behagelig, men det kan ikke gjøre mange SVG "

Konseptet med klipping og maskering er ganske enkelt. Skjul visse deler av elementene og vis andre. Den faktiske forskjellen mellom dem er ganske enkel "

Kanskje du har hørt om CSS-filtre? Du kan bruke dem ved å gjøre hvilket som helst element fra CSS, som: .apply-css-filter (-webkit-filter: grayscale (0.5); filter: "

Det er sannsynligvis ikke et enormt stort bruksområde for dette, annet enn det åpenbare: du trenger en rastergrafikk blant annet i et større SVG-design. "

Det kan komme en dag der du ønsker at en grafikk du hadde var SVG, men du har den bare i raster, som GIF, JPG.webp eller PNG. I denne videoen ser vi på et eksempel "

En populær liten SVG-animasjonsteknikk er banetegning. Hvis du ikke kan forestille deg det, er det en samling av zillion eksempler jeg har laget. I hovedsak "

Det er et element i SVG. Ingen stor overraskelse her: det er for å sette tekst i SVG. Ikke konturer av bokstaver (selv om du også kan gjøre det) men "

Dette er litt esoterisk av noe, jeg trengte bare å gjøre det selv en gang og syntes det var forvirrende, så jeg trodde jeg skulle gjøre en hel video på den. Tingen er,"

Videoen ble fjernet på denne. Jeg skyter den en gang snart. Hvis du leser dette og jeg ikke har gjort det ennå, kan du gjerne kontakte meg og bugge meg "

Dette tipset gjelder bare hvis du har Adobe Illustrator CC (Creative Cloud). Jeg bekreftet at det fungerer i det, eller enda nyere CC 2014. Det er så enkelt som mulig "

Selv om animasjon av SVG med CSS kan være mer behagelig for den gjennomsnittlige frontpersonen, har SVG en annen måte å gjøre animasjoner innebygd rett inn i SVG "

Når du bruker innebygd SVG, er all den SVG-koden riktig i HTML-en, og dermed i DOM. Du kan style dem akkurat som du ville, eller hvilken som helst annen HTML "

Vi lærte at en begrensning for å bruke for å sette inn litt SVG er at du ikke kan skrive sammensatte CSS-velgere som påvirker derfra. For eksempel: At "

Begrepet "byggeverktøy" kan være skummelt. Det tenker på fancy kommandolinjeverktøy som krever konfigurasjon og rare systemavhengigheter som bryter når du "

Inline SVG kan "styles" i den forstand at den allerede har fyll og strøk og hva ikke det andre du setter den på siden. Det er kjempebra og en helt "

Arkivfotograferingssider har alltid en måte å filtrere søkeresultatene på "vektor". Og husk, uansett hvilket format du får når du laster ned noe "

Vi har lært at byggeverktøy er spesielt kjempebra for oppgaver som å gjøre en mappe full av SVG-er til en SVG-defs-blokk. Som alltid er tilfelle i "

Vi kan definitivt bli litt nerdier med byggeverktøyene våre. På tidspunktet for utgivelsen av dette er plakatbarnet til byggverktøyene Grunt. Det er konkurrenter, "

Når vi har det vi kaller vår "defs block" av SVG - den delen av SVG som definerer alle ting vi vil tegne senere - hvor legger vi den? Så"

Elementet er kobling til hele ideen om et innebygd SVG-ikonsystem. Vi lærte at en ren måte å gjøre det på er å sette alt du har tenkt å tegne senere "

Å sette den SVG defs-blokken øverst i dokumentet fungerer definitivt. Det har også noen fordeler, som det faktum at det ikke trenger å komme noen HTTP-forespørsel, "

SVG har et veldig kult og kraftig element som heter. Det er ganske enkelt i konseptet. Den finner en annen bit SVG-kode, referert til av ID, og ​​kloner den over "

Vi har dekket "innebygd SVG" - som slipper SVG-syntaksen rett inn i HTML. Du kan også bruke den samme innebygde SVGen andre steder, som i en eller "

Husk at hvilken som helst vektor du kan få inn i SVG. Adobe-programvare er flott på dette. Det kan være vektor ting i en PDF - bare åpne PDF og du vil "

Navnprosjektet er et (veldig) fantastisk sted å hente SVG fra. La oss telle måtene Bokstavelig talt alt i SVG og faktisk kommer på den måten De er "