Kuandaa SVG kwa matumizi kwenye wavuti ni mchakato rahisi sana, sio ngumu zaidi kuliko kusafirisha JPEG au PNG. Tumia kihariri chochote cha michoro unachokifahamu (Kielelezo, Mchoro, Inkscape [bila malipo], n.k. [au hata Photoshop ikiwa unatumia safu za umbo]) katika saizi ya picha unayopanga kutumia. Kawaida mimi hufanya kazi katika Illustrator, kwa hivyo nitaelezea baadhi ya njia za kuandaa faili katika programu hiyo, lakini kwa ujumla zinatumika kwa programu yoyote. Unaweza kutaka kubadilisha maandishi yako kuwa curves, kwani fonti itatoa uwezekano usio sahihi, isipokuwa ikiwa utapanga kuyapanga kwa fonti ya wavuti inayotumika kwenye ukurasa (ambayo inawezekana!). Pia sio wazo nzuri kubadilisha vitu vyote kuwa maumbo moja, haswa ikiwa una viboko ambavyo vitahitaji kubadilishwa kwenye ukurasa, haswa kwani kubadilisha vitu mara nyingi hakupunguzi saizi ya faili. Majina yoyote yaliyogawiwa kwa vikundi au tabaka yataongezwa kwenye SVG kama kitambulisho cha kipengele. Hii ni rahisi kabisa kwa styling, lakini itaongeza saizi ya jumla faili.
Kabla ya kuhamisha, unahitaji kuangalia kwamba picha zote ziko kwenye gridi ya pikseli kamili (yaani, kwa mfano si 23.3px × 86.8px). Vinginevyo, uwezekano mkubwa wa picha haitakuwa na uwazi wa kutosha na sehemu ya picha itakatwa. Katika Kielelezo hii inaweza kufanywa kama ifuatavyo: Kitu > Ubao wa Sanaa > Inafaa kwa Mipaka ya Sanaa. Kisha bofya hifadhi kama na uchague SVG, na uache mipangilio chaguo-msingi. Kuna uboreshaji kidogo tunaoweza kufanya hapa, lakini haifai kwa kuwa tutakuwa tukitumia mbinu mbalimbali za uboreshaji baadaye, kwa hivyo hatutapoteza muda kwenye marekebisho hayo kwa sasa.
Mbinu za kupunguza ukubwa wa faili.
(Angalia uboreshaji)
Ili kufikia ukubwa mdogo wa SVG, itakuwa busara kuondoa kila kitu kisichohitajika kutoka kwake. Maarufu zaidi na programu muhimu(Na angalau Nadhani hivyo) kwa usindikaji SVG ni SVGO . Yeye huondoa yote kanuni inayohitajika. Lakini! Kuwa mwangalifu unapotumia programu hii ikiwa unapanga kudhibiti SVG ukitumia CSS/JS, kwani inaweza kusafisha msimbo kupita kiasi, na kufanya mabadiliko yajayo kuwa magumu. Urahisi mwingine wa SVGO ni kwamba inaweza kujumuishwa katika mchakato wa kujenga mradi kiotomatiki, lakini pia unaweza kutumia. GUI ukitaka.
Kuelewa kwa undani zaidi na kuondolewa kwa usahihi kila kitu kisichohitajika, tunaweza kufanya kitu kingine ndani mhariri wa picha. Kwanza unahitaji kuhakikisha kuwa unatumia njia / maumbo machache iwezekanavyo, pamoja na vidokezo kwenye njia hizo. Unaweza kuchanganya na kurahisisha kila kitu ambacho kinaweza kurahisishwa, na kufuta kila kitu pointi zisizo za lazima. Illustrator ina programu-jalizi ya VectorScribe yenye Zana ya Brashi ya Kuondoa Mahiri, ambayo itakusaidia kuondoa pointi na bado kuondoka. sura ya jumla Sawa.
Uboreshaji wa awali
Zana ya Smart Ondoa Brashi imeondolewa pointi
Ifuatayo, tutapanua picha. Katika Illustrator, ni rahisi kuwasha Tazama > Onyesho la Kuchungulia la Pixel kwa gridi ya pikseli na uangalie jinsi muhtasari umewekwa. Itachukua muda kidogo kuweka muhtasari kwenye gridi ya taifa, lakini jitihada zitalipa na kusababisha utoaji safi (ni bora kulipa kipaumbele kwa hili mapema).
Alama nje ya gridi ya taifa
Pangilia kwenye Gridi
Ikiwa kuna vitu viwili au zaidi vya kusawazisha, basi inafaa kuondoa miingiliano yote isiyo ya lazima. Wakati mwingine, hata ikiwa contours ni iliyokaa kwa uangalifu, mstari mwembamba mweupe unaweza kuonekana. Ili kuzuia hili, unaweza kuingiliana kidogo vitu ambako vinaingiliana. Muhimu: katika SVG, z-index ina utaratibu fulani, ambayo inategemea kitu hapa chini, hivyo ni thamani ya kuweka kitu cha juu chini ya faili katika kanuni.
Na hatimaye, mwisho lakini sio uchache, kitu ambacho husahaulika ni kuwezesha ukandamizaji wa gzip wa SVG kwenye tovuti yako katika faili ya .htaccess.
AddType image/svg+xml svg svgz
Kama mfano wa jinsi mbinu hii inavyofaa, nitachukua nembo ya awali ya Kuvunja Mipaka na kuiboresha kwa njia hii: ongeza ukubwa kwa inavyopaswa kuwa; Nitaweka mtaro kwa mpangilio; Nitafuta pointi nyingi iwezekanavyo; songa pointi kwa saizi kamili; Nitahamisha maeneo yote yanayoingiliana na kutuma yote kwa SVGO.
Asili: 1.413b
Baada ya uboreshaji: 409b
Kama matokeo, saizi ya faili ikawa ~ 71% ndogo (na ~ 83% ndogo wakati imebanwa)
Leo, kuna zaidi ya njia moja ya kuunda uhuishaji wa SVG. Hii inaweza kufanywa kwa kutumia tepe ambayo imeingizwa moja kwa moja kwenye msimbo wa SVG. Kuna maktaba maalum kama vile Snap.svg au SVG.js.
Tutaangalia mbinu tofauti kidogo: kutumia SVG ya ndani (msimbo wa SVG moja kwa moja kwenye HTML) na uhuishaji. sehemu za mtu binafsi moja kwa moja kupitia CSS.
Hivi majuzi nilijaribu njia hii, katika mradi wa alma mater Wufoo, kama kiburudisho kidogo juu ya mada ambayo tutakuwa tunashughulikia hapa.
Sijatumia SVG sana katika miradi yangu ya hivi majuzi, kwa hivyo nadhani nakala hii ni fursa nzuri ya kuipa kipaumbele zaidi.
Mwonekano wa mwisho wa uhuishaji ni rahisi sana. Hivi ndivyo inavyoonekana:
Tazama kwenye CodePen
Hebu tuangalie jinsi hii inafanywa.
1. Tengeneza orodha ya vipengele ambavyo tutatumia
Inaweza kuonekana kuwa kuna kazi nyingi hapa kwa namna ya kuteka bundi, lakini makala hii ni kuhusu uhuishaji, kwa hiyo hebu tushughulike na graphics haraka iwezekanavyo.
Mpango wangu ulikuwa kutengeneza tangazo rahisi sana la Wufoo kwa kutumia nembo yao ya kawaida, rangi na mtindo wa ushirika. Na kisha ongeza ubunifu kidogo:
- Unda athari kwamba herufi zinatoka kwenye ukurasa. Wufoo ni neno la kufurahisha, acha herufi ziwe za kufurahisha pia;
- Siku moja kabla, tulitengeneza fulana yenye dinosaur mbele na maneno nyuma: “ Haraka. Smart. Grozny" Hizi ni sifa ambazo dinosaurs na Wufoo hushiriki. Bila kutaja ukweli kwamba tulicheza kwenye neno "FORMidble" (ya kutisha). Kwa hivyo nilitaka kufanya maneno haya yaonekane na kutoweka kwenye kizuizi cha uhuishaji;
- Ili kuunganisha maneno haya na dinosaur, tutakuwa na kichwa cha T-Rex kuonekana na kisha kutoweka haraka. Hii itaonyesha neno "Haraka", ambalo litakuwa kiungo kingine cha kuvutia kwa vipengele.
- Nilipakia vitu hivi vyote kwenye Illustrator:
Angalia jinsi maandishi ya nembo na kauli mbiu yameainishwa. Hii inamaanisha kuwa ni maumbo ya vekta tu, na athari zinaweza kutumika kwao kwa urahisi, katika SVG na ndani
Maandishi unayoyaona ni “Haraka. ” inasalia katika Illustrator katika umbizo la maandishi.
Ninapohifadhi faili kwenye Illustrator, uandishi utabaki kuwa kitu.
2. Hifadhi katika umbizo la SVG
Illustrator inasaidia kuhifadhi kama SVG:
Unaweza kufungua faili hii ya SVG katika kihariri cha msimbo na uone msimbo wa SVG ndani yake:
3. Safisha SVG na uweke madarasa ya maumbo
Unaweza kuendesha nambari kupitia SVGO ili kuiboresha na kuisafisha vipengele visivyohitajika chapa DOCTYPE na kadhalika.
Lakini kilicho muhimu zaidi kwetu sasa ni kuyapa maumbo majina tofauti ya darasa ili tuyateue katika CSS na kufanya mambo tofauti!
4. Weka SVG
Unaweza kunakili msimbo huu wa SVG na ubandike moja kwa moja kwenye HTML ambapo ungependa kizuizi kionekane. Lakini hii ni kiolezo cha primitive.
Unaweza kufanya kitu kama hiki:
5. Uhuishaji!
Sasa maumbo haya yote yanaendeshwa kwenye DOM, na tunaweza kuyaweka na kuweka mitindo kama nyingine yoyote Kipengele cha HTML. Hebu tufanye hivyo.
Wacha tuseme tunataka kutumia kalenda ya matukio ya sekunde 10:
Maneno ya kwanza huanguka na kutoweka
Jambo la kwanza tunataka kufanya ni kuchapisha maneno " Haraka. Smart. Grozny.»Kila neno litaonyeshwa kwa sekunde moja.
Hivi ndivyo tunavyounda uhuishaji ambapo kila neno huchukua 10% ya muda:
@keyframes hideshow ( 0% ( opacity: 1; ) 10% ( opacity: 1; ) 15% ( opacity: 0; ) 100% ( opacity: 0; ) )
Kisha tunataja neno la kwanza na muda wa uhuishaji wote kwa sekunde 10 (10% ambayo ni sekunde 1):
Maandishi-1 ( uhuishaji: Ficha onyesho la miaka 10 urahisi usio na kikomo; )
Maneno mawili yafuatayo yatafichwa kwanza (opacity: 0; ), na kisha tutatumia uhuishaji sawa, tu kwa kuchelewa kwa muda, ili maneno yafuatayo yataonekana baadaye kidogo:
Maandishi-2 ( opacity: 0; uhuishaji: hideshow 10s 1.5s urahisi infinite; ) .text-3 ( opacity: 0; uhuishaji: hideshow 10s 3s urahisi infinite;)
Sekunde 0.5 za ziada zinahitajika ili kuweka muda kati ya matokeo ya kila neno linalofuata.
Kuruka barua
Mara tu tukiweka uhuishaji wa kipengele hiki, tunaendelea na athari kwa herufi katika neno Wufoo, ambayo inapaswa kuruka kando kama hii:
Ujanja hapa ni kwamba tunaunda athari ya uhuishaji, ambayo huchukua sekunde 5 tu, lakini tunaiendesha mbele mara moja na kisha kwa mwelekeo tofauti.
Kwa hivyo italingana na chati yetu ya sekunde 10, na itapatikana katikati ya kalenda ya matukio. Tunachopaswa kufanya ni kuweka vigezo vya kusogeza athari ya uhuishaji katika mwelekeo mmoja, kwa sababu lini kusongesha nyuma itarudi tu kwenye nafasi yake ya awali.
Athari za kila herufi zina kucheleweshwa kwa muda kidogo, kwa hivyo hazisogei zote kwa wakati mmoja, lakini moja baada ya nyingine:
Wufoo-herufi ( uhuishaji: kaboom 5s kurahisisha mbadala usio na kikomo; &:nth-child(2) ( kucheleweshwa kwa uhuishaji: 0.1s; ) &:nth-child(3) ( kucheleweshwa kwa uhuishaji: 0.2s; ) &:nth- mtoto(4) ( kucheleweshwa kwa uhuishaji: 0.3s; ) &:nth-child(5) ( kucheleweshwa kwa uhuishaji: 0.4s; ) ) @keyframes kaboom ( 90% ( badilisha: mizani(1.0); ) 100% ( badilisha : kipimo(1.1);))
Nambari ya SCSS hapo juu ni toleo fupi tu, haijumuishi viambishi awali (ambavyo utahitaji katika mazoezi).
Nadhani ucheleweshaji wa uhuishaji ni mali ambayo inaweza kuwa muhimu kuchukua kutoka kwa CSS asili. Ingeonekana nadhifu zaidi wakati herufi zinasogea kwa kuchelewa kidogo.
Na hatimaye, dinosaur
Baada ya maandishi haya kuangaza kwenye kizuizi, kichwa cha dinosaur hutoka chini. Licha ya ukweli kwamba takwimu ya dinosaur inajumuisha kiasi kikubwa vipengele, tunaweza kuziweka zote pamoja kwa kutumia lebo ya kuweka (kikundi), ambayo ina vipengele hivi vyote.
Kwa kuwa ni bora zaidi kutumia mabadiliko ili kuweka uhuishaji, tutafanya hivi kwa kutumia keyframes :
@keyframes ibukizi ( 0% ( badilisha: translateY(150px); ) 34% ( badilisha: translateY(20px); ) 37% ( badilisha: translateY(150px); ) 100% ( badilisha: translateY(150px); ) )
Tunataka uhuishaji huu uonyeshwe katika "mwisho" takriban sekunde 3. Mzunguko huu hufanya kazi kwa sekunde 10 nzima, lakini utaona athari halisi zinazoonekana wakati wa sekunde 3 za mwisho.
Wakati translateY(150px) inatumika katika athari, dinosaur husogea chini sana nje ya kisanduku hivi kwamba huwezi kuiona.
Lakini kwa 37% ya muda wa uhuishaji huu (kama sekunde 3) unamwona akienda juu polepole na kisha kurudi chini haraka.
Tunapotumia uhuishaji huu tutahakikisha kwamba:
- Dinosaur imefichwa mwanzoni;
- Pato la kipande hiki cha uhuishaji hucheleweshwa kwa wakati, kwa hivyo huanza mara baada ya herufi katika neno la nembo kumaliza densi yao (wamehamia kando na kurudi mahali pao).
Trex ( badilisha: translateY(150px); uhuishaji: ibukizi 10s 6.5s urahisi usio na kikomo;)
Dinoso huanguka chini sekunde ya mwisho ili neno "Haraka" lionekane tena kwenye kizuizi (muda wa uchezaji wa uhuishaji umewekwa kuwa usio na mwisho ili uendeshe kwenye mduara tena na tena). Inaongeza harambee ya kufurahisha.
6. Kufanya kizuizi kuwa tangazo linaloweza kubofya/ingiliana
Moja ya vipengele muhimu SVG ni uwezo wa kuongeza vitu kwa saizi yoyote bila kupoteza ubora.
Ili kuunda kisanduku cha SVG cha ndani huku tukidumisha ubora asili wa picha, tunaweza kutumia mbinu ya kisanduku cha ol'.
.wufoo-ad-wrap ( urefu: 0; padding-top: 100%; nafasi: jamaa; ) .wufoo-ad ( nafasi: kabisa; juu: 0; kushoto: 0; upana: 100%; urefu: 100%; )Wazo ni kwamba "wrapper" daima itachukua sura ya mraba, kulingana na upana wake. Kisha tunauliza maadili kamili Nafasi za SVG ndani ya mraba huu mzuri, vipimo ambavyo vinarekebishwa kulingana na upana.
Kwa kuwa hili ni tangazo (ambalo, bila shaka, linahitaji kubofya), basi kama chombo kilicho na, badala ya