В нашия предишна статия Видяхме как да използваме безплатен софтуер за включване на изображения във формат WebP. Сега ще видим защо създаваме SVG изображения за уебсайтове.
Едно от големите предизвикателства, пред които са изправени уеб дизайнерите, е броят на устройствата, с които хората се свързват към мрежата. В случаите, когато изображението е само илюстративно, загубата на качество не засяга много. Но ако е важно за съдържанието, като например инфографика, телена рамка или екранна снимка, трябва да се уверите, че съдържанието изглежда абсолютно еднакво във всеки размер.
Създавайте SVG изображения за уебсайтове
Какво представляват графиките във формат SVG
За да разберем разликата между този тип графики и тези, които обикновено се използват в уебсайтовете, трябва да обясним две концепции; тази на растерната графика и тази на векторната графика.
- Растерна графика: Този тип графики са изградени с пиксели, подредени в мрежа. На всеки пиксел се присвоява определен цвят. Качеството се основава на разделителната способност, която се определя от броя на пикселите на инч. С увеличаването на размера, плътността на пикселите намалява, което се отразява на качеството на изображението. Това означава, че за представяне на сложни изображения с много детайли, като например снимка, са необходими много големи файлове с определен размер.
- векторни графики: Те са изградени от геометрични обекти, изразени в математически формули. Тези обекти могат да бъдат линии, форми и криви. Тъй като са изразени в математически формули, техният размер може да се променя без загуба на качество и острота, представяйки детайлите точно.
Растерните графики са най-подходящи за много сложни изображения като снимки или които включват меки цветови нюанси и градиенти. За редактирането им е необходим специализиран софтуер за редактиране на снимки като Gimp.
От своя страна, Векторната графика е най-подходяща за илюстрации, икони и лога. Въпреки че има програми за редактиране като Inkscape, те също могат да се създават и редактират чрез писане на текст.
Графика във формат SVG (мащабируема векторна графика) Те се използват главно в уебсайтове и имат следните характеристики:
- Те не се влияят от резолюцията: Графиките във формат SVG изглеждат еднакво отчетливи на всеки размер на екрана, включително тези, които използват технология с много висока разделителна способност.
- Те са векторни графики: Както вече обяснихме, този тип графика се основава на представянето на геометрични обекти, изградени от математически формули. Промяната на размера просто прилага формулата към новите стойности.
- по-малък размер: SVG форматът не трябва да записва информация за всеки пиксел. Математическите формули за тяхното конструиране се съхраняват в текстов файл в компресиран XML формат.
- Edición: Както всички векторни графики, форматът SVG може да бъде модифициран със специфичен софтуер или текстов редактор.
- Интерактивност: Тези типове графики могат да бъдат анимирани или направени да отговарят на инструкциите на потребителя с помощта на CSS или Javascript код.
- съвместимост: Повечето устройства имат браузъри, които поддържат този графичен формат.
Казахме, че SVG графика може да бъде създадена с помощта на текстов редактор. Отворете текстовия редактор на вашата дистрибуция и поставете следния код:
<svg width="200" height="200">
<rect width="100%" height="100%" fill="white" />
<circle cx="50%" cy="50%" r="50" fill="green" />
<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>
</svg>
Сега го запазете с името circle.svg. Ако погледнете във вашия файлов мениджър, ще видите миниатюрата на зеления кръг и, ако го отворите с програма за преглед на изображения, ще го видите в пълен размер.
когато:
<svg width="200" height="200">
Задайте ширината и височината на 200 пиксела.
<rect width="100%" height="100%" fill="white" />
Установява, че фонът ще бъде бял квадрат, който ще заема цялата ширина и височина на изображението.
<circle cx="50%" cy="50%" r="50" fill="green" />
Поставете кръга в средата на изображението, задайте му радиус от 50 пиксела и посочете, че цветът ще бъде зелен.
<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>
Поставете думата Ubunlog в точния център на кръга.
В бъдеща статия ще видим графичните редактори за този формат.