SVG-ni internetdə istifadəyə hazırlamaq çox sadə prosesdir, JPEG və ya PNG-ni ixrac etməkdən daha mürəkkəb deyil. İstifadə etməyi planlaşdırdığınız şəkil ölçüsündə tanış olduğunuz qrafik redaktordan istifadə edin (Illustrator, Sketch, Inkscape [pulsuz] və s. [və ya hətta forma təbəqələrindən istifadə edirsinizsə Photoshop]). Mən adətən Illustrator proqramında işləyirəm, ona görə də həmin proqramda faylları hazırlamağın bəzi yollarını izah edəcəyəm, lakin onlar ümumiyyətlə istənilən proqrama aiddir. Mətninizi əyrilərə çevirmək istəyə bilərsiniz, çünki səhifədə istifadə olunan veb şriftlə üslub etməyi planlaşdırmasanız (bu mümkündür!). Bütün obyektləri tək formalara çevirmək də yaxşı fikir deyil, xüsusən də səhifədə manipulyasiya edilməli olan vuruşlarınız varsa, xüsusən də obyektləri çevirmək çox vaxt fayl ölçüsünü azaltmadığı üçün. Qruplara və ya təbəqələrə təyin edilmiş hər hansı adlar element ID kimi SVG-yə əlavə olunacaq. Bu üslub üçün olduqca rahatdır, lakin artıracaq ümumi ölçü fayl.
Eksport etməzdən əvvəl, bütün şəkillərin tam piksel şəbəkəsində olduğunu yoxlamaq lazımdır (yəni, məsələn, 23.3px × 86.8px deyil). Əks halda, çox güman ki, şəkil kifayət qədər aydınlığa malik olmayacaq və şəklin bir hissəsi kəsiləcək. Illustrator-da bunu aşağıdakı kimi etmək olar: Obyekt > İş lövhələri > İncəsənət İşi Sərhədlərinə Sığdır. Sonra "Farklı saxla" düyməsini basın və SVG-ni seçin və standart parametrləri tərk edin. Burada edə biləcəyimiz bir az optimallaşdırma var, lakin daha sonra müxtəlif təkmilləşdirmə üsullarından istifadə edəcəyimiz üçün bu, həqiqətən də buna dəyməz, ona görə də hələlik bu düzəlişlərə vaxt sərf etməyəcəyik.
Fayl ölçülərini azaltmaq üçün fəndlər.
(Optimallaşdırmaya baxın)
Ən kiçik SVG ölçüsünə nail olmaq üçün ondan lazımsız hər şeyi silmək məntiqli olardı. Ən məşhur və faydalı proqram(Tərəfindən ən azı Məncə) SVG-nin işlənməsi üçün SVGO-dur. Hamısını silir tələb olunan kod. Amma! SVG-ni CSS/JS ilə manipulyasiya etməyi planlaşdırırsınızsa, bu proqramı istifadə edərkən diqqətli olun, çünki o, kodu həddindən artıq təmizləyə və gələcək dəyişiklikləri çətinləşdirə bilər. SVGO-nun başqa bir rahatlığı ondan ibarətdir ki, o, avtomatik olaraq layihənin qurulması prosesinə daxil edilə bilər, lakin siz də istifadə edə bilərsiniz. GUIƏgər sən istəsən.
ilə daha ətraflı başa düşmək düzgün çıxarılması lazımsız hər şey, başqa bir şey edə bilərik qrafik redaktoru. Əvvəlcə mümkün qədər az yol/şəkil, eləcə də bu yollardakı nöqtələrdən istifadə etdiyinizə əmin olmalısınız. Sadələşdirilə bilən hər şeyi birləşdirə və sadələşdirə və hər şeyi silə bilərsiniz lazımsız nöqtələr. Illustrator-da Smart Sil Fırça Aləti ilə VectorScribe plagin var ki, bu da xalları silmək və yenə də tərk etməkdə kömək edəcək. ümumi forma Eyni.
İlkin optimallaşdırma
Ağıllı Sil Fırça Aləti xalları silin
Sonra şəkli böyüdəcəyik. Illustrator-da piksel şəbəkəsi ilə Görünüş > Pikselin Önizləməsini yandırmaq və konturların necə yerləşdirildiyini yoxlamaq rahatdır. Konturları şəbəkəyə yerləşdirmək bir az vaxt aparacaq, lakin səylər öz bəhrəsini verəcək və daha təmiz göstərmə ilə nəticələnəcək (əvvəlcədən buna diqqət yetirmək daha yaxşıdır).
Şəbəkədən kənar nöqtələr
Şəbəkəyə uyğunlaşdırın
Hizalanacaq iki və ya daha çox obyekt varsa, o zaman bütün lazımsız üst-üstə düşmələri aradan qaldırmağa dəyər. Bəzən konturlar diqqətlə hizalansa belə, nazik ağ xətt görünə bilər. Bunun qarşısını almaq üçün obyektlərin üst-üstə düşdüyü yerlərdə bir az üst-üstə düşə bilərsiniz. Əhəmiyyətli: SVG-də z-indeksinin müəyyən bir sırası var, bu, aşağıdakı obyektdən asılıdır, ona görə də yuxarıdakı obyekti kodda faylın aşağı hissəsində yerləşdirməyə dəyər.
Və nəhayət, nəhayət, ümumiyyətlə unudulan bir şey, .htaccess faylında saytınızda SVG-nin gzip sıxılmasını aktivləşdirməkdir.
AddType image/svg+xml svg svgz
Bu texnikanın nə qədər effektiv olduğuna misal olaraq, mən orijinal Breaking Borders loqosunu götürəcəyəm və onu bu şəkildə optimallaşdıracağam: ölçüsünü olmalıdır qədər artırın; konturları qaydasına salacağam; Mümkün qədər çox xal siləcəyəm; nöqtələri tam piksellərlə köçürün; Bütün üst-üstə düşən sahələri köçürəcəyəm və hamısını SVGO-ya göndərəcəyəm.
Orijinal: 1.413b
Optimallaşdırmadan sonra: 409b
Nəticədə, fayl ölçüsü ~ 71% kiçik oldu (və sıxılmış zaman ~ 83% kiçik)
Bu gün SVG animasiyasını yaratmağın birdən çox yolu var. Bu, birbaşa SVG koduna daxil edilən etiketdən istifadə etməklə edilə bilər. Snap.svg və ya SVG.js kimi xüsusi kitabxanalar var.
Biz bir az fərqli yanaşmaya baxacağıq: daxili SVG (SVG kodu birbaşa HTML-də) və animasiyadan istifadə fərdi hissələr birbaşa CSS vasitəsilə.
Mən bu yaxınlarda mənim alma mater Wufoo üçün bir layihədə bu metodu sınaqdan keçirdim, burada əhatə edəcəyimiz mövzuda bir az təkmilləşdirmə kimi.
Mən son layihələrimdə SVG-dən çox istifadə etməmişəm, ona görə də düşünürəm ki, bu məqalə ona daha çox diqqət yetirmək üçün əla fürsətdir.
Son animasiya görünüşü çox sadədir. Göründüyü kimi:
CodePen-də baxın
Bunun necə edildiyinə baxaq.
1. İstifadə edəcəyimiz elementlərin siyahısını tərtib edin
Görünə bilər ki, burada bayquşun necə çəkiləcəyi ilə bağlı çox iş var, amma bu məqalə animasiya haqqındadır, ona görə də qrafika ilə mümkün qədər tez məşğul olaq.
Planım onların klassik loqotipindən, rənglərindən və istifadə edərək super sadə Wufoo reklamı etmək idi korporativ üslub. Və sonra bir az yaradıcılıq əlavə edin:
- Hərflərin səhifədən çıxması effekti yaradın. Wufoo əyləncəli sözdür, hərflər də əyləncəli olsun;
- Bir gün əvvəl ön tərəfində dinozavr, arxasında isə sözləri olan köynək hazırladıq: “ Tez. Ağıllı. Qroznı" Bunlar həm dinozavrların, həm də Wufoo-nun paylaşdığı xüsusiyyətlərdir. “FORMidble” (möhtəşəm) sözü ilə oynadığımızı demirəm. Ona görə də bu sözlərin animasiya blokunda görünüb yox olmasını istədim;
- Bu sözləri dinozavrla əlaqələndirmək üçün T-Reksin başı görünəcək və sonra tez yox olacaq. Bu, elementlər üçün başqa bir maraqlı keçid olacaq "Sürətli" sözünü göstərəcək.
- Bütün bu elementləri Illustrator-a yüklədim:
Loqo və şüar mətnlərinin necə təsvir olunduğuna diqqət yetirin. Bu o deməkdir ki, onlar sadəcə vektor formalarıdır və effektlər həm SVG-də, həm də onlara asanlıqla tətbiq oluna bilər
Gördüyünüz mətn “Sürətli. ” mətn formatında Illustrator-da qalır.
Mən faylı Illustrator-da saxladığım zaman hərf element olaraq qalacaq.
2. SVG formatında yadda saxlayın
Illustrator SVG kimi saxlamağı dəstəkləyir:
Siz bu SVG faylını kod redaktorunda aça və içindəki SVG koduna baxa bilərsiniz:
3. SVG-ni təmizləyin və formalar üçün siniflər təyin edin
Siz kodu optimallaşdırmaq və təmizləmək üçün SVGO vasitəsilə işlədə bilərsiniz lazımsız elementlər DOCTYPE və s. yazın.
Amma indi bizim üçün daha vacib olan formalara müxtəlif sinif adları verməkdir ki, biz onları CSS-də seçə bilək və fərqli işlər görə bilək!
4. SVG daxil edin
Siz bu SVG kodunu kopyalaya və blokun görünməsini istədiyiniz yerə birbaşa HTML-yə yapışdıra bilərsiniz. Ancaq bu sadəcə primitiv bir şablondur.
Bu kimi bir şey edə bilərsiniz:
5. Animasiya!
İndi bütün bu formalar DOM-a daxil edilir və biz onları hər hansı digər kimi yerləşdirə və üslublar təyin edə bilərik HTML elementi. Gəl bunu edək.
Deyək ki, biz 10 saniyəlik qrafikdən istifadə etmək istəyirik:
İlk sözlər düşür və yox olur
Etmək istədiyimiz ilk şey sözləri çap etməkdir " Tez. Ağıllı. Qroznı.» Hər söz bir saniyə göstəriləcək.
Hər sözün vaxtın 10%-ni aldığı animasiyanı belə yaradırıq:
@keyframes gizlədir ( 0% ( qeyri-şəffaflıq: 1; ) 10% ( qeyri-şəffaflıq: 1; ) 15% ( qeyri-şəffaflıq: 0; ) 100% ( şəffaflıq: 0; ) )
Sonra ilk sözü və bütün animasiyanın müddətini 10 saniyəyə təyin edirik (bunun 10%-i 1 saniyədir):
Mətn-1 (animasiya: 10s asanlığı sonsuz şəkildə gizlədir; )
Növbəti iki söz əvvəlcə gizlənəcək (şəffaflıq: 0; ) və sonra biz eyni animasiyadan istifadə edəcəyik, yalnız vaxt gecikməsi ilə, belə ki, növbəti sözlər bir az sonra görünəcək:
Mətn-2 (şəffaflıq: 0; animasiya: gizlətmə 10s 1.5s asanlıq sonsuz; ) .text-3 (şəffaflıq: 0; animasiya: gizlətmə 10s 3s asanlıq sonsuz; )
Hər növbəti sözün çıxışı arasındakı intervalı təyin etmək üçün əlavə 0,5 saniyə lazımdır.
Atlayan hərflər
Bu element üçün animasiya qurduqdan sonra Wufoo sözündəki hərflər üçün effektlərə keçirik ki, bu da bu şəkildə yan tərəfə keçməlidir:
Burada hiylə odur ki, biz yaradırıq animasiya effekti, bu yalnız 5 saniyə davam edir, lakin biz onu bir dəfə irəli, sonra isə əks istiqamətdə qaçırıq.
Beləliklə, o, bizim 10 saniyəlik qrafikimizə uyğun olacaq və zaman çizelgesinin ortasında yerləşəcək. Etməli olduğumuz şey animasiya effektini bir istiqamətə sürüşdürmək üçün parametrləri təyin etməkdir, çünki nə vaxt tərs sürüşdürün sadəcə olaraq ilkin vəziyyətinə qayıdacaq.
Hər hərf üçün effektlərin bir qədər gecikməsi var, buna görə də hamısı eyni vaxtda deyil, bir-birinin ardınca hərəkət edir:
Wufoo-məktub ( animasiya: kaboom 5s asan alternativ sonsuz; &:nth-child(2) ( animasiya gecikməsi: 0.1s; ) &:nth-child(3) ( animasiya gecikməsi: 0.2s; ) &:nth- child(4) ( animasiya gecikməsi: 0,3s; ) &:nth-child(5) ( animasiya gecikməsi: 0,4s; ) ) @keyframes kaboom ( 90% ( transform: miqyas(1,0); ) 100% ( transform : miqyas (1.1);
Yuxarıdakı SCSS kodu qısa bir versiyadır, prefiksləri ehtiva etmir (buna praktikada ehtiyacınız olacaq).
Düşünürəm ki, animasiya gecikməsi orijinal CSS-dən götürmək üçün faydalı ola biləcək bir xüsusiyyətdir. Hərflər bir az gecikmə ilə hərəkət etdikdə daha səliqəli görünərdi.
Və nəhayət, dinozavr
Bu yazılar blok boyunca yanıb-sönəndən sonra aşağıdan dinozavrın başı çıxır. Baxmayaraq ki, dinozavr fiqurundan ibarətdir böyük miqdarda elementləri, biz bütün bu elementləri ehtiva edən yerləşdirmə etiketindən (qrup) istifadə edərək, hamısını birlikdə yerləşdirə bilərik.
Animasiyanı yerləşdirmək üçün çevirmələrdən istifadə etmək daha səmərəli olduğundan, biz bunu açar kadrlardan istifadə edərək edəcəyik:
@keyframes popup ( 0% ( transform: translateY(150px); ) 34% ( transform: translateY(20px); ) 37% ( transform: translateY(150px); ) 100% ( transform: translateY(150px); ) )
Biz bu animasiyanın təxminən 3 saniyə ərzində "son"da göstərilməsini istəyirik. Bu dövr əslində bütün 10 saniyə ərzində işləyir, lakin siz son 3 saniyə ərzində faktiki görünən effektləri görəcəksiniz.
TranslateY(150px) effekti tətbiq edildikdə, dinozavr qutudan kənarda o qədər aşağı hərəkət edir ki, siz onu görə bilməzsiniz.
Lakin bu animasiya vaxtının 37%-də (təxminən 3 saniyə) siz onun yavaş-yavaş yuxarı qalxdığını və sonra sürətlə aşağıya doğru hərəkət etdiyini görürsünüz.
Bu animasiyanı tətbiq etdikdə əmin olacağıq ki:
- Dinozavr əvvəlcə gizlənir;
- Bu animasiya fraqmentinin çıxışı vaxtında gecikir, ona görə də loqo sözündəki hərflər öz rəqslərini bitirdikdən dərhal sonra başlayır (yan tərəfə keçib öz yerinə qayıtdılar).
Trex (çevir: translateY(150px); animasiya: pop-up 10s 6.5s rahatlıq sonsuz; )
Dinozavr son saniyədə yerə yıxılır ki, dərhal sonra blokda yenidən “Sürətli” sözü görünəcək (animasiya oxutma intervalı sonsuz olaraq təyin olunub ki, o, təkrar-təkrar bir dairədə hərəkət etsin). Bu, bəzi əyləncəli sinerji əlavə edir.
6. Blokun kliklənən/interaktiv reklama çevrilməsi
Biri faydalı xüsusiyyətlər SVG keyfiyyətini itirmədən obyektləri istənilən ölçüdə miqyaslandırmaq qabiliyyətidir.
Şəkillərin orijinal keyfiyyətini qoruyaraq daxili SVG qutusu yaratmaq üçün biz ol' padded qutu texnikasından istifadə edə bilərik.
.wufoo-ad-wrap ( hündürlük: 0; padding-top: 100%; mövqe: nisbi; ) .wufoo-ad ( mövqe: mütləq; yuxarı: 0; sol: 0; en: 100%; hündürlük: 100%; )İdeya ondan ibarətdir ki, "sarğı" həmişə genişliyinə görə kvadrat şəklini alacaq. Sonra soruşuruq mütləq dəyərlərÖlçüləri eninə görə tənzimlənən bu mükəmməl kvadratın içərisində SVG mövqeləri.
Bu bir reklam olduğundan (təbii ki, tıklanabilir olmalıdır), daha sonra ehtiva edən konteyner kimi, əvəzinə