Всичко, което трябва да знаете за SVG в мрежата

Страница 1 от 4: Основите на SVG
  • Основите на SVG
  • Как да използвам SVG
  • Правете фигури с SVG
  • Текстови и CSS стилове

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

SVG бързи връзки

1. Основите на SVG
две. Как да използвам SVG
3. Правете фигури с SVG
Четири. Текстови и CSS стилове

Ако все още използвате PNG за лога, икони и интерактивни елементи на вашия сайт, е време да се свържете с програмата и да преминете към SVG. Ето всичко, което трябва да знаете за въвеждането на някаква векторна любов във вашите дизайни. По-конкретно, на тази страница ще намерите основите на SVG, на страница 2 ние изследваме как можете да използвате SVG във вашите проекти, страница 3 ви показва как да правите фигури от SVG и страница 4 изследва стилове на текст и CSS. Можете да използвате падащото меню или менюто отдясно, за да преминете направо към раздела, който ви интересува.



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

SVG в мрежата: Растер срещу вектор

Растерните изображения изглеждат добре в оригиналния си размер, но векторите се мащабират перфектно

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

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

Модифицируем
SVG може да бъде анимиран и оформен с CSS. Можете да променяте цветове, размери, шрифтове и много други. Елементите в SVG могат да бъдат отзивчиви и да използват взаимодействие. Анимациите, които използвате за HTML елементи, могат да се използват и за SVG елементи.

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

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

За какво се използва SVG?

SVG се използва недостатъчно, отчасти защото отне много време, за да се постигне широко разпространена поддръжка в браузърите. Ако имате нужда от бързи, отзивчиви преживявания, SVG може да направи драматични подобрения на вашия сайт (както и брилянтни уеб хостинг ). Има много чудесни случаи на използване на SVG, като например:

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

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

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

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

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

Традиционни рисунки и илюстрации
Много традиционни илюстрации превеждат наистина добре на SVG, при условие че не са прекалено сложни. Скици и диаграми, които обясняват характеристиките на продукта или илюстрират концепция, могат да работят много добре.

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

Следваща страница: Работа със SVG

  • 1
  • две
  • 3
  • 4

Текуща страница: Основите на SVG

Следваща страница Как да използвам SVG