Мащабируемата векторна графика или SVG играе важна роля в дизайна на уебсайтове днес. Ако в момента не използвате SVG в работата си по уеб дизайн, ето няколко причини, поради които трябва да започнете да го правите, както и резервни варианти, които можете да използвате за по-стари браузъри, които не поддържат тези файлове.
Резолюция
Най-голямото предимство на SVG е независимостта на резолюцията. Тъй като SVG файловете са векторни графики (за разлика от растерни изображения, базирани на пиксели), можете да ги преоразмерите, без да губите качеството на изображението. Това е особено полезно, когато създавате адаптивни уебсайтове, които трябва да изглеждат добре и да работят добре в широк диапазон от размери на екрана и устройства. Можете да мащабирате SVG файловете нагоре или надолу, за да се съобразите с променящите се размери и нужди от оформление на вашия адаптивен уебсайт, без да компрометирате качеството им по никакъв начин.
Като цяло SVG имат по-гладък и ясен вид от изображенията в други формати, независимо от размера.
Размер на файла
Едно предизвикателство при използването на растерни изображения (напр. JPG, PNG, GIF) на адаптивни уебсайтове е размерът на файла. Тъй като растерните изображения не се мащабират по начина, по който го правят векторните изображения, вие трябва да доставите своите базирани на пиксели изображения в най-големия размер, в който ще бъдат показани. Това е така, защото винаги можете да направите изображение по-малко и да запазите качеството му, но същото не важи за увеличаването на изображенията. Резултатът е изображения, които са много по-големи от размера, в който се гледат, принуждавайки браузърите да изтеглят големи файлове.
За разлика от тях, векторните графики са мащабируеми, така че можете да използвате много малки размери на файлове, независимо от това колко големи трябва да бъдат показани тези изображения. Това в крайна сметка оптимизира цялостната производителност на сайта и скоростта на изтегляне.
CSS стил
Можете лесно да добавите SVG директно към HTML на страница. Това е известно като вграден SVG. Едно предимство от използването на вграден SVG е, че тъй като графиките всъщност се рисуват от браузъра, няма нужда от HTTP заявка за извличане на файл с изображение.
Друго предимство: Можете да стилизирате вграден SVG с CSS. Трябва да промените цвета на SVG икона? Вместо да редактирате това изображение в софтуер за редактиране на графики и след това да експортирате и качите файла отново, можете да промените SVG файла просто с няколко реда CSS. Можете да използвате CSS, за да промените SVG за състояния на задържане и други дизайнерски нужди.
Долен ред
Тъй като можете да стилизирате вградени SVG файлове с CSS, можете да използвате и CSS анимации върху тях. CSS трансформациите и преходите са два лесни начина да добавите малко живот към SVG. Можете да получите богато изживяване, подобно на Flash, на страница, без да използвате Flash, който iPad вече не поддържа. Всъщност Adobe постепенно премахва Flash до края на 2020 г.
Използване на SVG
Колкото и мощни да са SVG, те не могат да заменят всеки друг формат на изображение. Снимките, които изискват богата дълбочина на цветовете, все още трябва да бъдат във формат-j.webp
SVG също е подходящ за някои сложни илюстрации, като например графики, диаграми и фирмени лога. Всички тези графики се възползват от това, че са мащабируеми и могат да бъдат стилизирани с CSS.
Поддръжка за по-стари браузъри
Текущата поддръжка за SVG е много добра в съвременните уеб браузъри. Единствените браузъри, които не поддържат тези графики, са старите версии на Internet Explorer (които Microsoft вече не поддържа) и няколко стари версии на Android. Като цяло, много малък процент от хората, които сърфират, все още използват тези браузъри и този брой продължава да намалява. Това означава, че можете да използвате SVG на уебсайта си без притеснение.
Ако искате да предоставите резервен вариант за SVG, използвайте инструмент като Grumpicon от Filament Group. Този ресурс създава-p.webp
