SVG ettevalmistamine veebis kasutamiseks on väga lihtne protsess, mis pole keerulisem kui JPEG või PNG eksportimine. Kasutage mis tahes teile tuttavat graafikaredaktorit (Illustrator, Sketch, Inkscape [tasuta] jne [või isegi Photoshop, kui kasutate kujukihte]) pildi suuruses, mida kavatsete kasutada. Tavaliselt töötan Illustratoris, seega selgitan mõningaid viise, kuidas selles programmis faile ette valmistada, kuid üldiselt kehtivad need kõigi programmide kohta. Võib-olla soovite teisendada oma teksti kõverateks, kuna font renderdatakse tõenäoliselt valesti, välja arvatud juhul, kui plaanite neid kujundada lehel kasutatava veebifondiga (mis on võimalik!). Samuti ei ole hea mõte teisendada kõiki objekte üksikuteks kujunditeks, eriti kui teil on tõmbeid, mida tuleb lehel manipuleerida, eriti kuna objektide teisendamine ei vähenda sageli faili suurust. Kõik rühmadele või kihtidele määratud nimed lisatakse SVG-sse elemendi ID-na. See on stiili jaoks üsna mugav, kuid suurendab üldine suurus faili.
Enne eksportimist peate kontrollima, et kõik pildid oleksid täisarvulises pikslivõrgus (st näiteks mitte 23,3 × 86,8 pikslit). Vastasel juhul ei ole pildil tõenäoliselt piisavalt selgust ja osa pildist lõigatakse ära. Illustratoris saab seda teha järgmiselt: Object > Artboards > Fit to Artwork Bounds. Seejärel klõpsake nuppu Salvesta nimega ja valige SVG ning jätke vaikeseaded. Siin saame natuke optimeerida, kuid see pole seda väärt, kuna kasutame hiljem erinevaid täiustamistehnikaid, nii et me ei raiska praegu nendele näpunäidetele aega.
Failide suuruse vähendamise nipid.
(Vt optimeerimist)
Väikseima SVG suuruse saavutamiseks oleks loogiline sealt kõik ebavajalik eemaldada. Kõige kuulsam ja kasulik programm(Autor vähemalt Arvan küll) SVG töötlemiseks on see SVGO . Ta eemaldab kõik nõutav kood. Aga! Olge selle programmi kasutamisel ettevaatlik, kui kavatsete SVG-d CSS/JS-iga manipuleerida, kuna see võib koodi liiga palju puhastada, muutes edasised muudatused keeruliseks. SVGO on mugav ka selle poolest, et seda saab kaasata automaatsesse projekti koostamise protsessi, aga saab ka kasutada GUI kui tahad.
Täpsemalt mõistmine koos õige eemaldamine kõik ebavajalik, saame teha midagi muud graafiline redaktor. Kõigepealt peate veenduma, et kasutate võimalikult vähe teid/kujundeid ja ka nendel teedel olevaid punkte. Saate kombineerida ja lihtsustada kõike, mida saab lihtsustada, ja kõik kustutada mittevajalikud punktid. Illustratoril on VectorScribe'i pistikprogramm Smart Remove Brush Tooliga, mis aitab teil punkte eemaldada ja siiski lahkuda üldine kuju sama.
Esialgne optimeerimine
Smart Remove Brush Tool eemaldas punktid
Järgmisena suurendame pilti. Illustratoris on mugav piksliruudustikuga sisse lülitada Vaade > Pikslite eelvaade ja kontrollida, kuidas piirjooned on paigutatud. Kontuuride ruudustikule asetamine võtab veidi aega, kuid vaev tasub end ära ja tulemuseks on teravam renderdus (parim on sellele eelnevalt tähelepanu pöörata).
Punktid võrgust väljas
Joondage ruudustikuga
Kui joondada on kaks või enam objekti, siis tasub eemaldada kõik mittevajalikud kattumised. Mõnikord võib isegi siis, kui kontuurid on hoolikalt joondatud, näha õhuke valge joon. Selle vältimiseks võite objektid veidi kattuda, kus need kattuvad. Tähtis: SVG-s on z-indeksil kindel järjestus, mis oleneb allolevast objektist, seega tasub ülemine objekt koodis paigutada faili alla.
Ja lõpuks, kõige lõpuks unustatakse tavaliselt ära lubada oma saidil SVG-vormingus gzip-pakkimine failis .htaccess.
AddType image/svg+xml svg svgz
Näitena, kui tõhus see tehnika on, võtan algse Breaking Bordersi logo ja optimeerin seda järgmiselt: suurendage suurust selleni, mis see peaks olema; Panen kontuurid järjekorda; Kustutan nii palju punkte kui võimalik; liigutada punkte täisarvu pikslite kaupa; Teisaldan kõik kattuvad alad ja saadan kõik SVGO-sse.
Originaal: 1.413b
Pärast optimeerimist: 409b
Selle tulemusena muutus faili suurus ~71% väiksemaks (ja kokkusurumisel ~83% väiksemaks)
Tänapäeval on SVG-animatsiooni loomiseks rohkem kui üks viis. Seda saab teha sildi abil, mis sisestatakse otse SVG-koodi. On olemas spetsiaalsed teegid, nagu Snap.svg või SVG.js.
Vaatame veidi teistsugust lähenemist: tekstisisese SVG (SVG-kood otse HTML-is) ja animatsiooni kasutamine üksikud osad otse CSS-i kaudu.
Katsetasin seda meetodit hiljuti oma alma mater Wufoo projektis, et värskendada siin käsitletavat teemat.
Ma pole oma viimastes projektides SVG-d eriti kasutanud, seega arvan, et see artikkel on suurepärane võimalus sellele rohkem tähelepanu pöörata.
Lõplik animatsiooni välimus on väga lihtne. See näeb välja järgmine:
Vaata CodePenis
Vaatame, kuidas seda tehakse.
1. Koostage nimekiri elementidest, mida me kasutame
Võib tunduda, et siin on öökulli joonistamisega palju tööd, kuid see artikkel räägib animatsioonist, nii et tegeleme graafikaga nii kiiresti kui võimalik.
Minu plaan oli teha ülilihtne Wufoo reklaam, kasutades nende klassikalist logo, värve ja ettevõtte stiil. Ja siis lisage veidi loovust:
- Looge efekt, et tähed jooksevad lehelt välja. Wufoo on lõbus sõna, olgu tähed ka lõbusad;
- Päev varem disainisime T-särgi, mille ees on dinosaurus ja taga kiri: “ Kiire. Nutikas. Groznõi" Need on omadused, mida jagavad nii dinosaurused kui ka Wufoo. Rääkimata sellest, et mängisime sõna "FORMidble" (hirmutav). Nii et ma tahtsin panna need sõnad animatsiooniplokis ilmuma ja kaduma;
- Nende sõnade ühendamiseks dinosaurusega laseme T-Rexi pea ilmuda ja seejärel kiiresti kaduda. See kuvab sõna "Kiire", mis on elementide jaoks veel üks huvitav link.
- Laadisin kõik need elemendid Illustratorisse:
Pange tähele, kuidas on välja toodud logo ja loosungi tekstid. See tähendab, et need on lihtsalt vektorkujud ja neile saab hõlpsasti efekte rakendada nii SVG-s kui ka sees
Tekst, mida näete, on "Kiire. ” jääb Illustratorisse tekstivormingus.
Kui salvestan faili Illustratoris, jääb kiri elemendiks.
2. Salvestage SVG-vormingus
Illustrator toetab SVG-vormingus salvestamist:
Saate selle SVG-faili avada koodiredaktoris ja näha selles olevat SVG-koodi:
3. Puhastage SVG ja määrake kujundite klassid
Selle optimeerimiseks ja puhastamiseks saate koodi käivitada SVGO kaudu mittevajalikud elemendid tüüpi DOCTYPE jms.
Kuid meie jaoks on praegu olulisem anda kujunditele erinevad klassinimed, et saaksime neid CSS-is valida ja erinevaid asju teha!
4. Sisestage SVG
Saate selle SVG-koodi kopeerida ja kleepida otse HTML-i, kuhu soovite ploki kuvada. Kuid see on lihtsalt primitiivne mall.
Saate teha midagi sellist:
5. Animatsioon!
Nüüd juhitakse kõik need kujundid DOM-i ja me saame neid paigutada ja stiile määrata nagu iga teine HTML element. Teeme seda.
Oletame, et tahame kasutada 10-sekundilist ajaskaala:
Esimesed sõnad kukuvad välja ja kaovad
Esimese asjana tahame printida sõnad " Kiire. Nutikas. Groznõi.» Iga sõna kuvatakse ühe sekundi jooksul.
Nii loome animatsiooni, milles iga sõna võtab 10% ajast:
@keyframes peidushow ( 0% ( läbipaistmatus: 1; ) 10% ( läbipaistmatus: 1; ) 15% ( läbipaistmatus: 0; ) 100% ( läbipaistmatus: 0; ) )
Seejärel märgime esimese sõna ja kogu animatsiooni kestuse 10 sekundit (millest 10% on 1 sekund):
Text-1 (animatsioon: peidushow 10s lihtne lõpmatu; )
Järgmised kaks sõna peidetakse esmalt (läbipaistmatus: 0; ) ja seejärel kasutame sama animatsiooni, ainult viivitusega, et järgmised sõnad ilmuksid veidi hiljem:
Tekst-2 ( läbipaistmatus: 0; animatsioon: peidushow 10s 1,5 s kergendab lõpmatut; ) .text-3 ( läbipaistmatus: 0; animatsioon: peidushow 10s 3s lihtne lõpmatu; )
Iga järgmise sõna väljundi vahelise intervalli määramiseks on vaja veel 0,5 sekundit.
Hüppavad tähed
Kui oleme selle elemendi jaoks animatsiooni määranud, jätkame sõna Wufoo tähtede efektidega, mis peaksid hüppama järgmiselt küljele:
Siin on trikk selles, et me loome animatsiooniefekt, mis kestab vaid 5 sekundit, kuid jookseme selle korra edasi ja siis vastupidises suunas.
Seega vastab see meie 10 sekundi diagrammile ja asub ajaskaala keskel. Peame vaid määrama animatsiooniefekti ühes suunas kerimise parameetrid, sest millal vastupidine kerimine see lihtsalt naaseb oma algsesse asendisse.
Iga tähe efektidel on väike viivitus, seega ei liigu need kõik korraga, vaid üksteise järel:
Wufoo-täht ( animatsioon: kaboom 5s lihtne alternatiiv lõpmatu; &:nth-child(2) ( animatsiooni viivitus: 0,1 s; ) &:nth-child(3) ( animatsiooni viivitus: 0,2 s; ) &:nth- laps(4) ( animatsiooni viivitus: 0,3 s; ) &:nth-child(5) ( animatsiooni viivitus: 0,4 s; ) ) @keyframes kaboom ( 90% ( teisendus: skaala(1,0); ) 100% ( teisendus : skaala(1,1);
Ülaltoodud SCSS-kood on vaid lühike versioon, see ei sisalda eesliiteid (mida te praktikas vajate).
Arvan, et animatsiooni viivitus on omadus, mida oleks kasulik algsest CSS-ist võtta. See näeks korralikum välja, kui tähed liiguvad väikese hilinemisega.
Ja lõpuks dinosaurus
Pärast seda, kui need pealdised üle ploki vilkuvad, kerkib alt välja dinosauruse pea. Vaatamata sellele, et dinosauruse kuju koosneb suur kogus elemendid, saame need kõik koos positsioneerida, kasutades positsioneerimissildi (rühma), mis sisaldab kõiki neid elemente.
Kuna animatsiooni positsioneerimiseks on tõhusam kasutada teisendusi, teeme seda võtmekaadrite abil:
@keyframes hüpikaken ( 0% ( teisendus: translateY(150px); ) 34% ( teisendus: translateY(20px); ) 37% ( teisendus: translateY(150px); ) 100% ( teisendus: translateY(150px); ) )
Soovime, et seda animatsiooni kuvataks umbes 3 sekundi jooksul. See tsükkel töötab tegelikult kogu 10 sekundi jooksul, kuid tegelikke nähtavaid efekte näete viimase 3 sekundi jooksul.
Kui efektis rakendatakse translateY(150px), liigub dinosaurus kastist nii kaugele alla, et te ei näe seda.
Kuid 37% selle animatsiooni ajast (umbes 3 sekundit) näete teda aeglaselt üles liikumas ja seejärel kiiresti alla tagasi liikumas.
Animatsiooni rakendamisel veendume, et:
- Dinosaurus on alguses peidetud;
- Selle animatsioonifragmendi väljund on ajaliselt hilinenud, nii et see algab kohe pärast seda, kui logosõna tähed on oma tantsu lõpetanud (nad on nihkunud küljele ja naasnud oma kohale).
Trex (teisendus: translateY(150px); animatsioon: hüpikaknad 10s 6,5s lihtsus lõpmatu;)
Dinosaurus kukub maha just viimasel sekundil, nii et kohe pärast seda ilmub plokki uuesti sõna "Kiire" (animatsiooni taasesituse intervall on seatud lõpmatuks, nii et see jookseb ikka ja jälle ringi). See lisab lõbusat sünergiat.
6. Plokist klikitava/interaktiivse reklaami tegemine
Üks neist kasulikud funktsioonid SVG on võime skaleerida objekte mis tahes suurusesse ilma kvaliteeti kaotamata.
Inline SVG kasti loomiseks, säilitades samal ajal piltide algse kvaliteedi, saame kasutada vana polsterdatud kasti tehnikat.
.wufoo-ad-wrap ( kõrgus: 0; polsterdus-ülaosa: 100%; asend: suhteline; ) .wufoo-reklaam ( asukoht: absoluutne; ülemine: 0; vasak: 0; laius: 100%; kõrgus: 100%; )Idee seisneb selles, et "ümbris" võtab selle laiuse põhjal alati ruudu kuju. Siis küsime absoluutväärtused SVG positsioonid selle täiusliku ruudu sees, mille mõõtmeid reguleeritakse laiuse järgi.
Kuna see on reklaam (mis peab loomulikult olema klikitav), siis selle asemel, et see sisaldaks konteinerit