Практическото ръководство за начинаещи към SVG
Въпреки че форматът не е особено нов, SVG изображенията са все по-популярни в дизайна на уебсайтове. Всички основни браузъри поддържат формата и SVG променя начина, по който мислим и изобразява изображения за мрежата.
Защо са толкова популярни? И какво точно е различно в SVG файл? Днес имаме отговорите и всичко останало, което трябва да знаете, за да започнете с този тип файлове. (Като малък бонус, всички изображения в тази публикация са достъпни в SVG от Creative Market.)
Разгледайте елементи Envato
Какво е SVG?
Мащабируема векторна графика или SVG са векторно базиран формат на изображения, разработен за мрежата. (Можете да научите повече за векторни спрямо растерни формати в предишна статия Design Shack.)
Форматът нарасна с популярност благодарение на дисплеите с висока разделителна способност, където потребителите могат да виждат всеки пиксел (ако съществуват). Тъй като SVG е векторен формат, изображението се изобразява по същия начин - и с перфектни детайли - независимо от размера.
Езикът за маркиране е разработен за първи път от World Wide Web Consortium, по-известен като W3C, през 1999 г. W3C определя SVG като „език за маркиране за описание на двуизмерни графични приложения и изображения и набор от свързани графични интерфейси за скриптове . " Поддържа се от всички съвременни браузъри - така че не е нужно да се притеснявате дали SVG файловете ще се представят правилно или не - и работи независимо от типа на устройството.
Практически приложения
И така, какво прави SVG толкова популярен и защо повече дизайнери го използват? Просто, защото работи.
SVG файловете са малки и мащабируеми. Въпреки че форматът е най-подходящ за форми, той има разнообразни практически приложения. Лого, икони, елементи на потребителски интерфейс и множество други дизайнерски битове могат да работят във SVG формат. Най-големият бонус е, че те са вектори. Така SVG изображение може да се използва с почти всеки размер. (Някои от най-малките файлове могат да бъдат само толкова големи.)
SVG файловете са лесни за манипулиране и контрол. Не само SVG може да бъде запазен като статично изображение, но можете също да добавите интерактивност и филтри, за да направите изображението още по-забавно. (SVG файловете могат да бъдат анимирани и оцветени.)
Ето няколко практически приложения за използване на SVG:
- Лого или изображения
- Като фоново изображение
- Като обект, като бутон
- картография
- Диаграми или рисунки
Като общо правило, SVG е най-подходящ за изображения, които могат да се развиват или променят с течение на времето или по тип устройство или да включват анимация или други динамични ефекти. Използвайте формата за визуални изображения като лога, скици, форми, графики и диаграми или други прости изображения.
Плюсове на използването на SVG
Така че защо бихте се отдалечили от надеждния JPG или GIF към SVG? Има много причини, поради които този формат може да се използва най-добре във вашите проекти. (И дори има потенциал да се използва SVG и за печат.)
- SVG е векторен формат. Това само по себе си е важно, когато мислите за отзивчив дизайн, където размерите на изображенията често се променят в зависимост от устройството. SVG е достатъчно малък, че един файл може да свърши цялата работа и няма загуба на качество на по-големите екрани.
- SVG изображенията и поведението са дефинирани с XML, което означава, че изображенията могат да бъдат търсени в индекси, скриптове и компресирани.
- Можете да направите почти всичко с SVG изображение, което можете да направите с всяко друго изображение, като например да включва различни техники за дизайн. Лесно е да добавяте филтри, режими на смесване, ефекти на изгаряне, цвят, изрязване и маскиране, падащи сенки и почти всяка друга техника, която харесвате.
- SVG файловете са достъпни.
- SVG работи с отворени уеб стандарти.
- Можете да създадете SVG с помощта на текстово базиран код или с изображение, което рисувате. Това позволява известна свобода, в зависимост от вашите нужди и ниво на опит в различни области.
- Размерите на файловете са малки и могат да бъдат улеснени. Това означава, че графиките, които може да са големи други, не са, увеличавайки времето за зареждане. (Винаги бонус.)
Минуси от използването на SVG
Вероятно се продавате на SVG, след като прочетете всички предимства, нали? Но има и няколко негатива, които трябва да се вземат предвид.
- По-старите браузъри - като Internet Explorer 8 или по-нова версия - не поддържат SVG. Вероятно можете да намерите обиколка (или може да не ви пука), но трябва да знаете, че може да има някои потребители, които не виждат вашите изображения.
- SVG не работи за сложни изображения като снимки. Това е формат, предназначен само за форми и линии.
Какво следва за SVG?
Бъдещето на SVG тепърва започва. Като възприет формат за мобилни изображения (и стандарт), използването и развитието на SVG ще продължи да расте.
Според W3C „SVG 2 в момента се разработва и ще добави нови функции за лесно използване на SVG, както и по-тясно интегриране с HTML, CSS и DOM и оттегляне на функции, които не се поддържат от всички браузъри.“
Други добавки също се хвърлят наоколо. Компаниите за хардуер за печат търсят начини за по-добро използване на SVG за печатните процеси и имат подкрепата на лидери в отрасъла като Adobe и Canon. Използването в картографирането и ГИС също се разширява, което позволява по-добри възможности за картографиране и увеличаване.
Когато наистина започнете да мислите за това, има почти безкрайна възможност за използване и прилагане на SVG в проекти в мрежата и в печатен дизайн. (Това е една от красотите на векторния формат.)
SVG ресурси
Сега, когато сте малко по-развълнувани от SVG и можете да видите защо и как може да бъде полезен за вашите проекти, имаме списък с ресурси, които да ви помогнат да започнете.
- Експортиране на SVG за мрежата с Adobe Illustrator
- Вградете SVG директно в HTML страници
- Създаване и изпълнение с SVG Video Series
- SVG профили
- CSS трикове: Използване на SVG
заключение
Вече използвате SVG за вашите проекти? Ако не, готови ли сте да направите промяната?
SVG набира популярност почти ежедневно и тъй като е инструмент с отворен код, тези промени и аванси се четат за вас веднага. Не сте обвързани с нито един доставчик или продукт и можете да създавате изображения, които са напълно съвместими в съвременната мрежа.
Снимки С любезното съдействие на творческия пазар .
