SVG:n valmisteleminen käytettäväksi verkossa on hyvin yksinkertainen prosessi, ei sen monimutkaisempi kuin JPEG- tai PNG-tiedostojen vieminen. Käytä mitä tahansa sinulle tuttua grafiikkaeditoria (Illustrator, Sketch, Inkscape [ilmainen] jne. [tai jopa Photoshop, jos käytät muotokerroksia]) siinä kuvakoossa, jota aiot käyttää. Työskentelen yleensä Illustratorissa, joten selitän joitakin tapoja valmistella tiedostoja kyseisessä ohjelmassa, mutta ne koskevat yleensä kaikkia ohjelmia. Haluat ehkä muuntaa tekstisi käyriksi, koska kirjasin hahmottuu todennäköisesti väärin, ellet aio muotoilla niitä sivulla käytetyllä verkkokirjasimella (mikä on mahdollista!). Ei myöskään ole hyvä idea muuntaa kaikkia objekteja yksittäisiksi muodoiksi, varsinkin jos sinulla on viivoja, joita on käsiteltävä sivulla, varsinkin kun objektien muuntaminen ei usein pienennä tiedostokokoa. Ryhmille tai tasoille määritetyt nimet lisätään SVG:hen elementtitunnuksena. Tämä on varsin kätevä muotoiluun, mutta lisää kokonaiskoko tiedosto.
Ennen vientiä sinun on tarkistettava, että kaikki kuvat ovat kokonaislukupikseliruudukossa (eli eivät esimerkiksi 23,3 pikseliä × 86,8 pikseliä). Muuten kuva ei todennäköisesti ole tarpeeksi selkeä ja osa kuvasta leikataan pois. Illustratorissa tämä voidaan tehdä seuraavasti: Object > Artboards > Fit to Artwork Bounds. Napsauta sitten Tallenna nimellä ja valitse SVG ja jätä oletusasetukset. Tässä voidaan tehdä vähän optimointia, mutta se ei todellakaan ole sen arvoista, koska tulemme käyttämään erilaisia parannustekniikoita myöhemmin, joten emme tuhlaa aikaa noihin säätöihin toistaiseksi.
Temppuja tiedostokoon pienentämiseen.
(Katso optimointi)
Pienimmän SVG-koon saavuttamiseksi olisi loogista poistaa siitä kaikki tarpeeton. Tunnetuin ja hyödyllinen ohjelma(Kirjoittaja vähintään Luulen niin) SVG:n käsittelyyn se on SVGO. Hän poistaa kaikki vaadittu koodi. Mutta! Ole varovainen käyttäessäsi tätä ohjelmaa, jos aiot käsitellä SVG:tä CSS/JS:n kanssa, koska se voi puhdistaa koodia liikaa ja vaikeuttaa tulevia muutoksia. Toinen SVGO:n mukavuus on, että se voidaan sisällyttää projektin automaattiseen rakentamisprosessiin, mutta voit myös käyttää GUI jos haluat.
Ymmärtäminen tarkemmin kanssa oikea poisto kaikki tarpeeton, voimme tehdä jotain muuta graafinen editori. Ensin sinun on varmistettava, että käytät mahdollisimman vähän polkuja/muotoja sekä pisteitä näillä poluilla. Voit yhdistää ja yksinkertaistaa kaiken, mitä voidaan yksinkertaistaa, ja poistaa kaiken tarpeettomia pisteitä. Illustratorissa on VectorScribe-laajennus Smart Remove Brush Tool -työkalulla, jonka avulla voit poistaa pisteitä ja silti lähteä yleinen muoto sama.
Alustava optimointi
Smart Remove Brush Tool poisti pisteet
Seuraavaksi suurennamme kuvaa. Illustratorissa on kätevää ottaa käyttöön Näytä > Pikselien esikatselu pikseliruudukon avulla ja tarkistaa, miten ääriviivat on sijoitettu. Ääriviivojen asettaminen ruudukolle vie vähän aikaa, mutta vaivannäö maksaa itsensä takaisin ja tuloksena on puhtaampi renderöinti (on parasta kiinnittää huomiota etukäteen).
Osoittaa ruudukosta
Kohdista ruudukkoon
Jos kohdistettavia kohteita on kaksi tai useampia, kannattaa poistaa kaikki tarpeettomat päällekkäisyydet. Joskus, vaikka ääriviivat olisi kohdistettu huolellisesti, ohut valkoinen viiva voi olla näkyvissä. Tämän estämiseksi voit mennä hieman päällekkäin kohteissa, joissa ne ovat päällekkäin. Tärkeää: SVG:ssä z-indeksillä on tietty järjestys, joka riippuu alla olevasta objektista, joten ylin objekti kannattaa sijoittaa koodissa tiedoston alaosaan.
Ja lopuksi, viimeisenä muttei vähäisimpänä, asia, joka yleensä unohdetaan, on ottaa käyttöön SVG:n gzip-pakkaus sivustossasi .htaccess-tiedostossa.
AddType image/svg+xml svg svgz
Esimerkkinä tämän tekniikan tehokkuudesta otan alkuperäisen Breaking Borders -logon ja optimoin sen seuraavasti: suurenna kokoa siihen, mikä sen pitäisi olla; Laitan ääriviivat järjestykseen; Poistan niin monta kohtaa kuin mahdollista; siirtää pisteitä kokonaislukupikseleillä; Siirrän kaikki päällekkäiset alueet ja lähetän ne kaikki SVGO:lle.
Alkuperäinen: 1.413b
Optimoinnin jälkeen: 409b
Tämän seurauksena tiedostokoko pieneni ~71 % (ja ~83 % pienempi pakattuna)
Nykyään on olemassa useampi kuin yksi tapa luoda SVG-animaatioita. Tämä voidaan tehdä käyttämällä tunnistetta, joka lisätään suoraan SVG-koodiin. On olemassa erityiskirjastoja, kuten Snap.svg tai SVG.js.
Tarkastellaan hieman erilaista lähestymistapaa: inline SVG:n (SVG-koodi suoraan HTML:ssä) ja animaation käyttäminen yksittäisiä osia suoraan CSS:n kautta.
Kokeilin tätä menetelmää äskettäin alma mater Wufoo -projektissani hieman virkistyksenä aiheesta, jota käsittelemme täällä.
En ole käyttänyt SVG:tä juurikaan viimeaikaisissa projekteissani, joten mielestäni tämä artikkeli on loistava tilaisuus kiinnittää siihen enemmän huomiota.
Lopullinen animaation ulkoasu on hyvin yksinkertainen. Tältä se näyttää:
Katso CodePenissä
Katsotaanpa, miten tämä tehdään.
1. Tee luettelo elementeistä, joita käytämme
Saattaa tuntua, että täällä on paljon työtä pöllön piirtämisessä, mutta tämä artikkeli käsittelee animaatiota, joten käsitellään grafiikkaa mahdollisimman nopeasti.
Suunnitelmani oli tehdä super yksinkertainen Wufoo-mainos käyttämällä heidän klassista logoaan, värejä ja yritystyyli. Ja sitten lisää vähän luovuutta:
- Luo vaikutelma, että kirjaimet juoksevat pois sivulta. Wufoo on hauska sana, olkoon myös kirjaimet hauskoja;
- Suunnittelimme edellisenä päivänä T-paidan, jonka edessä oli dinosaurus ja takana teksti: “ Nopeasti. Älykäs. Grozny" Nämä ovat ominaisuuksia, jotka jakavat sekä dinosaurukset että Wufoo. Puhumattakaan siitä, että soitimme sanalla "FORMidble" (hirveä). Joten halusin saada nämä sanat näkyviin ja katoamaan animaatiolohkossa;
- Yhdistääksemme nämä sanat dinosaurukseen, saamme T-Rexin pään näkyviin ja katoamaan nopeasti. Tämä näyttää sanan "Fast", joka on toinen mielenkiintoinen linkki elementeille.
- Latasin kaikki nämä elementit Illustratoriin:
Huomaa, kuinka logo- ja iskulausetekstit on hahmoteltu. Tämä tarkoittaa, että ne ovat yksinkertaisesti vektorimuotoja, ja niihin voidaan helposti soveltaa tehosteita sekä SVG:ssä että sisään
Näkemäsi teksti on "Fast. ” jää Illustratoriin tekstimuodossa.
Kun tallennan tiedoston Illustratoriin, kirjaimet jäävät elementiksi.
2. Tallenna SVG-muodossa
Illustrator tukee tallentamista SVG-muodossa:
Voit avata tämän SVG-tiedoston koodieditorissa ja nähdä siinä olevan SVG-koodin:
3. Puhdista SVG ja aseta muodoille luokat
Voit suorittaa koodin SVGO:n kautta sen optimoimiseksi ja puhdistamiseksi tarpeettomia elementtejä tyyppi DOCTYPE ja vastaavat.
Mutta nyt meille on tärkeämpää antaa muodoille eri luokkien nimet, jotta voimme valita ne CSS:ssä ja tehdä erilaisia asioita!
4. Lisää SVG
Voit kopioida tämän SVG-koodin ja liittää sen suoraan HTML-koodiin, johon haluat lohkon näkyvän. Mutta tämä on vain primitiivinen malli.
Voit tehdä jotain näin:
5. Animaatio!
Nyt kaikki nämä muodot ohjataan DOM:iin, ja voimme sijoittaa ne ja asettaa tyylejä aivan kuten muutkin HTML-elementti. Tehdään tämä.
Oletetaan, että haluamme käyttää 10 sekunnin aikajanaa:
Ensimmäiset sanat putoavat ja katoavat
Ensimmäinen asia, jonka haluamme tehdä, on tulostaa sanat " Nopeasti. Älykäs. Grozny.» Jokainen sana näkyy yhden sekunnin ajan.
Näin luomme animaation, jossa jokainen sana vie 10 % ajasta:
@keyframes piiloesitys ( 0 % ( peittävyys: 1; ) 10 % ( peittävyys: 1; ) 15 % ( peittävyys: 0; ) 100 % ( peittävyys: 0; ) )
Sitten ilmoitamme ensimmäisen sanan ja koko animaation keston 10 sekuntia (josta 10 % on 1 sekunti):
Teksti-1 (animaatio: hideshow 10s helppous äärettömästi; )
Seuraavat kaksi sanaa piilotetaan ensin (opasiteetti: 0; ), ja sitten käytämme samaa animaatiota, vain viiveellä, jotta seuraavat sanat ilmestyvät hieman myöhemmin:
Teksti-2 ( peittävyys: 0; animaatio: piiloesitys 10s 1.5s helppous äärettömästi; ) .text-3 ( peittävyys: 0; animaatio: piiloesitys 10s 3s helppous ääretön; )
0,5 sekuntia tarvitaan lisäajan asettamiseen jokaisen seuraavan sanan tulosten välillä.
Hyppäävät kirjaimet
Kun olemme määrittäneet tämän elementin animaation, siirrymme sanan Wufoo kirjainten tehosteisiin, joiden pitäisi hypätä sivuun seuraavasti:
Temppu tässä on se, että me luomme animaatioefekti, joka kestää vain 5 sekuntia, mutta ajamme sen kerran eteenpäin ja sitten vastakkaiseen suuntaan.
Joten se vastaa 10 sekunnin kaavioamme ja sijoittuu aikajanan keskelle. Meidän tarvitsee vain asettaa parametrit animaatiotehosteen vierittämiseksi yhteen suuntaan, koska milloin käänteinen vieritys se yksinkertaisesti palaa alkuperäiseen asentoonsa.
Jokaisen kirjaimen tehosteilla on pieni aikaviive, joten ne eivät kaikki liiku samaan aikaan, vaan peräkkäin:
Wufoo-kirjain ( animaatio: kaboom 5s ease alternate infinite; &:nth-child(2) ( animaatio-viive: 0.1s; ) &:nth-child(3) ( animaatio-viive: 0.2s; ) &:nth- lapsi(4) ( animaatio-viive: 0,3 s; ) &:nth-child(5) ( animaatio-viive: 0,4 s; ) ) @keyframes kaboom ( 90% ( muunnos: skaala(1.0); ) 100% ( muunnos : mittakaava(1.1);
Yllä oleva SCSS-koodi on vain lyhyt versio, se ei sisällä etuliitteitä (jotka tarvitset käytännössä).
Mielestäni animaatioviive on ominaisuus, joka olisi hyödyllistä ottaa alkuperäisestä CSS:stä. Se näyttäisi siistimmältä, kun kirjaimet liikkuvat pienellä viiveellä.
Ja lopuksi dinosaurus
Kun nämä kirjoitukset välähtävät korttelin poikki, dinosauruksen pää ilmestyy alhaalta. Huolimatta siitä, että dinosaurushahmo koostuu suuri määrä elementtejä, voimme sijoittaa ne kaikki yhteen käyttämällä paikannustunnistetta (ryhmää), joka sisältää kaikki nämä elementit.
Koska on tehokkaampaa käyttää muunnoksia animaation sijoittamiseen, teemme tämän käyttämällä avainkehyksiä:
@keyframes ponnahdusikkuna ( 0% ( muunnos: translateY(150px); ) 34% ( muunnos: translateY(20px); ) 37% ( muunnos: translateY(150px); ) 100% ( muunnos: translateY(150px); ) )
Haluamme tämän animaation näkyvän "viimeisen" noin 3 sekunnin aikana. Tämä sykli toimii itse asiassa koko 10 sekunnin ajan, mutta näet todelliset näkyvät vaikutukset viimeisen 3 sekunnin aikana.
Kun translateY(150px) käytetään tehosteessa, dinosaurus siirtyy niin alas laatikon ulkopuolelle, että et näe sitä.
Mutta 37 % tämän animaation ajasta (noin 3 sekuntia) näet hänen liikkuvan hitaasti ylös ja sitten nopeasti takaisin alas.
Kun käytämme tätä animaatiota, varmistamme, että:
- Dinosaurus on ensin piilossa;
- Tämän animaatiofragmentin tulostaminen viivästyy ajallisesti, joten se alkaa heti logosanan kirjainten tanssimisen jälkeen (ne ovat siirtyneet sivuun ja palanneet paikoilleen).
Trex (muunnos: translateY(150px); animaatio: ponnahdusikkuna 10s 6,5s helppo ääretön; )
Dinosaurus putoaa alas juuri viimeisellä sekunnilla niin, että heti sen jälkeen lohkoon ilmestyy taas sana "Fast" (animaatioiden toistoväli on asetettu äärettömäksi, jotta se kulkee ympyrää yhä uudelleen ja uudelleen). Se lisää hauskaa synergiaa.
6. Lohkon tekeminen napsautettavaksi/interaktiiviseksi mainokseksi
Yksi niistä hyödyllisiä ominaisuuksia SVG on kyky skaalata objekteja mihin tahansa kokoon laadun heikkenemättä.
Voimme käyttää vanhaa pehmustettua laatikkotekniikkaa luodaksesi sisäänrakennetun SVG-laatikon säilyttäen samalla kuvien alkuperäisen laadun.
.wufoo-ad-wrap ( korkeus: 0; pehmuste-top: 100%; sijainti: suhteellinen; ) .wufoo-ad ( sijainti: absoluuttinen; ylhäällä: 0; vasen: 0; leveys: 100%; korkeus: 100%; )Ajatuksena on, että "kääre" on aina neliön muotoinen sen leveyden perusteella. Sitten kysytään absoluuttiset arvot SVG sijoittuu tässä täydellisessä neliössä, jonka mitat on säädetty leveyden mukaan.
Koska tämä on mainos (jonka on tietysti oltava napsautettava), se sisältää sen sijaan