Ползите от използването на мащабируема векторна графика
Scalable Vector Graphics, или SVG, играят важна роля в дизайна на уеб сайтове днес. Ако понастоящем не използвате SVG в работата си за уеб дизайн, има няколко причини, поради които трябва да започнете да правите това, както и резервни копия, които можете да използвате за по-стари браузъри, които не поддържат тези файлове.
Резолюция
Най-голямата полза от SVG е независимостта на резолюцията. Тъй като файловете на SVG са векторни графики вместо растерни изображения, базирани на пиксели, те могат да бъдат променяни, без да се губи качеството на изображението. Това е особено полезно, когато създавате отзивчиви сайтове, които трябва да изглеждат добре и да работят добре в широк диапазон от размери и устройства на екрана .
Файловете на SVG могат да бъдат мащабирани нагоре или надолу, за да се съобразят с променящите се размери и оформления на нужния ви уеб сайт и не е нужно да се безпокоите, че тези графики са компрометирали качеството на която и да е стъпка по пътя.
Размер на файла
Едно от предизвикателствата при използването на растерни изображения (JPG, PNG, GIF) на отзивчиви сайтове е размерът на файловете на тези изображения. Тъй като растерните изображения не мащабират начина, по който векторни правят, трябва да доставяте вашите пикселни изображения в най-големия размер, на който ще бъдат показани. Това е така, защото винаги можете да направите изображението по-малко и да запазите качеството му, но същото не е вярно за увеличаване на изображението. Крайният резултат е, че често имате изображения, които са много по-големи от тези, които се показват на екрана на човек, което означава, че те ненужно са принудени да изтеглят много голям файл.
SVG адресира това предизвикателство. Тъй като векторни графики са мащабируеми, можете да имате много малки размери на файлове, независимо колко големи са тези изображения, които трябва да бъдат показани. Това в крайна сметка ще има положително въздействие върху цялостната производителност на сайта и скоростта на изтегляне.
CSS Styling
SVG кодът може да бъде добавен директно към HTML на страницата. Това е известно като "inline SVG". Едно от предимствата на използването на вградения SVG е, че тъй като графиките всъщност се наричат от браузъра въз основа на вашия код, няма нужда да правите HTTP заявка за извличане на файл с изображение. Друго предимство е, че вграденият SVG може да бъде оформен с CSS.
Трябва да промените цвета на икона на SVG? Вместо да се налага да отворите изображението в някакъв софтуер за редактиране и да експортирате и качите файла отново, можете просто да промените SVG файла с няколко реда CSS.
Можете да използвате и други стилове на CSS върху графики на SVG, за да ги промените на държави, които се занимават с проектиране или за определени дизайнерски нужди. Можете дори да оживите тези графики, за да добавите известно движение и интерактивност към страница.
Анимации
Тъй като вградените SVG файлове могат да бъдат оформени с CSS, можете да използвате и CSS анимации върху тях. CSS трансформациите и преходите са два лесни начина за добавяне на живо към SVG файлове. Можете да получите богат опит, подобен на Flash, на дадена страница, без да се поддавате на недостатъците, които идват с използването на Flash в сайтове днес.
Използване на SVG
Колкото и мощен, колкото SVG, тези графики не могат да заместят всеки друг формат на изображението, който използвате на уебсайта си. Снимките, които изискват дълбока цветна дълбочина, все пак ще трябва да бъдат JPG или PNG файл, но обикновените изображения като иконите са идеално пригодени да бъдат изпълнени като SVG.
SVG може да бъде подходящ и за по-сложни илюстрации, като фирмени лога или графики и диаграми. Всички графики ще се възползват от възможността да бъдат мащабируеми, способни да бъдат оформени с CSS и другите предимства, изброени в тази статия.
Поддръжка за по-стари браузъри
Текущата поддръжка за SVG е много добра в съвременните уеб браузъри. Единствените браузъри, които наистина нямат поддръжка за тези графики, са по-старите версии на Internet Explorer (версия 8 и по-долу) и няколко по-стари версии на Android. Общо взето, много малък процент от популацията на браузване все още използва тези браузъри и този брой продължава да се свива. Това означава, че SVG може да се използва доста безопасно на уеб сайтове днес.
Ако искате да направите резервно копие на SVG, можете да използвате инструмент като Grumpicon от групата на филама. Този ресурс ще вземе вашите SVG графични файлове и ще създаде PNG резерви за по-старите браузъри.
Редактиран от Jeremy Girard на 1/27/17