Защо трябва да използвате SVG изображения: как да анимирате SVG и да ги направите светкавично бързи

Защо използваме SVG?

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

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

Нека сега да обсъдим някои от предимствата на SVG.

1. Текстово-базиран формат

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

2. Мащабируемост

Качеството на SVG изображенията не зависи от разделителната способност. За разлика от изображенията на други формати или шрифтове на икони, SVG изглеждат напълно остри на всяко устройство с произволен размер на екрана. Мащабируемостта също така означава, че ако използвате едно и също изображение в целия уебсайт, но в различни размери, използвате един SVG. Не е необходимо да създавате множество копия от него, както в случая на PNG. Вместо това вграждате едно и също изображение и определяте размера му директно в SVG кода.

Мащабируемост

3. Висока производителност

Ако приоритизирате изпълнението, трябва да използвате SVG. При SVG няма нужда от HTTP заявка за зареждане в файл с изображение. Страницата се зарежда по-бързо, тъй като няма файлове за изтегляне. По-бързото време за зареждане води до по-добра производителност на уеб страницата и по-високо класиране в търсачките. От своя страна подобрява потребителското изживяване.

4. Малък размер на файла

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

Размер на SVG файла

5. Многобройни възможности за редактиране и анимиране

За разлика от растерните изображения, векторните изображения могат да се редактират както в специални програми за векторно рисуване, така и директно в текстов редактор. Можете също така да редактирате цветове или размери на SVG икони директно чрез CSS. Що се отнася до анимирането на SVG, това може да се направи с помощта на SMIL, API за уеб анимации, WebGL или CSS анимация. Превъртете надолу, за да научите повече за CSS анимацията на SVG изображения.

6. Интеграция с HTML, XHTML и CSS

SVG е проектиран „за интегриране и разширяване на други известни технологии с отворена уеб платформа, като X / HTML, CSS и Javascript“, според W3C. Така че, за разлика от различните формати на изображения, този формат може лесно да се интегрира с други документи и технологии.

7. Поддръжка на обектния модел на документ W3C

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

Какви са неудобствата на SVG?

Големият брой малки части прави използването на SVG формата ирационално. Колкото повече части се състои от изображението, толкова по-тежко става то по размер.

Например, ето две SVG карти на Съединените щати. Вторият е малко по-подробен от първия. Но по-високото ниво на детайлност струва почти петкратно увеличение на размера на файла - 33 KB в сравнение със 147 KB. Ако тази карта не беше едноцветна, увеличението би било много по-голямо.

SVG карти

Ако картината е линейна и съдържа няколко цвята - SVG е решение. Ако обаче подробностите имат значение и има много такива, PNG или JPEG може да са по-подходящи.

Също така имайте предвид, че SVG не може да се използва за снимки. Ако използвате снимка на вашия уебсайт, SVG не е най-добрият вариант. Определено трябва да използвате формат на растерно изображение.

Как да оптимизираме SVG изображения

Когато изобразяваме векторен формат, трябва да напишем допълнителен SVG код. Крайният резултат трябва да бъде оптимизиран с помощта на различни услуги. Най-често за оптимизиране на SVG използвам инструмент NGO.js SVGO. Той е доста лесен за използване и няма нужда да качвате изображенията на други уебсайтове.

Пример за SVG оптимизация с помощта на SVGO

Как да анимирате SVG

SVG графиките в мрежата могат да бъдат анимирани по няколко начина:

  1. SMIL, което е естествената спецификация за SVG анимация
  2. API за уеб анимации, който е вграден API на JavaScript, който ви позволява да създавате по-сложни последователни анимации, без да зареждате външни скриптове
  3. WebGL
  4. CSS анимация

Нека разгледаме последния.

CSS анимацията се използва, за да се избегне претоварването на вашата услуга с големи библиотеки за анимиране на икони и зареждащи устройства.

За да видите примера на SVG, проверете анимирания жълтък, чийто графичен дизайн първоначално е начертан в Sketch.

SVG gif

Както можете да видите тук, аз използвам синтаксис за анимация на ключови кадри. Изпълнява се чрез задаване на начална позиция на елемент чрез id (0%), преход (50%) и крайна позиция (100%). За да се постигне плавна анимация, началните и крайните стойности са равни.

Ето някои предимства от използването на CSS подхода към SVG анимацията:

  1. Не ви е необходима външна библиотека.
  2. Предпроцесорите (като Sass или по-малко) ви позволяват да създавате променливи.
  3. Можете да използвате onAnimationEnd и някои други анимационни куки с вграден JavaScript.
  4. Този подход е лесен за използване за отзивчиво разработване на уеб дизайн, защото можете да модифицирате анимацията си с медийни заявки.

На недостатъците от използването на CSS анимации, са следните:

  1. Не можете да създадете някои сложни физически ефекти, които биха направили анимацията по-реалистична.
  2. Трябва да се направи много преизчисляване, ако коригирате времето.
  3. CSS и SVG графиките на мобилни устройства понякога изискват странни хакове.

Например

И все пак можем да направим няколко интересни проекта с помощта на проста и тривиална CSS анимация. Например направих проста видео игра, използвайки HTML, CSS и малко JavaScript. Всички SVG бяха изтеглени в скица. Целта на тази игра е да спаси принцесата. Във всяка ситуация просто кликнете. Можете да намерите проекта в моя GitHub.

За да приключи

SVG са чудесен формат на изображението. Те са мащабируеми, леки, базирани на текст и ефективни. Те са лесни за редактиране, анимиране и интегриране. Важното е, че те се поддържат от почти всеки браузър, с изключение на Internet Explorer 8 и Android 2.3.

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

Имате ли идея за софтуерен проект?

Моята компания KeenEthics е екип от опитни разработчици на уеб приложения. В случай, че имате нужда от безплатна оценка на подобен проект, не се колебайте да се свържете .

Можете да прочетете още подобни статии в моя Keen Blog. Позволете ми да ви предложа да прочетете „Стойността на потребителското тестване“ или 7 случая, когато не трябва да използвате Docker.

PS

Също така бих искал да кажа „благодаря“ на Марина Янул за съавторството на тази статия, както и на читателите, че я направиха до края!

Оригиналната статия, публикувана в блога на KeenEthics, може да бъде намерена тук: Нова перспектива защо, кога и как да използвам SVG.