В този урок ще ти покажа как да запишеш векторна графика, която си създала в Scalable Vector Graphics (SVG) формат. SVG файловете са особено подходящи за използване в интернет, тъй като заемат малко пространство и могат да бъдат мащабирани до произволни размери, без да губят качество. Без значение дали имаш фирмен лого, икона или рисунка - след като създадеш векторната графика в Inkscape, ще те науча как да я запазиш оптимално за уеб употреба.
Най-важните изводи
- SVG файловете предлагат висока мащабируемост и нисък размер на файловете.
- Inkscape запазва векторните графики в SVG формат, който съдържа специална информация за слоевете и сетките.
- Съществуват различни типове SVG: оригиналния Inkscape SVG и оптимизираните SVG файлове, които са по-подходящи за уеб обиколки.
Стъпка по стъпка насоки
За да запазиш векторната графика в SVG формат, моля следвай тези стъпки:
Първо трябва да си уверен, че дизайнът ти в Inkscape е готов. Ако е така, кликни върху Файл в горното меню.
От падащото меню избери опцията Запази като. Това отваря нов прозорец, където можеш да избереш място за запазване и вид на файла.
По подразбиране Inkscape запазва в собствения си SVG формат, който съдържа информация за слоевете и структурата на дизайна ти. За уеб използване обаче е по-добре да използваш оптимизирана вариация. Намери мястото на твоят твърд диск, където искаш да запазиш файла.
От падащото меню за тип на файла избери или нормално SVG, или оптимизирано SVG. За първият опит избери нормално SVG.
Дай на файла име, например Logo_normal, и потвърди с Запази. Сега този файл е запазен в нормален SVG формат.
Ще забележиш, че този файл обикновено е по-малък от Inkscape SVG файла, който може да бъде около 11 КБ. Нормалния SVG може да е само 6 КБ, което вече изисква много по-малко пространство за съхранение.
Сега повтори процеса, като отново кликнеш на Файл и след това на Запази като, но този път избери оптимизирано SVG.
Напиши име на файла, например Logo_optimiert, и го запази. Ще бъдеш попитан за някои опции. Тук можеш да преобразуваш CSS атрибутите в XML атрибути и да направиш различни настройки за оптимизация. Препоръчвам да избереш опциите, които изглеждат най-подходящи за теб.
Потвърди избора си и провери новия размер на файла. Често оптимизираната вариация ще бъде само 4 КБ. Това показва, че по този начин файла е допълнително компресиран.
Когато отвориш файловете в браузъра, ще забележиш, че както нормалното, така и оптимизираното SVG изглеждат идентично. Въведи URL адресите на файловете в адресната лента на браузъра си, за да провериш резултата.
За да тестваш мащабируемостта им, можеш да настроиш нивото на увеличение в браузъра. Например, ако увеличиш до 50% или увеличиш до 300%, ще забележиш, че ръбовете остават остри, независимо от нивото на увеличение.
Тези свойства на SVG файловете ги правят подходящи за използване в уебсайтове. Можеш да бъдеш уверен, че логото ти ще се появи ясно и отчетливо на всяко устройство, независимо колко голямо е.
Като използваш SVG формата за графиките си, намаляваш не само размера на файла, но също така гарантираш, че качеството на дизайните ти остава същото при всяка резолюция.
Обобщение
В този урок научи как да запазваш векторните си графики в SVG формат. Това ти позволява да използваш дизайните си ефективно за уеб и има предимството на мащабируемост и нисък размер на файлите.
