Video screencasts 2025, Veljača

Hvala što ste gledali sve, meni i ovoj stranici znači sve. Ovaj post na blogu ogroman je popis resursa za sve što smo obradili u ovoj seriji "

Kada koristite ugrađeni, svi su elementi u DOM-u, baš kao i s i s i bilo koji drugi HTML element. Ako imate SVG poput: a imate: var rect = "

U ovom screencast-u istražujemo članak Léonie Watson o pristupačnom SVG-u i u osnovi ga prolazimo točku po točku. Uživam u prvoj točki "

Proveli smo puno vremena razgovarajući o korištenju inlinea i elementa. Možete izgraditi sustav ikona s onim koji obiluje prednostima. Možete stvoriti "

Sa SVG-om možete učiniti puno bez ikakvog softvera. Pod pretpostavkom da imate dobar izvor SVG slika na mreži, mogli biste ih koristiti izravno. Ali"

JavaScript je posljednji način na koji ćemo se pobrinuti za animiranje SVG-a. Pogledali smo CSS, koji je sjajan i prilično udoban, ali ne može napraviti više SVG-a "

Koncept izrezivanja i maskiranja prilično je jednostavan. Sakrij određene dijelove elemenata i prikaži druge. Stvarna razlika među njima prilično je jednostavna "

Možda ste čuli za CSS filtre? Možete ih primijeniti na bilo koji element iz CSS-a, poput: .apply-css-filter (-webkit-filter: sivih tonova (0.5); filter: "

Vjerojatno za to ne postoji strahovito velik slučaj korištenja, osim očitog: trebate rastersku grafiku, između ostalog u većem SVG dizajnu. "

Možda dođe dan kada poželite da vam je slika SVG, ali imate je samo u rasteru, poput GIF-a, JPG.webp-a ili PNG-a. U ovom videu pogledamo primjer "

Popularna mala SVG animacijska tehnika je crtanje puta. Ako to ne možete zamisliti, evo zbirke od milijun primjera koje sam stvorio. U osnovi "

Postoji element u SVG-u. Ovdje nema velikog iznenađenja: to je za stavljanje teksta u SVG. Ne obrisi oblika slova (iako i to možete učiniti), ali "

Ovo je pomalo ezoterično, samo sam to jednom trebao učiniti i učinilo me zbunjujućim pa sam pomislio da ću o tome snimiti cijeli video. Stvar je,"

Video je uklonjen na ovom. Uskoro ću ga ponovno snimiti. Ako ovo čitate, a ja to još nisam učinio, slobodno me kontaktirajte i prijavite mi "

Ovaj se savjet odnosi samo ako imate Adobe Illustrator CC (Creative Cloud). Potvrdio sam da to djeluje u tome, ili još noviji CC 2014. Najjednostavnije je što može "

Iako bi animiranje SVG-a s CSS-om moglo biti ugodnije za prosječnu front-end osobu, SVG ima još jedan način na koji animacija može biti ugrađena točno u SVG "

Kada koristite ugrađeni SVG, sav taj SVG kôd nalazi se točno u HTML-u, a time i u DOM-u. Možete ih oblikovati baš kao što biste to učinili, ili bilo koji drugi HTML "

Saznali smo da je ograničenje upotrebe za umetanje malo SVG-a to što ne možete pisati složene CSS selektore koji utječu na njih. Na primjer:

Izraz "alat za izgradnju" mogao bi biti zastrašujući. Na pamet padaju otmjeni alati naredbenog retka koji zahtijevaju konfiguraciju i čudne sistemske ovisnosti koje se prekidaju kada "

Inline SVG može se "oblikovati" u smislu da već ima ispune i poteze i što je drugo kad ga stavite na stranicu. To je strašno i potpuno "

Web stranice s stock fotografijom uvijek mogu filtrirati rezultate pretraživanja prema "vektoru". I zapamtite, bez obzira koji format dobijete kad nešto preuzmete "

Saznali smo da su alati za izradu posebno sjajni za zadatke poput pretvaranja mape pune SVG-ova u SVG defs blok. Kao što je uvijek slučaj u "

Definitivno možemo postati malo nervozniji s našim alatima za izgradnju. U vrijeme objavljivanja ovoga, podređeno dijete alata za izradu je Grunt. Postoje konkurenti, "

Jednom kad imamo ono što nazivamo našim "defs blokom" SVG-a - onim dijelom SVG-a koji definira sve stvari koje želimo crtati kasnije - kamo ga stavljamo? Tako"

Element je spoj cijele ove ideje o ugrađenom sustavu ikona SVG. Saznali smo da je čisti način da to stavite kasnije sve što namjeravate nacrtati "

Staviti taj SVG defs blok na vrh dokumenta definitivno djeluje. Ima i neke prednosti, poput činjenice da nijedan HTTP zahtjev nije potreban, "

SVG ima vrlo cool i moćan element tzv. Koncept je prilično jednostavan. Pronalazi još jedan bit SVG koda na koji se poziva ID i klonira ga "

Pokrili smo "inline SVG" - koji ispušta SVG sintaksu pravo u HTML. Taj isti ugrađeni SVG možete koristiti i na drugim mjestima, na primjer u ili "

Zapamtite da sve vektore koje možete dobiti u SVG. Adobe softver je sjajan u ovome. U PDF-u mogu biti vektorske stvari - samo otvorite PDF i vidjet ćete "

Noun Project je (vrlo) fantastično mjesto za dobivanje SVG-a. Prebrojimo načine Doslovno sve u SVG-u i zapravo tako dolazi. Oni su "