SVG це дуже потужна та зручна технологія, яку веб-розробники повсюдно використовують як заміну стандартних графічних форматів при створенні сайтів та розробки додатку.

SVG можна використовувати як звичайний графічний файл у форматі jpg або png і вбудовувати його на сторінку за допомогою тега IMG або засобами CSS. Це також є валідним HTML кодом і його можна використовувати як звичайні теги, впровадивши в структуру документа.

У CSS код SVG теж можна використовувати безпосередньо, наприклад у властивості background, на зразок як це робиться зі звичайними зображеннями data:image base64, тільки без кодування. Наприклад, ось так:

background-image: url("data:image/svg+xml;utf8,*svg код тут*");

Розглянемо конкретний приклад і в яких випадках не працюватиме властивість fill.

#mydiv {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='200' width='200'><circle cx='100' cy='100' r='50' fill='blue'/></svg>");
}

Цей код додає фон із синіх кіл до елемента з id mydiv, і з ним немає жодних проблем. Але якщо ми захочемо використовувати інший, більш специфічний колір, для якого немає іменного значення, а є значення HEX, наприклад:

#mydiv {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='200' width='200'><circle cx='100' cy='100' r='50' fill='#0b4ab1'/></svg>");
}

Те, ми виявимо, що цей код працювати не буде і фон не відображатиметься. Справа в тому, що браузер розпізнає символ ґрат # як початок URL фрагмента, а не частину рядка з кольором, тому його потрібно кодувати, замінивши його на %23. З огляду на це, щоб приклад вище запрацював, його потрібно модифікувати наступним чином.

#mydiv {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='200' width='200'> <circle cx='100' cy='100' r='50' fill='%230b4ab1'/></svg>");
}

Отже, щоб fill заробив з кольором у форматі HEX ​​потрібно символ решітки “#” замінити його кодом “%23”.

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

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.