Задаволены
- 01. Сінхранізаваная анімацыя і аўдыя
- 02. Аніміраваныя сусветныя славутасці адноўлены ў SVG
- 03. Фільтры SVG на відэа HTML5
- 04. Даданне трэцяга вымярэння да графікі SVG
- 05. Адлюстраванне вектарнай графікі ў SVG супраць Flash
- 06. Інтэрактыўны лобзік SVG
- 07. Кампаненты інтэрфейсу SVG: радок субтытраў HTML5
- 08. Нанясенне SVG-масак на відэа HTML5
- 09. Маршруты карты трасіроўкі шляхоў з SVG і Рафаэлем
- 10. Дэканструкцыя слупкоў Trajan з дапамогай SVG
- 11. Аніміраваны станок Руба Гольдберга ў SVG
- 12. Інтэрактыўная паштоўка Ірландыі ў SVG
- 13. Інтэрактыўная карта SVG па пытаннях злачыннасці і галечы
- 14. Анімацыйная лірыка ў SVG
- 15. Аналітыка з Рафаэлем і SVG
- 16. Візуальнае прадстаўленне злучэнняў Twitter
- 17. Блобуляр
- 18. Страшны рот у SVG
- 19. Аніміраваны гадзіннік SVG
- 20. Інтэрактыўная SVG на iPad
- Спадабалася гэта? Прачытайце гэтыя!
SVG (альбо Scalable Vector Graphics) - гэта фармат файла на аснове XML, які дазваляе распрацоўшчыкам і дызайнерам ствараць высокую якасць, дынамічную графіку і графічныя дадаткі з вялікім узроўнем дакладнасці.
Усе сучасныя браўзэры падтрымліваюць адлюстраванне SVG: аднак для старых браўзэраў, такіх як IE6, 7 і 8, без убудаванай падтрымкі, вы можаце скарыстацца поліфіламі, такімі як SVG Web, якія выкарыстоўваюць Flash для рэндэрынгу змесціва. Гэта дазваляе лёгка арыентавацца на большасць карыстальнікаў у Інтэрнэце, не турбуючыся пра праблемы сумяшчальнасці.
Для мабільных вэб-распрацоўшчыкаў, якія задаюцца пытаннем аб сумяшчальнасці, я рады паведаміць, што iOS 3.2+, Opera Mini 5+, Opera Mobile 10+ і Android 3+ таксама падтрымліваюць адлюстраванне SVG-графікі нестандартна. Паколькі ёсць некалькі падабенстваў паміж тым, што могуць прапанаваць элемент canvas> і SVG, распрацоўшчыкі часта задаюцца пытаннем, які з іх выбраць. Адказ на гэты клопат на самай справе абодва.
Canvas прапануе высокапрадукцыйнае палатно, якое лепш за ўсё падыходзіць для адлюстравання растравай графікі для такіх гульняў, як спрайты, рэдагаванне малюнкаў і прыкладанняў, якія патрабуюць магчымасцяў маніпуляцыі з кожным пікселем. На жаль, прадукцыйнасць прыкладанняў на палатне пагаршаецца па меры павелічэння дазволу, і не рэкамендуецца выкарыстоўваць іх у поўнаэкранным карыстацкім інтэрфейсе.
SVG не залежыць ад дазволу, што робіць яго ідэальным для адлюстравання кампанентаў, анімацыі і прыкладанняў міжплатформеннага карыстацкага інтэрфейсу, дзе кожны элемент павінен быць даступны праз DOM. У адпаведнасці з палатном> ён можа запавольвацца, калі складанасць павялічваецца, але ўсё яшчэ вельмі добра працуе для стварэння вельмі інтэрактыўнага карыстацкага досведу.
Мы разгледзім 20 выдатных прыкладаў выкарыстання SVG у дзікай прыродзе, таму запусціце сучасны браўзэр і азнаёмцеся з дэма-версіямі ніжэй.
- Прачытайце тут усе нашы артыкулы пра вэб-дызайн
01. Сінхранізаваная анімацыя і аўдыя
Вялікай прычынай таго, што дызайнеры і распрацоўшчыкі першапачаткова пачалі карыстацца Flash, была лёгкасць стварэння захапляльных, аніміраваных карыстацкіх функцый з паважнай частатой кадраў.
Цяпер, калі мы разумеем, наколькі магутным у браўзэры можа быць вектарны досвед, калі яго спалучаць з іншымі мультымедыя (напрыклад, з аўдыятэгам), мы можам пачаць ствараць такія рэчы, як гэтая дэманстрацыя Вінцэнта Хардзі: сінхранізаваная гукавая і графічная анімацыя, якая спалучае SVG , JavaScript і мадэляваная "камера". Выдатны прыклад SVG у дзеянні - нядрэнна для таго, для чаго не патрэбныя ўбудовы іншых вытворцаў!
02. Аніміраваныя сусветныя славутасці адноўлены ў SVG
Адзін з сапраўдных тэстаў для параўнання існуючых падыходаў да дасягнення задачы з новымі - гэта ацэнка таго, наколькі далёка вы можаце прайграць тыражаванне прыкладу таго, што ўжо ёсць.
Гэта менавіта тое, што зрабіў Марэк Райда, калі ўбачыў у куце старонкі аніміраваны флэш-банер з некалькімі сусветнымі славутасцямі і вырашыў паспрабаваць узнавіць яго ў SVG. Вынікам яго намаганняў стала лёгкая дэма-версія, якая мае 33-працэнтны памер файла, меншы за альтэрнатыву Flash. Гэты прыклад SVG атрымоўваецца выглядаць нашмат лепш, і не так складана самастойна стварыць код!
03. Фільтры SVG на відэа HTML5
Хоць SVG валодае вялікай магутнасцю ў прасторы вектарнай графікі, ён таксама мае шэраг творчых магчымасцей за межамі яго. У гэтай дэманстрацыі Пол Ірландскі (з групы па сувязях з распрацоўшчыкамі Google Chrome) дэманструе, як можна спалучаць SVG і CSS, каб стварыць даволі эфектныя візуальныя фільтры для відэакантэнту. Эфект размыцця, магчыма, найбольш цікавы, але іншыя эфекты, такія як інверсія зместу кадра, таксама з'яўляюцца даволі цікавым доказам канцэпцыі.
04. Даданне трэцяга вымярэння да графікі SVG
Кожны раз, калі абмяркоўваецца тэма візуалізацыі графікі ў браўзэры, немагчыма пазбегнуць размоў пра ўзровень даступных 2D і 3D магчымасцей. Гэты ўплыў на онлайн-гульні дастаткова, каб выклікаць дызайнераў і распрацоўшчыкаў, каб яны звярнулі ўвагу, так як SVG можа нам дапамагчы ў гэтым?
Ну, у наступным прыкладзе SVG Нікаласа Дэбейсата мы прадставім тэхніку мадэлявання праўдападобных 3D-перспектыў для аб'ектаў з выкарыстаннем некаторых хітрасцей JavaScript і вектараў SVG. Не забудзьцеся азнаёміцца з выпадальным меню на гэтай старонцы, бо ёсць мноства прыкладаў для ўзмацнення вашага 3D-апетыту.
05. Адлюстраванне вектарнай графікі ў SVG супраць Flash
Вось цікавы прыклад SVG ад Брэда Нойберга і SVG Web: бібліятэка JavaScript, якая запоўніла SVG-падтрымку для браўзэраў, якія яшчэ не цалкам яе падтрымліваюць. Выкарыстоўваючы бібліятэку (і ўключна з убудаванай падтрымкай SVG), вы можаце імгненна арыентавацца на амаль 95 працэнтаў існуючай устаноўленай вэб-базы, што даволі значна, калі вы хочаце разгледзець магчымасць выкарыстання SVG у вытворчасці.
Самае выдатнае ў гэтым прыкладзе тое, што ён дазваляе параўнаць, як можа выглядаць вектарная графіка пры рэндэрынгу з выкарыстаннем SVG, у адрозненне ад Flash, але гэта можна лёгка пераключыць падчас выканання ў залежнасці ад узроўню падтрымкі, які ваш аглядальнік мае для гэтага. Безумоўна, гэта абавязковы для распрацоўшчыкаў, зацікаўленых у далейшым вывучэнні магчымасцяў рэндэрынгу SVG.
06. Інтэрактыўны лобзік SVG
Калі Flash з'явіўся ўпершыню, некаторыя першыя прыклады, якія мы бачылі ў дзікай прыродзе, былі асноўнымі галаваломкамі і гульнямі. Пасля прыкладу вось прыклад лобзіка SVG на аснове Flickr, створанага @h__r__j. Гэта дасць вам выбар малюнкаў і дазволіць вам стварыць галаваломку з любога з выбраных вамі. Складана выканаць, але ўсё роўна весела і цікавы код!
07. Кампаненты інтэрфейсу SVG: радок субтытраў HTML5
Як ужо згадвалася ва ўводзінах, адной з абласцей, дзе Flash у мінулым актыўна выкарыстоўваўся, і SVG таксама пераўзыходзіць, з'яўляюцца творчыя вектарныя карыстацкія інтэрфейсы. Паколькі экраны і дазволы экрана пастаянна павялічваюцца, распрацоўшчыкі павінны мець магчымасць абслугоўваць высакаякасныя кампаненты карыстацкага інтэрфейсу, не клапоцячыся пра страты якасці пры больш высокім і нізкім дазволе. Тут SVG асабліва карысны.
У гэтым выдатным прыкладзе SVG інтэрактыўная панэль субтытраў прымацавана да відэапрайгравальніка HTML5, што дазваляе лёгка пераключацца паміж мовамі субтытраў.
08. Нанясенне SVG-масак на відэа HTML5
Некалькі гадоў таму я памятаю, як працаваў над праектам, дзе нам трэба было нанесці маску на ўбудаванае відэа Flash, так што, здавалася, відэа прайгравалася прама ў блоку ў форме тэксту. Вось, зараз вельмі падобны эфект магчымы пры дапамозе камбінацыі ўбудаванага SVG, HTML5-відэа і трохі CSS.
Гэты прыклад SVG, створаны вэб-распрацоўшчыкам Майкам Томасам, у цяперашні час працуе толькі ў Firefox 4 і вышэй, але гэта натхняльны прыклад некаторых сапраўды творчых рэчаў, якія мы зможам распрацаваць у будучыні, як толькі будзе дасягнуты большы ўзровень нармалізацыі паміж рознымі пастаўшчыкамі аглядальнікаў.
09. Маршруты карты трасіроўкі шляхоў з SVG і Рафаэлем
Вось цікавы практычны прыклад SVG і тое, як гэта можа прынесці карысць вашаму карыстацкаму досведу. Карты - гэта тое, што мы ўсе выкарыстоўваем у Інтэрнэце, але ці не было б яшчэ лепш, калі б мы змаглі лёгка скласці і анімаваць шлях па маршрутах, каб зрабіць гэтыя падарожжы ледзь зразумелымі? У гэтай дэманстрацыі "A List Apart" Браян Суда разглядае даданне ўласных аніміраваных маршрутаў на карты пры дапамозе SVG праз Рафаэля.
10. Дэканструкцыя слупкоў Trajan з дапамогай SVG
Цікавы факт: калона Траяна - рымская калона ў Італіі, якая адзначае перамогу рымскага імператара Траяна ў Дакійскіх войнах. З унутранага боку калон вінтавая лесвіца, якую нехта вырашыў цалкам змадэляваць у псеўда-3D з выкарыстаннем SVG.
Лепшая частка гэтага прыкладу SVG заключаецца ў тым, што ён цалкам інтэрактыўны, што дазваляе выбраць раздзел графікі, які трэба выцягнуць. Гэтая аніміраваная дэканструкцыя архітэктуры, напэўна, адна з самых цікавых ужыванняў SVG, якую я бачыў, і я абавязкова рэкамендую праверыць яе.
11. Аніміраваны станок Руба Гольдберга ў SVG
Хутчэй за ўсё, вы напэўна бачылі машыну Руба Голдберга (RGM) у нейкі момант жыцця, не ведаючы пра гэта, магчыма, у мультфільме ці на навуковым шоў. RGM ёсць
наўмысна звышпраектаванай машыны, якая вельмі складана выконвае простыя задачы, звычайна ўключаючы ланцуговую рэакцыю.
У наступным прыкладзе SVG вы можаце ўбачыць папяровы самалёт, які ляціць папярок і трапляе ў мяч, які выклікае чарговую ланцуговую рэакцыю - даміно і, нарэшце, запальваецца лямпа. Я сказаў, што гэта занадта інжынерна, ці не так ?!
12. Інтэрактыўная паштоўка Ірландыі ў SVG
Пашыраючы дэманстрацыю шляхоў, вентылятар SVG і дзіўны распрацоўшчык Marek Raida вырашыў зафіксаваць сваю паездку ў Ірландыю на гэтай інтэрактыўнай паштоўцы SVG, якая дэманструе як трасіроўку маршрутаў, анімацыю вялікай плошчы і іншыя эфекты, такія як кручэнне.
13. Інтэрактыўная карта SVG па пытаннях злачыннасці і галечы
Візуалізацыя вялікіх набораў дадзеных такім чынам, каб іх мог зразумець паўсядзённы мужчына ці жанчына з вуліцы, не заўсёды простая задача. Часцей за ўсё, чым спрабаваць растлумачыць увесь набор дадзеных, можа быць нашмат прасцей прапанаваць некалькі відаў дадзеных, каб карыстальнікі маглі пераключыць кантэкст, каб перайсці да падгрупы большага набору, які яны зацікаўлены ў праглядзе.
У гэтым прыкладзе SVG лічбы злачыннасці і беднасці ў ЗША адлюстраваны на карце ЗША на дзяржаўным узроўні, але вам таксама дадзены шэраг спосабаў змяніць свой погляд на карту, уключаючы маштабаванне, выбар і перасоўванне. Калі вы зацікаўлены пачаць працу з уласнымі картамі ў SVG, у Дашы Сало ёсць падручнік, які паказвае, наколькі лёгка гэтага можна дасягнуць, выкарыстоўваючы Рафаэля.
14. Анімацыйная лірыка ў SVG
Яшчэ адзін цудоўны прыклад SVG з катэгорыі «Я не магу паверыць, што гэта не Flash» - гэта дэманстрацыя ад Вінсэнта Хардзі, дзе ён спалучае SVG, вэб-шрыфты і аўдыятэг, каб стварыць візуальна прыемную анімацыю тэкстаў, сінхранізаваную з музычным трэкам. Таксама зірніце на іншы прыклад, прыведзены для дэманстрацыі каціровак Гандзі!
15. Аналітыка з Рафаэлем і SVG
Калі вы не выкарыстоўвалі яго раней, Raphaël - гэта бібліятэка JavaScript, якая дапамагае спрасціць працу з вектарнай графікай у Інтэрнэце. Падтрымліваючы большасць браўзэраў, пачынаючы з IE6 +, яго сайт мае некалькі выдатных прыкладаў выкарыстання SVG для стварэння ўражлівай візуалізацыі дадзеных.
Маім асабістым улюбёным з'яўляецца аналітычны аналіз, які дазваляе ўбачыць, наколькі лёгка SVG можа замяніць Flash у вялікіх дадатках для адсочвання сайтаў. Калі вас цікавіць версія Raphael з большым акцэнтам на графіках, вы таксама можаце праверыць gRaphaël.
16. Візуальнае прадстаўленне злучэнняў Twitter
Twings - гэта інструмент, які дазваляе візуалізаваць паслядоўнікаў у Twitter у кольцы на аснове шэрагу розных фактараў. Акрамя таго, што гэта добры прыклад SVG, гэта яшчэ і цікавы прыклад таго, як сегментаваць запыты ў Twitter API, калі вам трэба атрымаць інфармацыю пра кожнага паслядоўніка, якая выходзіць за межы таго, што API звычайна можа вярнуць за запыт (100). Не забудзьцеся перайсці на галоўны вэб-сайт, дзе Іван Лазарэвіч расказвае, як ён стварыў Twings, з некалькімі дадатковымі парадамі пра інструмент!
17. Блобуляр
Blobular - гэта пацешны прыклад SVG ад Кэмерана Адамса, ён жа "Чалавек у блакітным", які дазваляе змяніць колер, глейкасць і памер лункі! Вы можаце паэксперыментаваць з пашырэннем краёў кроплі да пэўных межаў, і як толькі парог будзе пераадолены, блог сапраўды можа спарадзіць іншыя кроплі. Вы, верагодна, не будзеце выкарыстоўваць гэта для стварэння наступнага Google+, але ўсё роўна гэта даволі цікавая рэалізацыя.
18. Страшны рот у SVG
Эксперымент "жудаснага рота" Дага Шэперса дае нам унутраны погляд на рот чалавека ў SVG. Вы ведаеце, чым адрозніваецца альвеалярны ад альвеапалатальнага? Я таксама не, але гэта выдатны прыклад SVG, які спалучае вектарную графіку з анімацыяй, каб дапамагчы палепшыць адукацыю ў сетцы так, як у мінулым Flash выкарыстоўваўся для навуковых і біялагічных дыяграм.
19. Аніміраваны гадзіннік SVG
У гэтай дэманстрацыі мы маем прыклад SVG, які адлюстроўвае круціцца лічбавы гадзіннік. Мне падалося, што эфект вельмі цікавы, бо гэта не толькі добры прыклад аніміраванага тэксту, але і заўважце, як тыльны бок кожнага персанажа мяняе колер у залежнасці ад становішча ў аніміраваным павароце.
20. Інтэрактыўная SVG на iPad
Як ужо згадвалася ва ўводзінах, да SVG-графікі можна атрымаць доступ праз DOM, таму да іх можна прымацаваць апрацоўшчыкі падзей гэтак жа, як і з іншымі элементамі на старонцы. З улікам гэтага Герт-джан Ван Дэр Уэл стварыў простую дэманстрацыю, якая дэманструе, як можна ўзаемадзейнічаць з графікай SVG на iPad. Калі вы пагулялі з рухам аб'ектаў у браўзэры на прыладах iOS, шмат што з гэтага вам падасца знаёмым, але гэта карысная дэма-версія для тых, хто яшчэ не меў магчымасці разабрацца ў гэтым!
Спадабалася гэта? Прачытайце гэтыя!
- Як стварыць прыкладанне
- Бясплатны выбар шрыфта графіці
- Падручнікі ілюстратара: дзівосныя ідэі, якія можна паспрабаваць сёння!
- Канчатковае кіраўніцтва па распрацоўцы лепшых лагатыпаў
- Лепшыя бясплатныя вэб-шрыфты для дызайнераў
- Карысныя і натхняюць шаблоны флаераў
- Лепшыя 3D-фільмы 2013 года
- Даведайцеся, што чакае дапоўненая рэальнасць
Addy Osmani - дызайнер карыстацкага інтэрфейсу і ў цяперашні час інжынер-праграміст AOL. Ён таксама з'яўляецца членам каманд jQuery Bug Triage і API Docs. Яго штотыднёвыя паведамленні пра карыстацкі інтэрфейс можна знайсці на AddyOsmani.com.
Якое выкарыстанне SVG вас уразіла больш за ўсё? Якія з іх павінны былі скласці наш спіс? Дайце нам ведаць у каментарах!
