Saturs
- 01. Sinhronizēta animācija un audio
- 02. Animēti pasaules orientieri no jauna izveidoti SVG
- 03. SVG filtri HTML5 video
- 04. Trešās dimensijas pievienošana SVG grafikai
- 05. Vektorgrafikas renderēšana SVG vs Flash
- 06. Interaktīvs SVG finierzāģis
- 07. SVG lietotāja saskarnes komponenti: HTML5 subtitru josla
- 08. SVG masku lietošana virs HTML5 video
- 09. Ceļa izsekošanas karšu maršruti ar SVG un Raphael
- 10. Trajanas kolonnu dekonstruēšana ar SVG
- 11. Animēta Rube Goldberg mašīna SVG
- 12. Īrijas interaktīvā pastkarte SVG
- 13. Noziedzības un nabadzības interaktīvā SVG karte
- 14. Animācijas teksti SVG
- 15. Analīze ar Raphael un SVG
- 16. Twitter savienojumu vizuālā attēlošana
- 17. Blobular
- 18. Rāpojoša mute SVG
- 19. Animēts SVG pulkstenis
- 20. Interaktīvais SVG uz iPad
- Patika tas? Izlasiet šos!
SVG (vai Scalable Vector Graphics) ir uz XML balstīts failu formāts, kas ļauj izstrādātājiem un dizaineriem izveidot augstas kvalitātes, dinamiskas grafikas un grafiskas lietojumprogrammas ar lielu precizitāti.
Visas mūsdienu pārlūkprogrammas atbalsta SVG renderēšanu: tomēr vecākām pārlūkprogrammām, piemēram, IE6, 7 un 8, bez vietējā atbalsta, varat atgriezties pie tādām daudzaizpildēm kā SVG Web, kas satura renderēšanai izmanto Flash. Tas ļauj ērti atlasīt lielāko daļu lietotāju tiešsaistē, neuztraucoties par saderības problēmām.
Mobilajiem tīmekļa izstrādātājiem, kuri interesējas par saderību, es priecājos ziņot, ka iOS 3.2+, Opera Mini 5+, Opera Mobile 10+ un Android 3+ atbalsta arī SVG grafikas atveidošanu ārpus kastes. Tā kā elementam canvas> un SVG ir dažas līdzības, izstrādātājiem bieži rodas jautājums, kuru no tiem vajadzētu izvēlēties. Atbilde uz šīm bažām faktiski ir abas.
Audekls piedāvā augstas veiktspējas audeklu, kas vislabāk piemērots rastra grafikas atveidošanai tādām spēlēm kā sprites, attēlu rediģēšana un lietojumprogrammas, kurām nepieciešamas manipulācijas ar pikseļiem. Diemžēl audekla lietotņu veiktspēja pasliktinās, palielinoties izšķirtspējai, un tās nebūtu ieteicams izmantot pilnekrāna lietotāja saskarnēs.
SVG nav atkarīgs no izšķirtspējas, tāpēc tas ir ideāli piemērots starpplatformu lietotāja saskarnes komponentu, animāciju un lietojumprogrammu renderēšanai, kur katram elementam jābūt pieejamam, izmantojot DOM. Kā uz audekla> tas var palēnināties, palielinoties sarežģītībai, taču joprojām darbojas ļoti labi, lai radītu ļoti interaktīvu lietotāju pieredzi.
Mēs aplūkosim 20 izcilus SVG izmantošanas piemērus savvaļā, tāpēc aktivizējiet modernu pārlūkprogrammu un apskatiet zemāk redzamās demonstrācijas.
- Lasiet visus mūsu tīmekļa dizaina rakstus šeit
01. Sinhronizēta animācija un audio
Liels iemesls, kāpēc dizaineri un izstrādātāji sākotnēji izmantoja Flash, bija tas, cik viegli ir radīt aizraujošu, animētu lietotāju pieredzi ar ievērojamu kadru ātrumu.
Tagad, kad mēs saprotam, cik spēcīga pārlūkprogrammā var būt vektoru balstīta pieredze, savienojot to pārī ar citiem multivides līdzekļiem (piemēram, audio tagu), mēs varam sākt veidot tādas lietas kā šo Vincenta Hārdija demonstrāciju: sinhronizētu audio un grafisko animāciju, apvienojot SVG , JavaScript un imitētu “kameru”. Lielisks SVG piemērs darbībā - nav slikti kaut kam, kam nav nepieciešami trešo pušu spraudņi!
02. Animēti pasaules orientieri no jauna izveidoti SVG
Viens no patiesajiem pārbaudījumiem, lai salīdzinātu esošās pieejas uzdevuma sasniegšanai ar jaunām, ir novērtēt to, cik tālu jūs varat veikt, atkārtojot piemēru jau esošajam.
Tieši to darīja Mareks Raida, redzot, ka lapas stūrī animējas vairāku pasaules orientieru Flash reklāmkarogs un nolēma mēģināt to atjaunot SVG. Viņa centienu rezultāts ir viegls demonstrējums, kura faila izmērs ir par 33 procentiem mazāks nekā tā Flash alternatīva. Šis SVG piemērs izdodas izskatīties daudz labāk, un arī to nav tik grūti kodēt!
03. SVG filtri HTML5 video
Lai gan SVG piedāvā lielu jaudu vektorgrafikas telpā, tam ir arī daudz radošu pielietojumu ārpus tā. Šajā demonstrācijā Pols Īrs (no Google Chrome dev attiecību komandas) parāda, kā jūs varat apvienot SVG un CSS, lai izveidotu diezgan iespaidīgus vizuālos filtrus video saturam. Izplūšanas efekts, iespējams, ir visinteresantākais, taču arī citi efekti, piemēram, kadra satura apgriešana, ir diezgan interesanti koncepta pierādījumi.
04. Trešās dimensijas pievienošana SVG grafikai
Ikreiz, kad tiek apspriesta pārlūkprogrammas grafikas renderēšanas tēma, nav iespējams izvairīties runāt par pieejamo 2D un 3D iespēju līmeni. Šī ietekme uz tiešsaistes spēlēm ir pietiekama, lai izraisītu daudz dizaineru un izstrādātāju uzmanību, tāpēc kā SVG var mums palīdzēt?
Nu, šajā Nikolasa Debeisata nākamajā SVG piemērā mēs esam iepazīstināti ar tehniku, kā simulēt objektiem ticamas 3D perspektīvas, izmantojot dažus JavaScript trikus un SVG vektorus. Noteikti pārbaudiet lapas nolaižamo izvēlni, jo jūsu 3D apetītei ir daudz piemēru.
05. Vektorgrafikas renderēšana SVG vs Flash
Šeit ir interesants Breda Neuberga un SVG Web SVG piemērs: JavaScript bibliotēka, kas aizpilda SVG atbalstu pārlūkiem, kuri to vēl pilnībā neatbalsta. Izmantojot bibliotēku (un ieskaitot vietējo SVG atbalstu), varat uzreiz atlasīt gandrīz 95 procentus no esošās instalētās tīmekļa bāzes, kas ir diezgan ievērojams, ja vēlaties apsvērt iespēju izmantot SVG ražošanā.
Lieliski šajā piemērā ir tas, ka tas ļauj salīdzināt, kā vektorgrafika var izskatīties, kad tiek renderēta, izmantojot SVG, nevis Flash, taču to var viegli pārslēgt izpildlaikā atkarībā no tā, kāds ir jūsu pārlūkprogrammas atbalsta līmenis. Noteikti tas ir jāredz izstrādātājiem, kuri vēlas sīkāk izpētīt SVG renderēšanas iespējas.
06. Interaktīvs SVG finierzāģis
Toreiz, kad Flash pirmo reizi parādījās, daži no pirmajiem piemēriem, ko mēs to redzējām savvaļā, bija pamata mīklas un spēles. Sekojot šim piemēram, šeit ir redzams piemērs SVG finierzāģim, kura pamatā ir Flickr un kuru izveidoja @h__r__j. Tas sniegs jums attēlu izvēli un ļaus jums izveidot mīklu no visiem jūsu atlasītajiem. Veiksmīgs, bet aizraujošs un interesants kods.
07. SVG lietotāja saskarnes komponenti: HTML5 subtitru josla
Kā minēts ievadā, viena no jomām, kur Flash iepriekš ir bijusi ļoti izmantota, ar ko arī SVG izceļas, ir radošas vektoru balstītas lietotāju saskarnes. Tā kā ekrāni un ekrāna izšķirtspēja nepārtraukti palielinās, izstrādātājiem ir jāspēj nodrošināt augstas kvalitātes lietotāja saskarnes komponentus, neuztraucoties par kvalitatīvām ciešanām ar lielāku vai zemāku izšķirtspēju. Tieši šeit SVG ir īpaši noderīgs.
Šajā lieliskajā SVG piemērā interaktīva subtitru josla ir pievienota HTML5 video atskaņotājam, ļaujot ērti un vienmērīgi pārslēgties starp subtitru valodām.
08. SVG masku lietošana virs HTML5 video
Pirms dažiem gadiem es atceros, ka strādāju pie projekta, kurā mums bija jāpieliek maska ap iegulto Flash video, tāpēc izrādījās, ka videoklips tiek atskaņots tieši teksta formas blokā. Lūk, tagad ir iespējams ļoti līdzīgs efekts, izmantojot iekļauto SVG, HTML5 video un nedaudz CSS kombināciju.
Šis SVG piemērs, ko izveidojis tīmekļa izstrādātājs Maiks Tomass, pašlaik darbojas tikai Firefox 4 un jaunākās versijās, taču tas ir iedvesmojošs piemērs dažām patiešām radošām lietām, kuras mēs varēsim attīstīt nākotnē, kad būs lielāks normalizācijas līmenis starp to, ko piedāvā dažādi pārlūku pārdevēji.
09. Ceļa izsekošanas karšu maršruti ar SVG un Raphael
Šeit ir interesants praktisks SVG piemērs un kā tas var dot labumu jūsu lietotāja pieredzei. Kartes ir kaut kas tāds, ko mēs visi izmantojam tiešsaistē, bet vai tas nebūtu vēl labāk, ja mēs varētu viegli uzzīmēt un animēt ceļu pa maršrutiem, lai šie ceļojumi būtu nedaudz skaidrāki? Šajā A List Apart demonstrācijā Braiens Suda aplūko, kā kartēm pievienot pielāgotus animētus maršrutus ar nelielu SVG palīdzību līdz Raphael.
10. Trajanas kolonnu dekonstruēšana ar SVG
Jautrs fakts: Trajāna kolonna ir romiešu kolonna Itālijā, kas piemin Romas imperatora Trajāna uzvaru Dakijas karos. Kolonnu iekšpusē ir spirālveida kāpnes, kuras kāds nolēma pilnībā modelēt pseido-3D, izmantojot SVG.
Labākā daļa no šī SVG piemēra ir tā, ka tas ir pilnīgi interaktīvs, ļaujot izvēlēties izvilktās grafikas sadaļu. Šī animētā arhitektūras dekonstrukcija, iespējams, ir viens no jautrākajiem SVG lietojumiem, ko esmu redzējis, un es noteikti iesaku to pārbaudīt.
11. Animēta Rube Goldberg mašīna SVG
Iespējams, ka jūs, iespējams, esat redzējis Rube Goldberg mašīnu (RGM) darbībā kādā brīdī savā dzīvē, to nezinot, iespējams, karikatūrā vai zinātnes šovā. RGM ir
apzināti pārbūvētas mašīnas, kas ļoti sarežģīti veic vienkāršus uzdevumus, parasti iekļaujot ķēdes reakciju.
Šajā SVG piemērā varat redzēt, kā papīra lidmašīna lido pāri, lai trāpītu bumbu, kas pēc tam izraisa vēl vienu ķēdes reakciju, domino un visbeidzot iedegas lampa. Es teicu, ka tas ir pārmērīgi konstruēts, vai ne ?!
12. Īrijas interaktīvā pastkarte SVG
Paplašinot ceļa izsekošanas demonstrāciju, SVG ventilators un visaptverošais lieliskais izstrādātājs Mareks Raida nolēma dokumentēt savu ceļojumu uz Īriju šajā interaktīvajā SVG pastkartē, kas demonstrē gan maršruta izsekošanu, gan liela laukuma animāciju, gan citus efektus, piemēram, rotāciju.
13. Noziedzības un nabadzības interaktīvā SVG karte
Lielu datu kopu vizualizēšana tā, lai ikdienas vīrietis vai sieviete to varētu saprast ārpus ielas, ne vienmēr ir viegls uzdevums. Bieži vien tā vietā, lai mēģinātu izskaidrot visu datu kopu, var būt daudz vienkāršāk piedāvāt vairākus datu skatus, lai lietotāji varētu pārslēgties kontekstā, lai izpētītu lielāku kopu apakškopu, kuru viņi vēlas apskatīt.
Šajā SVG piemērā ASV noziedzības un nabadzības rādītāji tiek parādīti ASV kartē štata līmenī, taču jums tiek doti arī vairāki veidi, kā mainīt kartes skatus, tostarp tālummaiņu, atlasi un kustību. Ja jūs interesē sākt darbu ar savām kartēm SVG, Dašai Salo ir apmācība, kas parāda, cik viegli to var panākt, izmantojot Raphael.
14. Animācijas teksti SVG
Vēl viens lielisks SVG piemērs no kategorijas “Es nespēju noticēt, ka tas nav Flash” ir šis Vincenta Hārdija demonstrācija, kurā viņš apvieno SVG, tīmekļa fontus un audio tagu, lai izveidotu vizuāli patīkamu dziesmu tekstu animāciju, kas ir sinhronizēta ar mūzikas ierakstu. Apskatiet arī citus piemērus, kas uzskaitīti Ghandi citātu demonstrācijā!
15. Analīze ar Raphael un SVG
Ja jūs to iepriekš neesat izmantojis, Raphaël ir JavaScript bibliotēka, kas palīdz vienkāršot darbu ar vektorgrafiku tīmeklī. Atbalstot lielāko daļu pārlūkprogrammu, sākot no IE6 +, tās vietnē ir daži lieliski piemēri, kā izmantot SVG, lai izveidotu iespaidīgas datu vizualizācijas.
Mans personīgais favorīts ir analīzes demonstrācija, kas ļauj uzzināt, cik viegli SVG varētu aizstāt Flash lielās vietņu izsekošanas lietojumprogrammās. Ja jūs interesē Raphael versija, kas vairāk koncentrējas uz diagrammām, jūs varētu vēlēties apskatīt arī gRaphaël.
16. Twitter savienojumu vizuālā attēlošana
Twings ir rīks, kas ļauj vizualizēt savus Twitter sekotājus gredzenos, pamatojoties uz vairākiem dažādiem faktoriem. Papildus tam, ka tas ir labs SVG piemērs, tas ir arī interesants piemērs tam, kā segmentēt pieprasījumus Twitter API, kad jums ir jāiegūst informācija par sekotājiem, pārsniedzot robežas, kuras API parasti var atgriezt vienā pieprasījumā (100). Neaizmirstiet apmeklēt galveno vietni, kur Ivans Lazarevičs paskaidro, kā viņš izveidoja Twings, ar dažiem papildu padomiem par rīku!
17. Blobular
Blobular ir jautrs SVG paraugs, ko izveidojis Kamerons Adamss, aka Man In Blue, kas ļauj mainīt labi, blobs krāsu, viskozitāti un izmēru! Jūs varat eksperimentēt, paplašinot lāse malas līdz noteiktiem ierobežojumiem, un, kad ir pārsniegts slieksnis, emuārs faktiski var radīt citus lāšus. Jūs, iespējams, to neizmantosit, lai izveidotu nākamo pakalpojumu Google+, taču tā joprojām ir diezgan interesanta ieviešana.
18. Rāpojoša mute SVG
Doug Schepers 'rāpojošās mutes' eksperiments ļauj mums ieskatīties cilvēka mutē SVG. Vai jūs zināt atšķirību starp alveolāru un alveopalatalu? Es to arī nedarīju, bet tas ir ideāls SVG piemērs, apvienojot vektorgrafiku ar animāciju, lai palīdzētu uzlabot tiešsaistes izglītību tādā veidā, kā Flash agrāk tika izmantots zinātnes un bioloģijas diagrammām.
19. Animēts SVG pulkstenis
Šajā demonstrācijā mums ir piemērs, kā SVG renderē vērpjošu digitālo pulksteni. Es uzskatu, ka efekts ir ļoti interesants, jo tas ir ne tikai labs animēta teksta piemērs, bet arī pamaniet, kā katra varoņa aizmugurējā seja maina krāsu, pamatojoties uz pozīciju animētajā rotācijā.
20. Interaktīvais SVG uz iPad
Kā minēts ievadā, SVG grafikai var piekļūt, izmantojot DOM, tāpēc tām ir iespējams piesaistīt notikumu apdarinātājus tāpat kā ar citiem lapas elementiem. Paturot to prātā, Gerts-jans Van Dervels izveidoja vienkāršu demonstrāciju, parādot, kā jūs varat mijiedarboties ar SVG grafiku iPad. Ja esat spēlējies ar pārlūkprogrammas objektu pārvietošanos iOS ierīcēs, daudz kas jums šķitīs pazīstams, taču tā ir noderīga demonstrācija tiem, kuriem vēl nav bijusi iespēja to izpētīt!
Patika tas? Izlasiet šos!
- Kā izveidot lietotni
- Bezmaksas grafiti fontu izvēle
- Illustrator apmācības: pārsteidzošas idejas, kuras izmēģināt šodien!
- Galīgais ceļvedis labāko logotipu izstrādei
- Labākie bezmaksas web fonti dizaineriem
- Noderīgas un iedvesmojošas skrejlapu veidnes
- Labākās 2013. gada 3D filmas
- Atklājiet paplašinātās realitātes iespējas
Adijs Osmani ir lietotāja interfeisa dizainers un šobrīd AOL programmatūras inženieris. Viņš ir arī jQuery Bug Triage un API Docs komandu dalībnieks. Viņa nedēļas lietotāja interfeisa ziņas var atrast vietnē AddyOsmani.com.
Kāda veida SVG lietošana jūs visvairāk ir iespaidojusi? Kuriem no tiem vajadzēja būt mūsu sarakstam? Paziņojiet mums komentāros!
