Употреба на SVG в уеб

SVG е съкращение от Scalable Vector Graphics – името издава донякъде възможностите на формата, но само до някъде.

За да се постигнат различни яки уеб ефекти, дори и само със CSS има достатъчно техники, като в комбинация и с малко Javascript лесно се стига до wow ефекта. И въпреки, че понякога SVG се ползва като workaround, там където SVG стига лесно, е все още територия която е труднодостъпна за CSS и Javascript и то понякога иска доста писане. SVG съществува от 1999г. и му е време да стане популярен не само сред дизайнерите, а и сред девелопърите, тъй като с употребата на все повече мобилни устройства има нужда от изображения, които са малки по обем и без компромис с качеството при всяка резолюция.

SVG и Adobe Illustrator

Въпреки че Adobe Illustrator рядко е в списъка с програми, които уеб девелопърите владеят, това е инструментът, който с лекота създава SVG файлове и на елементарно ниво не би затруднил никой да си начертае няколко формички, бутони, текст, градиенти и тн.. да ги оцвети и да ги използва в проекта си. Предимставата са повече от недостатъците, всъщност недостатъка е един – трябва малко четене, за да може имплементацията и манипулацията на SVG обект да се случва лесно – при всички случай SVG е супер.
повече за SVG и Illustrator от Adobe
След като си създадете векторен файл с Illustrator или си намерите такъв от нета ( например от тук iconfinder.com ), обикновено това са (.ai, .eps…) отивате на File > Save as. В диалоговия прозорец избирате за формат SVG и ще видите следния диалог. Настройките по подразбиране вършат работа. Подробно описание на различните опции на диалоговия прозорец при експорт на SVG от Illustrator може да намерите тук.
SVG dialog box in Illustrator

От бутона “SVG Code” ще видите кода на файла, който според зависи по какъв начин ще използвате файла може да ви потрябва, а може и да не. Както е видно от кода SVG e всъщност изцяло XML базиран, което подсказва, че съдържанието му се поддава на манипулация със CSS и Javascript, тъй както всеки един HTML елемент.

Grab SGV file code from Illustrator Save As Dialog box

Така изглежда празен SVG файл с надпис SVG в него. С други думи кодът му е сравнително четим. Ако вземете този код и го сложете в <body> таг-а, браузърът ще рендне същото, което виждате в Illustrator.

Има една подробност относто шрифтовете. Ако използвате текстове в файла преди да запазите файла в Illustrator, селектирайте текстовете и отидете на Type > Create Outlines, така текста се конвертира в точки (вектори). Ако не го направите браузърът ще рендне текст с шрифт по подразбиране.

Ако не използвате Illustrator, SVG се създава лесно и с Inkscape (безплатна) и Sketch (OSX), WebCode, iDraw (OSX).

Който и графичен редактор да използвате, вероятността в файла да има данни, които няма да са нужни е голяма, така че е добра практика SVG файла да се оптимизира. Този инструмент предлага добри възможности за оптимизация на SVG файлове. Също предлага да качите за оптимизация както кода от файла, така и самия SVG файл. Друго готино е че докато оптимизирате файл, инструментът ви показва визуално какви са промените ако има такива.

Ако по някаква странна причина нямате интернет SVGO е Node.js базиран инструмент с приятен drag-and-drop интерфейс, който може да се използва offline.

Имплементация на SVG през HTML

Най-елементарния начин е да се вкара директно през HTML – по същия начин по който се вкарва всяко друго изображение с img таг.

Ако използвате този подход имайте на ум, че понякога сървъра може да се нуждае от един допълнителен ред в .htaccess файла.

Имплементация на SVG като обект

Вмъкване на SVG с <object> таг е приличен вариант, тъй като fallback-а се постига лесно по следния начин, както и лесно може да се комбинира с CSS / Javascript.

Имплементация на SVG с iFrame

Имплементация на SVG със CSS

Вмъкване през CSS

SVG може да се импортне и през CSS, по същия начин, както всяко друго изображение.

Стилване на SVG със CSS

 inline стилване

Стилове могат да се прилагат на SVG елементи като се използва специален тип атрибути – презентационни атрибути ( презентационните атрибути са case sensitive ). На изображението по-долу се вижда един такъв тип атрибут – fill, който дефинира цвета на всеки един от трите <circle> елемента. CSS еквивалентът на fill атрибута е background-color.

svg presentational attributes

Стилове могат да се прилагат с inline стилове както се вижда на този пен.

See the Pen XJvMyK by Sun (@ph1x) on CodePen.

 стилване със <style> таг в началото на документа Стилове могат да се прилагат също и в комбинация по няколко в <style> таг извън елемента както се вижда на този пен.    

See the Pen xbvdxL by Sun (@ph1x) on CodePen.

 стилването с външен css файл също е възможно, като линкването става с <?xml-stylesheet>

Много от CSS селекторите, могат да се използват при стилване на SVG – наред със стандартните class и ID, могат да се използват псевдо класове ( :first-of-type ) и динамични псевдо класове ( :hover ). За съжаление :before и :after не се поддържат.

SVG спрайтове и defs | use

Логиката на SVG спрайтовете е сходна с тази, по която се правят обикновените css спрайтове ( повече информация за css спрайтовете ). На следващия пен може да видите по какъв начин се използват няколко SVG файла комбинирани на едно място. Това място е <defs> тага. В него се дефинират SVG обектите, като кодът за всеки обект може да се вземе директно от Illustrator ( по-горе е описано как става това ). След като обектите са дефинирани могат да се извикват чрез <use> таг-а.

See the Pen WbVPvV by Sun (@ph1x) on CodePen.

Да – ако използвате много обекти, например си създадете цял сет от иконки, съдържанието в defs тага ще се раздуе доста и ще утежни визуално html файла. В такъв случай решението е да на defs тага да се изнесе в един файл defs.svg. В такъв случай леко се променя начина, по който се извиква всеки обект. Вместо

се изписва

Разликата е че и има добавен defs.svg преди самия обект. Този подход с разделяне на svg дефинициите от html файла е по-добрата практика за извикване. Друг плюс при този подход е че могат да се създадат няколко файла с дефиниции на различни svg групи обекти, за да е по-прегледно, например icons.svg, menu.svg, posts.svg и тн, като се извикват съответно чрез icons.svg#, menu.svg#, posts.svg# и тн… Когато създавате външен svg файл с дефиниции се подсигурете отварящият svg таг, съдържащ дефинициите да има тези атрибути

Никоя версия на IE до момента не поддържа използването на <use> тага. Решението за това е скрипт, който се казва svg4everybody. Този скрипт добавя поддръжка на тази техника за IE9, IE10 и IE11. Повече за SVG спрайтове тук.

Браузърна поддръжка на SVG

Докато модерните браузъри нямат проблем с дисплейването на SVG естествено при IE има какво да се каже – поддръжката е “проблемна” при IE8 и надолу, както и Android 2.3 и надолу. Кой използва съзнателно IE8 и надолу?!

Друг бъг е че transform-origin в проценти не работи както трябва под Firefox.

Въпреки тези “забележки” SVG има доста добра браузърна поддръжка.

…и няколко примера

Ако не сте убедени, че използвнето на SVG пред CSS в някои случаи си заслужава занимавката, следващите примери може да ви накарат да размислите.

Gooey Effects

Elastic Sidebar Material Design

Text Input Effects

Elastic SVG Elements

Draw Worm

Dynamic Depth of Field with SVG

Motion Blur in Modal

Navigation Knob

Circulus

Tympanus > SVG examples

За различните аспекти и трикове при употребата на SVG може да се изпише доста, дано съм с този пост съм успял да посъбудя интерес, тъй като форматът има силен потенциал.

ресурси и използвани материали:

csstricks.com
sarasoueidan.com
svgontheweb.com

Коментари през Facebook

Коментирай първи.

Остави коментар

Your email address will not be published. Required fields are marked *