Videozáznamy z videa 2025, Apríl

Ďakujeme za sledovanie všetkých, to pre mňa a pre tento web znamená všetko. Tento blogový príspevok predstavuje obrovský zoznam zdrojov pre všetko, čomu sme sa v tejto sérii venovali. “

Keď použijete vložený riadok, všetky prvky sa nachádzajú v DOM, rovnako ako s a s a akýkoľvek iný prvok HTML. Ak máte SVG ako: a máte: var rect = "

V tejto ukážke sa ponoríme do článku Léonie Watsonovej o prístupnom SVG a v podstate ho prejdeme bod po bode. Teší ma, že prvý bod “

Strávili sme veľa času rozhovormi o použití inline a prvku. Môžete si zostaviť ikonový systém, ktorý má množstvo výhod. Môžete vytvoriť

S programom SVG môžete robiť veľa bez akéhokoľvek softvéru. Za predpokladu, že máte dobrý zdroj obrázkov SVG online, môžete ich použiť priamo. Ale"

JavaScript je posledný zo spôsobov, ako sa budeme venovať animácii SVG. Pozreli sme sa na CSS, ktoré je skvelé a celkom pohodlné, ale nedokáže množstvo súborov SVG. “

Koncept orezávania a maskovania je dosť jednoduchý. Skryť určité časti prvkov a ukázať ďalšie. Skutočný rozdiel medzi nimi je dosť jednoduchý “

Možno ste už počuli o filtroch CSS? Môžete ich použiť na ľubovoľný prvok z CSS, napríklad: .apply-css-filter (-webkit-filter: v odtieňoch šedej (0,5); filter: "

Pravdepodobne na to nie je mimoriadne veľký prípad použitia, okrem zrejmého: okrem iného potrebujete rastrovú grafiku vo väčšom prevedení SVG. “

Môže prísť deň, kedy si želáte, aby grafika, ktorú ste mali, bola SVG, ale máte ju iba v rastri, napríklad GIF, JPG.webp alebo PNG. V tomto videu sa pozrieme na príklad „

Populárnou technikou animácie SVG je kreslenie ciest. Ak si to neviete predstaviť, tu je zbierka niekoľkých príkladov, ktoré som vytvoril. V podstate „

V SVG je prvok. Žiadne veľké prekvapenie: slúži na vkladanie textu do SVG. Nie obrysy tvarov písmen (aj keď to môžete urobiť tiež), ale „

Toto je vec trochu ezoterická, len som to raz potreboval urobiť sám a bolo mi to mätúce, takže som si myslel, že k tomu urobím celé video. Vec je,"

Video bolo z tohto videa odstránené. Raz to čoskoro znova natočím. Ak toto čítate a zatiaľ som to neurobil, pokojne ma kontaktujte a bugujte ma “

Tento tip sa uplatňuje, iba ak máte program Adobe Illustrator CC (Creative Cloud). Potvrdil som, že to v tom funguje, alebo ešte novší CC 2014. Je to také jednoduché, ako sa dá “

Aj keď by pre priemerného front-enda mohla byť animácia SVG pomocou CSS pohodlnejšia, SVG má iný spôsob, ako integrovať animáciu priamo do SVG. “

Keď použijete vložený SVG, všetok ten SVG kód je priamo v HTML, a teda v DOM. Môžete ich upravovať rovnako ako v prípade iných formátov HTML alebo iných HTML. “

Dozvedeli sme sa, že obmedzením použitia na vloženie časti SVG je to, že nemôžete písať zložené selektory CSS, ktoré by to ovplyvnili. Napríklad: To „

Pojem „nástroj na zostavenie“ môže byť strašidelný. Pripomína efektné nástroje príkazového riadku vyžadujúce konfiguráciu a podivné systémové závislosti, ktoré sa zlomia, keď „

Inline SVG je možné „štylizovať“ v tom zmysle, že už má výplne a ťahy a čo už druhý vložíte na stránku. To je úžasné a úplne "

Weby s fotografickými fotografiami majú vždy spôsob, ako filtrovať výsledky vyhľadávania podľa „vektora“. A pamätajte, bez ohľadu na to, aký formát získate, keď niečo stiahnete. “

Dozvedeli sme sa, že nástroje na zostavenie sú obzvlášť úžasné pri úlohách, ako je premena priečinka plného súborov SVG na blok chýb SVG. Ako je to vždy v prípade „

S našimi zostavovacími nástrojmi sa určite môžeme trochu zblázniť. V čase uverejnenia tohto príspevku je plagátovým potomkom nástrojov na vytváranie nástrojov Grunt. Sú konkurenti, “

Keď už máme to, čo nazývame náš „blok defs“ SVG - ten kúsok SVG, ktorý definuje všetky veci, ktoré chceme nakresliť neskôr - kam to máme dať? Takže “

Prvkom je spojka s celou touto myšlienkou integrovaného systému ikon SVG. Dozvedeli sme sa, že čistý spôsob, ako to urobiť, je dať všetko, čo mienite nakresliť neskôr “

Umiestnenie bloku SVG defs do hornej časti dokumentu určite funguje. Má tiež určité výhody, napríklad skutočnosť, že nie je potrebné zadávať žiadnu požiadavku HTTP, “

SVG má veľmi chladný a výkonný prvok, ktorý sa volá. Je to koncepčne dosť jednoduché. Nájde ďalší bit SVG kódu, na ktorý odkazuje ID, a naklonuje ho cez "

Pokryli sme „vložený SVG“ - ktorý vynecháva syntax SVG priamo do HTML. Rovnaký vložený SVG môžete použiť aj na iných miestach, napríklad v alebo

Pamätajte, že všetko, čo sa dá dostať do SVG. Softvér Adobe je v tomto skvelý. V PDF môžu byť vektorové veci - stačí otvoriť PDF a vy „

Projekt podstatných mien je (veľmi) fantastické miesto, odkiaľ môžete získať SVG. Poďme spočítať spôsoby, ako Doslova všetko v SVG skutočne ide tak, “