Video Screencasts 2025, September

Tak for at se alle, det betyder alt for mig og dette websted. Dette blogindlæg er en enorm liste over ressourcer til alt, hvad vi dækkede i denne serie "

Når du bruger inline, er alle elementerne i DOM, ligesom s og s og ethvert andet HTML-element. Hvis du har SVG-lignende: og du har: var rect = "

I denne screencast graver vi i Léonie Watsons artikel alt om tilgængelig SVG og gennemgår det i det væsentlige punkt for punkt. Jeg nyder at det første punkt "

Vi har brugt meget tid på at tale om at bruge inline og elementet. Du kan opbygge et ikon-system med det, der er rig på fordele. Du kan oprette "

Der er masser, du kan gøre med SVG uden software overhovedet. Forudsat at du har en god kilde til SVG-billeder online, kan du bruge dem direkte. Men"

JavaScript er den sidste af måderne vi dækker på animering af SVG. Vi kiggede på CSS, som er fantastisk og ret behageligt, men det kan ikke gøre et antal SVG "

Begrebet klipning og maskering er ret simpelt. Skjul bestemte dele af elementer og vis andre. Den faktiske forskel mellem dem er ret enkel "

Måske har du hørt om CSS-filtre? Du kan anvende dem ved hjælp af ethvert element fra CSS, som: .apply-css-filter (-webkit-filter: grayscale (0.5); filter: "

Der er sandsynligvis ikke et enormt stort brugssag til dette, bortset fra det åbenlyse: du har brug for en rastergrafik blandt andet i et større SVG-design. "

Der kan komme en dag, hvor du ønsker, at en grafik, du havde, var SVG, men du har den kun i raster, som GIF, JPG.webp eller PNG. I denne video ser vi på et eksempel "

En populær lille SVG-animationsteknik er stegtegning. Hvis du ikke kan forestille dig det, er her en samling af zillion eksempler, jeg har oprettet. I det væsentlige "

Der er et element i SVG. Ingen stor overraskelse her: det er at sætte tekst i SVG. Ikke konturer af bogstaver (selvom du også kan gøre det) men "

Dette er lidt esoterisk af en ting, jeg var bare nødt til at gøre det selv en gang og fandt det forvirrende, så jeg troede, jeg ville lave en hel video på det. Tingen er,"

Videoen blev fjernet på denne. Jeg skyder det igen en dag snart. Hvis du læser dette, og jeg ikke har gjort det endnu, er du velkommen til at kontakte mig og bugge mig "

Dette tip gælder kun, hvis du har Adobe Illustrator CC (Creative Cloud). Jeg bekræftede, at det fungerer i det eller den endnu nyere CC 2014. Det er så simpelt som muligt "

Selvom animation af SVG med CSS måske er mere behagelig for den gennemsnitlige front-end person, har SVG en anden måde at gøre animation indbygget lige i SVG "

Når du bruger indbygget SVG, er al den SVG-kode rigtig i HTML og dermed i DOM. Du kan style dem ligesom du ville have en, eller enhver anden HTML "

Vi lærte, at en begrænsning for at indsætte en smule SVG er, at du ikke kan skrive sammensatte CSS-vælgere, der påvirker der igennem. For eksempel: At "

Udtrykket "byggeværktøj" kan være skræmmende. Det tænker på smarte kommandolinjeværktøjer, der kræver konfiguration og underlige systemafhængigheder, der bryder, når du "

Inline SVG kan "styles" i den forstand, at det allerede har udfyldninger og strøg, og hvad ikke det andet du lægger det på siden. Det er fantastisk og en helt "

Stockfotograferingssider har altid en måde at filtrere søgeresultaterne på "vektor". Og husk, uanset hvilket format du får, når du downloader noget "

Vi har lært, at byggeværktøjer er særligt fantastiske til opgaver som at omdanne en mappe fuld af SVG'er til en SVG-defs-blok. Som det altid er tilfældet i "

Vi kan helt sikkert blive lidt nørdere med vores byggeværktøjer. På tidspunktet for udstationering af dette er plakatbarnet til byggeværktøjer Grunt. Der er konkurrenter, "

Når vi først har det, vi kalder vores "defs-blok" af SVG - det stykke SVG, der definerer alle de ting, vi vil tegne senere - hvor sætter vi det? Så"

Elementet er kobling til hele denne idé om et indbygget SVG-ikonsystem. Vi lærte, at en ren måde at gøre det på er at sætte alt, hvad du agter at tegne senere "

At sætte den SVG defs-blok øverst i dokumentet fungerer helt sikkert. Det har også nogle fordele, som det faktum, at der ikke skal foretages nogen HTTP-anmodning, "

SVG har et meget cool og kraftfuldt element kaldet. Det er ret simpelt i konceptet. Den finder en anden bit SVG-kode, der refereres til af ID, og ​​kloner den over "

Vi har dækket "inline SVG" - som slipper SVG-syntaksen lige ind i HTML. Du kan også bruge den samme indbyggede SVG andre steder, som i en eller "

Husk, at enhver vektor, du kan komme ind i SVG. Adobe-software er fantastisk til dette. Der kan være vektor ting i en PDF - bare åbn PDF'en og du vil "

Navnprojektet er et (meget) fantastisk sted at få SVG fra. Lad os tælle måder Bogstaveligt talt alt i SVG og kommer faktisk på den måde. De er "