SVG формат или векторски слики на веб-страница
Курсеви за креирање веб-страници преку Интернет
Тестирајте ја нашата програма за создавање веб-страница и добијте пристап до бесплатниот курс преку Интернет. По регистрацијата ќе ви испратиме е-пошта со кликнување за да се регистрирате на курсот преку Интернет. На тој курс ќе научите како да креирате веб-страница бесплатно, сами и без знаење за програмирање.
Одговорни слики или прилагодување на веб-страницата за големината и резолуцијата на екранот, им овозможуваат на корисниците оптимално искуство.
Луѓето очекуваат од нив лесно да се движат на нашата страница користејќи паметен телефон или компјутер, а за тоа ќе мора да им обезбедиме елементи и графики со највисок квалитет.
Фотографијата што ја избрав може да изгледа добро на почетокот, но кога корисниците ќе се обидат да ја зголемат, може да доживеат проблем со јасност.
Графичкиот формат SVG ни помага во случајот на овој елемент и покрај спецификациите на W3C од 2001 година, тој не го уживаше заслужениот публицитет.
Кога избираме фотографии за нашата страница, имаме два вида слики за избор: векторска графика и растер (обично фотографија која има фиксна резолуција и се состои од пиксели).
По зголемувањето на сликата, таа го губи својот квалитет и станува „пикселизирана“. Векторска слика, пак, се создава со помош на точки, форми и линии, а нејзиното зголемување не вклучува губење на квалитетот.
Исто така, векторските слики имаат ограничен број детали што можат да ги содржат, поради што тие најдобро функционираат како фонтови, логоа, икони или илустрации. На овој начин, SVG форматот почнува да игра сè поважна улога во дизајнирањето на веб-страниците.
SVG (скалабилна векторска графика)
SVG-датотеката е едноставен, графички формат базиран на XML, кој користи три вида на објекти за да опише графика: слики, текст и вектори (линии, патеки, рамки, кругови или полигони).
Секоја програма што препознава формат XML, како што е веб-прелистувач, може да прикаже слика користејќи ги информациите содржани во датотеката SVG. Форматот опишан во јазикот на текстуална графика се однесува само на дводимензионални графики, но исто така може да поддржува интерактивност, анимација и скриптирање.
Предности на продолжувањето на SVG
приспособливост. Првата и најважна карактеристика е тоа што не е ограничена по големина или резолуција. SVG-датотеките го задржуваат истиот квалитет и се фокусираат без оглед на големината на екранот на кој се прикажани, што значи дека секогаш ќе се појави јасно, без оглед на ситуацијата.
Мала големина на графика. Растерските слики не се исти со векторите. Можеме да го намалиме графиконот во секое време, што нема да влијае на неговиот квалитет, но истото нема да работи во случај на раст. Во случај на SVG-датотеки, нивната тежина секогаш ќе остане непроменета, без оглед на големината на табелата, бидејќи нивната големина се зголемува во зависност од бројот на содржани детали, како што се слоеви, градиенти, анимации или ефекти. Од оваа причина, SVG-датотеката е идеална за логоа, фонтови или дијаграми.
Придружете им се на 120.000 корисници кои креираат веб-страници бесплатно и без знаење за програмирање.
Програмата за создавање веб-страница, WebWave, ви овозможува да креирате веб-страници во целосна слобода. Можете да го започнете процесот на креирање веб-страница од чиста страница или да користите образец.
Брзина на Прикачување. Поради малата големина на датотеката, што по дифолт значи и брзина на вчитување на страницата, SVG може да биде исклучително ефикасен кога ќе го додадеме директно на HTML кодот. Врз основа на ова, прелистувачот ја "црта" табелата без потреба за преземање. Ова значи дека вметнувањето на SVG во HTML код, акција исто така наречена „вграден SVG“, ќе го елиминира барањето HTTP за вчитување графика.
SEO. Нормалните слики немаат содржина за индексирање освен ако не ги додадеме другите атрибути и насловот. Наместо тоа, SVG сликите се дефинирани во XML-датотеки, така што можеме лесно да ставиме клучни зборови и описи што ќе бидат препознаени и индексирани од пајаците на машините за пребарување.
анимации. SVG-датотеките можат да бидат стилизирани и анимирани, вклучително и користење на CSS или JavaScript. Ефектите како што се трансформација или транзиција, што ги користиме во HTML-елементи, може да се користат и во SVG-датотека. Секако, за тоа ќе ви треба соодветно познавање на кодирање, но можностите се огромни.
издаваштво. Овие SVG-датотеки можат да се уредуваат во специјални векторски програми како Adobe Illustrator и Xd, Corel Draw или Sketch.
Во креаторот на WebWave лесно можете да користите SVG векторска графика и упатства за употреба. Имаме стотици графики и пронаоѓањето на вистинската за вас не треба да претставува проблем. Имајте на ум дека изборот на SVG ќе ви помогне да ја задржите јасноста и квалитетот на сликите на секој екран на кој ќе се прикажува вашата страница.
Резиме
Квалитетот на ставките прикажани на екранот е сè повеќе баран, навистина неопходен аспект. Затоа треба внимателно да ја избереме нашата графика за нашата страница. Бидејќи SVG-датотеките се одговорни, анимирани и комплексни, не треба да има причина зошто да избегнуваме да ги користиме. Главниот избор за фотографија веројатно ќе остане бит-мапата, поради длабочината на бојата, но за елементи како што се логоа, икони, фонтови, векторска графика е идеална. Исто така, треба да се напомене дека SVG-датотеките се поддржани од сите современи прелистувачи, освен за постарите верзии на Internet Explorer (од 8 надолу) и Андроид не го поддржува овој формат. Фактот дека тие можат да се зголемат или намалат екстремно и да го задржат нивниот квалитет, SVG сликите се соодветен избор дури и за најсложените уреди.
Што мислите за ова проширување? Користите SVG-датотеки на вашите страници?