SVG файлове.

Какво ще научите.

• Какво представлява SVG файлът?
  
• История на SVG файла
  
• За какво се използват SVG файловете?
  
• Предимства и недостатъци на SVG файловете
  
• Как да отворите SVG файл
  
• Как да създадете и редактирате SVG файл
  
• SVG файлове: често задавани въпроси

Какво представлява SVG файлът?

Scalable Vector Graphics (SVG) е уеб-съвместим формат за векторни файлове. За разлика от базираните на пиксели растерни файлове като JPEG векторните файлове съхраняват изображения чрез математически формули, базирани на точки и линии в мрежа. Това означава, че векторните файлове като SVG могат да бъдат значително преоразмерени, без да губят нищо от тяхното качество, което ги прави идеални за лога и сложни онлайн графики. 

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

Можете лесно да забележите SVG файл по разширението му .svg.

История на SVG файла.

Историята на SVG файла датира от края на 90-те години на миналия век, когато World Wide Web Consortium (W3C) събира предложения от разработчици за нов тип векторен графичен формат. Представени са шест конкуриращи се предложения, които помагат да се формира това, което в крайна сметка се превръща в SVG формат на W3C.  

Отнема известно време преди SVG файловете да натрупат популярност. До 2017 г. поддръжката им е сравнително малка, но тогава хората започват да виждат ползите от използването на SVG в съвременните уеб браузъри. SVG файловете вече се използват широко за 2D изображения в уеб сайтове, тъй като повечето браузъри и приложения за чертане за векторни файлове могат лесно да работят с тях.

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

Мащабируемата векторна графика измина дълъг път през последните години – но за какво се използват SVG файловете на практика?

Икони на уеб сайтове и лога.

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

Инфографики и илюстрации.

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

Вижте още векторни файлове

Предимства и недостатъци на SVG файловете.

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

Предимства на SVG файловете.

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

Недостатъци на SVG файловете.

• SVG файловете вършат чудесна работа за уеб графики като лога, илюстрации и диаграми. Но липсата на пиксели затруднява показването на висококачествени цифрови снимки. JPEG файловете обикновено са по-добри за показване на подробни снимки.
  
• Само съвременните браузъри могат да поддържат SVG изображения. Може да ви е трудно да използвате SVG файлове с Internet Explorer 8 и други по-стари браузъри.
  
• Кодът, съдържащ се в SVG изображенията, може да бъде труден за разбиране, ако сте нов в този файлов формат. 

Как да отворите SVG файл.

От Chrome и Edge до Safari и Firefox в наши дни всички основни браузъри ви позволяват да отваряте SVG файлове – независимо дали сте с Mac, или Windows. Просто стартирайте браузъра си и щракнете върху Файл > Отвори, за да изберете файла, който искате да прегледате. След това той ще се покаже във вашия браузър.

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

Как да създадете и редактирате SVG файл.

Следвайте тези стъпки, когато използвате Adobe Photoshop:

1. След като създадете изображение във Photoshop, щракнете върху Файл > Експорт > Експортиране като.
   
2. Щракнете върху падащото меню Формат в полето, което се показва, и след това изберете SVG.
   
3. Изберете Експортиране на всички и запазете файла. 

Полезен съвет: тъй като Photoshop е растерен графичен редактор, много хора предпочитат да създават и редактират SVG файлове в Adobe Illustrator, векторен графичен редактор.

SVG файлове: често задавани въпроси.

SVG файловете поддържат ли анимация?

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

Как мога да различа SVG файл?

Най-лесният начин да различите SVG файл е като проверите кода за разширение. SVG файл ще е посочен като .svg файл. Можете също да разпознаете дали SVG файлове са векторни изображения, като ги увеличите до 200% или повече на екрана на компютъра. Векторното изображение ще запази своите чисти линии и плътни цветове, вместо да стане пикселизирано или замъглено.

SVG файловете само в интернет ли могат да се използват?

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

Колко големи са SVG файловете?

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

Каква е разликата между SVG и PNG файловете?

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