Свойство fill не работает с HEX значениями в SVG

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 это одна из них. Особенно если вы фрилансер разработчик, это позволит вам разрабатывать эффективные и быстрые сайты и получить преимущество перед другими специалистами.