SVG файлове.

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

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

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

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

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

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

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

През 1994 г. нидерландският софтуерен инженер Martijn Koster за първи път предлага файловия формат SVG.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

След като създадете изображение във Photoshop, щракнете върху File (Файл) > Export (Експортиране) > Export As (Експортиране като).
Щракнете върху падащото меню Format (Формат) в полето, което се показва, и след това изберете SVG.
Изберете Export All (Експортиране на всички) и запазете файла.

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

Как да създадете SVG файл в Illustrator

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

След като съставите произведение в Illustrator, изберете текста, за да създадете контури. Това ще помогне да се избегнат проблеми със заместване на шрифтове, когато преглеждате вашите произведения на други компютри. Изберете Type (Тип) – Create Outlines (Създаване на контури)
Запазете вашия файл, Изберете File (Файл) > Save As (Запазване като). Щракнете върху падащото меню Format (Формат) в полето, което се показва, и след това изберете SVG.
Можете също да експортирате редактирания SVG като използвате File (Файл) > Export (Експортиране) > Export As (Експортиране като) и изберете SVG като формат. Това ви позволява да коригирате настройките за експортиране като прецизност и съвместимост.

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

Изберете файла и отворете своя SVG в Illustrator. Или можете да импортирате SVG файла във вашия съществуващ документ в Illustrator, като използвате File (Файл) > Place (Поставяне).
Използвайте Selection Tool (Инструмент за избор) (или Direct Selection Tool (Инструмент за директен избор), за да изберете отделни пътеки, фигури или групи в SVG. Можете или да преоразмерявате, оформяте, трансформирате или редактирате пътища, да добавяте цвят и ефекти

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

style

grid width 8

https://main--cc--adobecom.hlx.page/cc-shared/fragments/seo-articles/express-blade