Как (и защо) SVG ще поеме през 2018 г.

/2019-11-08 21:00:22/
Irving
/Графика/

2018 г. ще бъде годината на SVG. Форматът на файловете с изображения нараства все по-популярно и използвано през последните няколко години, но 2018 г. е наистина когато той ще пробие.

Имате комбинацията от потребители с дисплеи с висока разделителна способност и необходимостта от светкавично бързо зареждане, за да благодарите. И докато преминаването към SVG може да звучи като голяма работа; не е.

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

Разгледайте дизайнерските ресурси

SVG е направен за мрежата

Mozilla го описва така:

SVG е базиран на XML език за описание на векторни изображения. Това е основно маркиране, като HTML, с изключение на това, че имате много различни елементи за определяне на формите, които искате да се показват във вашето изображение, и ефектите, които искате да приложите към тези форми. SVG е за маркиране на графики, а не съдържание. В най-простия край на спектъра имате елементи за създаване на прости форми, като и. По-модерните SVG функции включват (трансформиране на цветове с помощта на трансформационна матрица, ) (анимиране на части от вашата векторна графика, ) и (нанесете маска върху горната част на изображението.)

Основните предимства на SVG за уеб дизайнерите включват възможността да създават прости SVG рендери в редактор на код или текст, докато сложна графика може да се рисува в програма като Adobe Illustrator; SVG текстът е достъпен; SVG файловете са лесни за стил и сценарий; и вие създавате с векторен формат, който показва добре във всеки размер. SVG форматите се поддържат от съвременните браузъри, са устойчиви в бъдеще и са много компресивни.

Някои от недостатъците са, че проектирането на SVG може да се усложни и първоначално е малко по-трудно. Другият проблем е, че някои деградирали браузъри просто не разбират какво представляват.

Имате нужда от по-добро разбиране на SVG? Имаме ръководство за начинаещи за SVG.

Как дизайнерите използват SVG

Едно от предимствата на SVG е, че можете да правите много различни неща с него. SVG може да се използва за:

Logos
Фонове, шарки и текстури
Анимация
Отзивчиви изображения
Икони

Дизайнерите могат да използват SVG за всеки елемент в дизайна, където векторният формат е приложимо решение. Могат да заменят JPG, PNG и GIF, сред другите формати.

Правило за векторни формати

Има голям шанс да използвате повече векторни формати. SVG не зависи от резолюцията. И това е огромен бонус, защото знаете, че вашите изображения ще изглеждат страхотно навсякъде.

Особено хубаво при работата с SVG изображения е, че не е нужно наистина да променяте работния си процес, за да ги внедрите. Ако проектирате в софтуер като Illustrator или Sketch, процесът - различен от крайния експорт - е идентичен. Единствената уловка е, че вероятно ще искате да превърнете всички текстови елементи в очертания в Illustrator, но много хора вече правят това.

Когато подготвяте SVG файлове, трябва да запомните едно важно нещо. За да ги поддържате възможно най-мънички, не забравяйте да изтриете всички боклуци, които не са ви необходими. (Изчистете тази картон!) SVG в мрежата има няколко страхотни съвета за рисуване на елементи и запазване на SVG файлове по възможно най-добрия начин.

Текстово-базираният формат е добър за SEO

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

Да, можете да добавите алт информация с други изображения, но има толкова много място за ключови думи. С SVG можете да създавате по-удобни за търсене изображения и просто да качвате. Google индексира цялото SVG съдържание, включително самостоятелните файлове и когато SVGs са вградени директно в HTML.

SVG е лек

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

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

Ако SVG е огромен, помислете за експортирането му и JPG или PNG. (Дори и да изглежда противоречиво. Реалността е, че повечето дизайнери ще продължат да използват комбинация от типове файлове с изображения; просто очаквайте да използвате повече SVG, отколкото преди.)

Редактирането е лесно

Ако сте свикнали да рисувате икони или лога или каквото и да е в софтуера за векторно рисуване, нищо за процеса на редактиране не се променя за вас.

Но ако напишете SVG, вие сте за почерпка. Просто променете думата или координатите или цвета в текстовия редактор и бум, промяната се прави. Трудно е да направите редактирането по-лесно от това.

Създавайте неподвижни или анимирани изображения с SVG

За разлика от повечето други формати на изображения, които ви позволяват да имате неподвижно или движещо се изображение, SVG позволява и двете. Можете да създадете неподвижно изображение или анимация. И всичко работи почти по същия начин. (Този прекрасен пример е урок за това как да анимирате елемент по SVG пътека!)

Тези малки ползи помагат за изтласкването на SVG на преден план в съзнанието на дизайнерите. Не е нужно да научите нов инструмент или техника; вече разполагате с всичко необходимо на SVG.

заключение

Ето голямата причина 2018 г. ще бъде годината, в която SVG започва да превзема: практична е.

С всеки, който използва дисплеи с висока разделителна способност, векторните формати наистина са начинът да вървят. Всичко мащабира безупречно и не е нужно да се притеснявате от пикселация. SVGs правят страхотни лога (статични или отзивчиви), графики и фонове, икони и малки изображения и анимации. Файловете са малки и се зареждат бързо и няма огромна крива на обучение, що се отнася до внедряването на SVG в дизайна на вашия уебсайт.

Можете буквално да започнете да използвате SVG изображения в момента.