Товаров:
Ад перакладчыка. Прыводжу вольны пераклад цудоўнай артыкула " Styling And Animating SVGs With CSS "ад Sara Soueidan .
Дадзены артыкул з'яўляецца адной з пяці ў серыі, прысвечанай фармату SVG. Больш мне сказаць няма чаго - чытайце Сару.
CSS можа выкарыстоўвацца для стылізацыі і анімацыі вектарнай графікі гэтак жа сама, як для стылізацыі і анімацыі HTML-элементаў. У гэтым артыкуле, якая з'яўляецца вытворнай ад майго нядаўняга выступу на канферэнцыях CSSconf EU і From the Front , Дзе я распавядала пра перспектывы і прыёмах працы з фарматам вектарнай графікі SVG і магчымасцях яе стылізацыі пры дапамозе CSS.
Я пакажу, якім чынам можна экспотировать і аптымізаваць SVG-файлы, спосабы ўстаўкі гэтых файлаў у web-дакумент, спосабы стылізацыі і анімацыі SVG-файлаў, на практыцы выкарыстоўваецца і ў дачыненні стылі і анімацыю да SVG-файлаў-прыкладаў.
ўвядзенне
Маштабуецца вектарная графіка (SVG) уяўляе з сябе вектарныя малюнак для двухмернай графікі (2D), у аснове якой ляжыць фармат XML. Падобная графіка мае падтрымку інтэрактыўнасці і анімацыі. Іншымі словамі, SVG-файлы ўяўляюць з сябе XML-тэгі, якія генеруюць фігуры і малюнкі; да гэтых постацям і малюнках могуць быць ужытыя стылі і эфекты з дапамогай CSS сапраўды таксама, як гэта робіцца са звычайнымі HTML-элементамі.
Анімацыя або інтэрактыўнасць ў SVG-файлах могуць быць дасягнута двума спосабамі - з дапамогай CSS або з дапамогай Javascript. У гэтым артыкуле будзе разгледжаны першы спосаб - як гэта зрабіць з дапамогай CSS.
Існуе шмат прычын, чаму трэба рабіць выбар на карысць SVG і чаму трэба выкарыстоўваць гэты фармат сёння:
- графіка ў фармаце SVG з'яўляецца маштабуецца і не якая залежыць ад дазволу. Такая графіка выглядае пышна ўсюды, няхай гэта будзе экраны з высокім дазволам Retina ці ж друкаваны варыянт;
- выявы маюць выдатную падтрымку браўзэраў . Стварыць fallbacks для браўзэраў, якія не маюць падтрымкі, вельмі лёгка і ў гэтым артыкуле будзе паказана, як гэта зрабіць.
- паколькі файлы ў сваёй аснове з'яўляюцца тэкстам, то яны добра паддаюцца архівавання, што дазваляе зрабіць іх значна менш па памеры, чым файлы фарматаў JPEG ці PNG.
- файлы стылізуются і аніміруе з дапамогай CSS ці Javascript
- файлы фармату SVG маюць убудаваную падтрымку clipping, masking, background blend modes і filters. Гэтыя магчымасці эквіваленты магчымасцям звычайнага графічнага рэдактара, такога як Photoshop.
- да файлаў можна атрымаць доступ. Іншымі словамі, да іх можна атрымаць лёгкі доступ праз DOM API, што робіць іх выдатным інструментам для Інфаграфіка і візуалізацыі дадзеных. Гэта дае яму перавагу перад HTML5 Canvas, паколькі кантэнт апошняга недаступны. З іншага боку, можна лёгка інспектаваць кожны элемент файла з дапамогай інспектара элементаў браўзэра гэтак жа сама, як гэта робіцца са звычайнымі HTML-элементамі. Акрамя гэтага, файлы даступныя для экранных прылад чытання, калі гэта неабходна. У апошняй частцы гэтым артыкуле будзе больш падрабязна разгледжана пытанне даступнасці файлаў.
- існуе дастаткова інструментаў для стварэння, рэдагавання і аптымізацыі файлаў. Акрамя гэтага, існуюць інструменты для палягчэння і працоўны працэс. Гэтыя інструменты таксама будуць разгледжаны пазней.
Экспартаванне SVG з графічных рэдактараў і іх аптымізацыя
З усіх рэдактараў вектарнай графікі маецца тры самых папулярных:
- Adobe Illustrator
- Inkscape
- Sketch
Adobe Illustrator - платнае прыкладанне ад Adobe. Вельмі папулярны рэдактар з выдатным інтэрфейсам і мноствам магчымасцяў, што робіць яго любімым інструментам многіх дызайнераў.
Inkscape з'яўляецца бясплатнай альтэрнатывай. Нягледзячы на больш сціплы інтэрфейс, гэты рэдактар мае ўсе неабходныя магчымасці для працы з вектарнай графікай.
Sketch - гэта дадатак толькі пад Mac OS X. Яно таксама не бясплатнае, але ўжо паспела стаць досыць папулярным і сабраць сваю групу прыхільнікаў. Валодае мноствам інструментаў і магчымасцяў, што робіць працу ў гэтым рэдактары хутчэй і зручней.
Для стварэння вектарнай графікі можна выбраць любы з гэтых трох рэдактараў. Пасля стварэння SVG-файлаў перад іх устаўкай на web-старонку трэба выканаць дзве аперацыі: экспартаванне з рэдактара і ачыстка гэтых файлаў ад лішніх дадзеных.
У гэтым артыкуле я буду паказваць экспартаванне і аптымізацыю SVG-файлаў на прыкладзе рэдактара Adobe Illustrator. Гэты працэс практычна нічым не адрозніваецца ад падобнага ў іншых рэдактарах. За выключэннем некаторых спецыфічных налад самага Illustrator, пра што будзе згадвацца па ходзе гэтага артыкула.
Для экспартавання графікі ў SVG-фармат у Illustrator трэба перайсці ў меню па шляху "File" - "Save as", а затым выбраць фармат .svg з выпадальнага спісу фарматаў. Налады ў акне памяняюцца ў адпаведнасці з абраным фарматам .svg. Напрыклад, можна будзе выбраць версію SVG; ўбудоўваць выявы ў выглядзе графікі або ж захаваць іх асобна, са стварэннем знешняга спасылкі на іх; выбраць спосаб стылізацыі (з дапамогай прэзентацыйных аттрибутов ці ж пры дапамозе CSS-стыляў у элеменце style).
Ніжэй паказана выява з акном экспарту SVG, у якім прадстаўлены найлепшы набор налад для захавання файлаў SVG для web:
Чаму прадстаўлены выбар налад з'яўляецца найлепшым, расказана Michaël Chaize ў выдатнай артыкуле Export SVG for the Web With Illustrator CC .
Па-за залежнасці ад таго, які графічны рэдактар быў абраны, у любым выпадку экспартуемы гэтым рэдактарам SVG-файл не будзе мець чыстага і аптымізаванага кода. SVG-файлы, экспартаваныя з графічных рэдактараў, як правіла ўтрымліваюць шмат дадатковай інфармацыі, такі як метададзеныя самога рэдактара, каментары, пустыя групы, дэфолтныя значэння, не аптымальныя значэння і іншыя падобныя значэння, якія можна бяспечна выдаліць або канвертаваць без аказання якога-небудзь эфекту на якасць SVG-малюнкаў. У выпадку, калі SVG-файлы створаныя не вамі, амаль заўсёды яны зьяўляюцца не аптымізаванымі; таму трэба ў абавязковым парадку выкарыстоўваць іншае прыкладанне для аптымізацыі SVG-графікі.
Маецца некалькі інструментаў для аптымізацыі SVG-кода. Peter Collingridge стварыў online-інструмент SVG Editor , У якім можна як ўстаўляць наўпрост, так і загружаць свае ўласныя SVG-файлы. Інструмент валодае шматлікімі магчымасцямі па аптымізацыі - выдаленнем дапаможнага кода, каментароў, пустых груп і гэтак далей. Адной з цікавых налад з'яўляецца кіраванне лікам знакаў пасля коскі для каардынатаў кропак:
SVG Editor валодае магчымасцю аўтаматычна перамяшчаць SVG-выява ў самую верхнюю частку дакумента. Прыемнай асаблівасцю дадзенай прылады з'яўляецца магчымасць папярэдняга прагляду, што дазваляе адразу вырашыць, якія змены пакінуць, а якія - не. Некаторыя налады могуць прывесці да парушэння кода SVG-файла.
Напрыклад, аднаго знака пасля коскі звычайна хапае для аптымізацыі SVG-выявы. Але калі вы працуеце з SVG-файлам, які мае шмат path, то пры памяншэнні колькасці знакаў пасля коскі з чатырох да аднаго можа прывесці да парушэння SVG-выявы. Таму магчымасць прадпрагляду з'яўляецца вялікім плюсам дадзенага рэдактара.
Рэдактар SVG Editor з'яўляецца online-інструментам. Калі вы аддаеце перавагу offline інструмент, то паспрабуйце SVGO (O - скарачэнне ад "аптымізатар"). Гэты інструмент заснаваны на Node.js, мае просты і зразумелы drag-and-drop інтэрфейс . Калі вам не падабацца выкарыстоўваць online-інструменты, то SVGO будзе добрай альтэрнатывай.
Ніжэй прадстаўлена простае малюнак фармату "да і пасля", ілюструе працэс аптымізацыі SVG-файла ў online-рэдактары SVG Editor. Чырвоным колерам вылучаныя paths і наглядна паказана, наколькі эфектыўны працэс аптымізацыі ў дадзеным выпадку:
Звярніце ўвагу на памер зыходнага SVG-файла і памер яго аптымізаванай версіі. Па-за усялякіх сумневаў, аптымізаваная версія больш лёгкачытальным.
Пасля аптымізацыі SVG-файлаў яны гатовыя для ўбудавання іх на web-старонку, для далейшай стылізацыі і анімацыі з дапамогай CSS.
PS
На практыцы скарыстаўся абодвума інструментамі аптымізацыі SVG - SVG Editor і SVGO. Магу сказаць з асабістага досведу, што SVGO валодае значна лепшым каэфіцыентам аптымізацыі. Дарэчы сказаць, гэта айчынная распрацоўка каманды Yandex.