Когато създава уебсайт, уеб дизайнерът трябва да вземе предвид четири основни точки мислейки за оформлението и визуалния дизайн на мрежата, текст, изображения, цветове и шрифтове служители.
От тези четири точки, тази, на която ще придадем най-голямо значение в тази публикация, са изображенията, тъй като ще говорим за как да създавате svg файлове тъй като е много важно да се вземе предвид качеството на изображенията, с които работите.
Лечение със SVG файлове, се увеличава от професионалисти и не толкова професионалисти в света на дизайна.
Какво е SVG файл?
SVG е съкращението на английски за Scalabe Vector Graphics, на испански - Scalable Vector Graphics. Става дума за а отворен и свободен формат с които да създавате 2D графики, две измерения.
За разлика от други формати на изображения, като JPG или PNG, SVG е мащабируем формат, без значение колко искате да увеличите размера му, тъй като качеството на изображението ще се запази. Това е един от най-използваните формати в уеб страниците за поставяне на графики или векторни изображения.
Защо трябва да използваме SVG?
С този тип формат векторните изображения ще поддържат високо качество, независимо от техния размер и разделителна способност. Напротив, изображенията, съставени от растерни изображения, съставени от пиксели, губят качество, ако бъдат преоразмерени. Форматът SVG се определя от неговата лекота и гъвкавост.
Друг момент в полза на използването на този формат е неговият малък размер, тоест благодарение на това увеличава скоростта на зареждане на страниците, където се намират. Тези изображения се създават от браузъра, което помага за намаляване на натоварването и потреблението на сървъра.
Освен това те могат създаване на анимирани SVG изображения с които да придадем на нашия уебсайт атмосфера на близост и да привлечем вниманието на зрителите, които го посещават.
SVG е отворен формат, т.е. може да претърпи подобрения и актуализации. Освен това SVG файловете могат да се редактират с програми за векторно редактиране, например Adobe Illustartor, без да губят качеството на дисплея, могат да се гледат на всяко устройство. Освен това ни позволява да го отпечатаме, без да губим качество.
Как лесно да създавате SVG файлове
Може би най-лесният начин за създаване на SVG файлове, ако сте запознати с тях, е чрез програма за графичен дизайн, като Illustrator, Corel Draw и други.
Фокусирайки се върху програмата Illustrator, когато ще използваме SVG формата, трябва да вземем предвид дали сме използвали градиенти или други ефекти, като художествен ефект, размазване, четки, пиксели и т.н. тъй като те са растеризирани, когато се записват във файлов формат SVG. Препоръчително е да използвате SVG филтърни ефекти, за да добавите ефекти, така че да не могат да бъдат растеризирани по-късно.
Друг съвет, който ви даваме, е да използвате прости символи и пътеки в илюстрациите за по-добро представяне от посочения формат. Избягвайте използването на четки с много трасиране, тъй като това генерира по-голямо натоварване на данните.
За да създадете SVG файл в тази програма, Първото нещо, което трябва да имаме отворено, е празно платно, където ще работим върху нашата идея.
След като работата ни приключи, това, което ще направим, е да отидем на лентата с инструменти, която се показва над програмата, и ще изберем опцията за файл, запишете като и ще се появи изскачащ екран, където ни казва да дадем име на нашия файл и посочете формата, в който искаме да го запишем. Именно в този последен раздел трябва да маркираме опцията SVG.
Когато избирате типа SVG, се появява диалогов прозорец, който ни показва различни опции, които трябва да се вземат предвид.
Като общо правило, в първото поле, което се появява в таблицата, се появява профилът SVG 1.1. По-долу ни дава възможност да изберем източниците, в които ни дават по подразбиране е текст, маркиран в SVG и подмножество като никакъв. В нашия случай тази работа няма шрифтове, ако имаше, опцията за подмножества би трябвало да бъде променена от никакви на всички пиктограми.
Следващият раздел е много важен, ако посочим опция за вграждане, изображенията на композицията ще бъдат включени във файла, което ще доведе до увеличаване на теглото му, ако използваме много растерни изображения. Ако, от друга страна, маркираме опцията за свързване, трябва да внимаваме с изображенията, ако ще ги използваме на уебсайт, тъй като трябва да включим файловете на нашите изображения и също, което е много важно, да поддържаме техните пътека. Предимството на тази опция е, че файловете ще тежат много по-малко.
В раздела за разширени опции намираме опцията за SVG код, тази опция ще покаже как е файлът вътре, тоест кодът зад нашата работа. Тази опция е от съществено значение, ако искате да добавите своя SVG файл, например към вашия личен WordPress, просто трябва да копирате кода и да го добавите директно във вашия WordPress HTML редактор.
Последният съвет, който ви даваме, е, че когато записвате във формат SVG, имайте предвид, че ако работите с различни монтажни табла, ще се запази само активната монтажна област.
Ако искаме да отидем по-далеч и да приложим SVG ефекти към нашата илюстрация, Illustrator ни предлага набор от ефекти. За да направим това, ще трябва да изберем обект или група. За да приложим ефект, трябва да изберем прозореца с ефекти, SVG филтрите и да го приложим.
Когато прилагате SVG филтър, програмата за проектиране ни показва прозорец къде Появява се списък с филтри, които могат да бъдат приложени., след като изберем един, Illustrator ни показва как изглежда, но в растеризирана версия.
Както видяхте, SVG форматът е революция. Благодарение на своя потенциал и качество което предлага, прави уеб страниците, които намираме, много по-привлекателни, без да жертвате производителността, стига да използват правилно посочения формат. SVG се превърна в идеалния брак между света на уеб дизайна и разработката.