Здравейте! Аз съм Васил Тошков от Cloxy, а темата днес ще е един вид продължение на предното видео, което бяхме направили за HMTL 5 лого. Тогава казах едно нещо, което искам сега да доразвия, а то е, че един layout на един уеб дизайн трябва да съдържа само едно изображение в идеалния случай и това е логото на сайта, но тогава казах, че може и логото да се направи чрез код.

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

Няма да повтарям целия код, който писахме миналия път. Ще се фокусираме само върху съответното изображение. Ясно е, че когато ще става въпрос за лого, ако ще е лого, но тук е малко по-универсален вариант. Там си има съответната връзка, H1 таг и всички тези неща.

Изображението, независимо дали е на лого, или на икона, или на нещо друго от нашия сайт, в общия случай може да сложим да води към svg. Съответното изображение да е от такъв тип. Слагаме естествено alt атрибута, записал към го за да е всичко да е пълно, като пример.

Тъй като все още някои браузъри имат проблеми с това, например Interner Explorer 8 и надолу, можете, ако ви пука за старите браузъри, да сложите onerror атрибут, при който при възникване на грешка при зареждане на SVG, да се сменя и да се зарежда PNG изображение, което е най-правилното след SVG, за вашето лого. Какви са предимствата да използвате SVG като лого? Google ги индексира много добре.

Хубавото е, че те са векторни графики и много често в логото ви се налага изображението да е малко, няма смисъл да е прекалено голямо, в повечето дизайни. В същото време, когато Google види едно такова малко изображение, а както казах миналия път - в идеалния случай логото е първото нещо, което вижда в един сайт, това нещо вдъхва много голямо доверие в търсачките, тъй като спамърите нямат лога.

Но ако е много малко изображение, както вие сте забелязали, понякога просто Google не ги класира, и при видеата, и при изображенията, търсачките се стремят да показват вече добра разделителна способност. При SVG този проблем е решен, тъй като дори изображението ви в логото да е малко, то е векторно и ако някой го търси, чрез търсачка и т.н., не само, че Google го вижда идеално и като първи код, и то в голям размер, но го и класира по този начин.

Най-малкото, ако на някой му трябва вашето лого, а повярвайте ми, във всеки един сериозен бизнес, това нещо носи връзки. Ако логото ви лесно се намира и е векторно, ако то ви е първото нещо в кода, естествено, че ще се класира много добре и ще се намира лесно.

Просто има хора, които са доволни от вашия бизнес и искат да ви сложат връзка, искат да ви сложат в логото до тази връзка, да ви споменат като спонсор на дадено събитие. Логото си трябва, то върви в комплект с брандовите връзки. По този начин вие си споделяте логото в разделителна способност, тъй като е векторно изображение, независимо от големината, всеки може да го използва, а ако иска да го разпечата на плакат.

Както казах, това е векторна графика, а това помага, освен за тези случаи, които вече споменах, примерно при адаптивните дизайни. Тъй като един адаптивен дизайн, спрямо различните разделителни способности, най-често се сменя и големината на самото изображение.

При векторни изображения това няма значение. Може да използвате във всеки един случай, даже с CSS има начини да казвате точно. Много по-трудно се работи със статични изображения, когато са векторни може да кажете с колко да увеличи. Много по-лесно се работи с векторни изображения. Векторните изображения са нещо доста по-трудно за направа, трудно за постигане, но след това ползите са много големи.

Те са семантични. От това, че са стандарт, търсачките могат да анализират и да видят какво има на изображението. Ако на едно стандартно изображение, трябва да гадаят какво има на него, при векторното, то е стандартизиран код, така че търсачката го разбира по-добре, отколкото и хората, разбира и отделните елементи, какво точно има на това изображение.

В повечето случаи, но не във всички, векторните изображения са по-малки като размер, когато става въпрос за нещо по-сложно са по-малки като размер, отколкото рендирано по някакъв начин, растерно например. Много по-лесно се споделят, тъй като, ако някой иска да ви сложи връзка, ще иска да ви сложи и логото. Това е моят съвет.

Използвайте, където е възможно, в layout-а на вашия сайт, векторни изображения. Идеалният дизайн, трябва да няма нито едно изображение, всичко трябва да е само код. Това е тенденцията, да е само код, градиенти и всякакви такива неща. От изображение няма смисъл.

Ако използвате векторни изображения, това е пътят към адаптивни дизайни, към по-добро разбиране при търсачките, към по-добро класиране при изображения, тъй като независимо от екрана ви се отваря. Може да го тествате това нещо, как Google добре индексира и рендира векторните изображения. Това е. До следващия път! Чао!