SVG в list-style-image ломается при добавлении заливки.

Вопрос или проблема

Я пытаюсь добавить пользовательскую пуля при помощи CSS list-style-image. Вот атрибут:

ul {
    list-style-image:url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width="18" height="18" viewBox='0 0 1792 1792' xmlns="http://www.w3.org/2000/svg"><path d='m1671,566q0,40 -28,68l-724,724l-136,136q-28,28 -68,28t-68,-28l-136,-136l-362,-362q-28,-28 -28,-68t28,-68l136,-136q28,-28 68,-28t68,28l294,295l656,-657q28,-28 68,-28t68,28l136,136q28,28 28,68z'/></svg>");
}

Для удобства, это SVG файл, встроенный в list-style-image:

<?xml version='1.0' encoding='utf-8'?>
<svg width="18" height="18" viewBox='0 0 1792 1792' xmlns="http://www.w3.org/2000/svg">
    <path d='m1671,566q0,40 -28,68l-724,724l-136,136q-28,28 -68,28t-68,-28l-136,-136l-362,-362q-28,-28 -28,-68t28,-68l136,-136q28,-28 68,-28t68,28l294,295l656,-657q28,-28 68,-28t68,28l136,136q28,28 28,68z'/>
</svg>

Проблема в том, что когда я пытаюсь добавить атрибут fill в <path>, всё ломается, так как SVG перестает отображаться в качестве пули, и показывается стандартная круглая пуля ul. Я пробовал использовать fill="#f00", style="#f00" и stroke="#f00". Все они ломают SVG.

Есть идеи, в чем может быть проблема?

Для base64 вам нужно заменить # на %23 при указании значения цвета.

Пример:
чтобы добавить #f00 заливку, вы пишете fill="#f00" для встроенного svg, но fill="%23f00" для base64 встроенного svg.

Таким образом, ваш svg код с заливкой будет:

ul {
    list-style-image:url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width="18" height="18" viewBox='0 0 1792 1792' xmlns="http://www.w3.org/2000/svg"><path d='m1671,566q0,40 -28,68l-724,724l-136,136q-28,28 -68,28t-68,-28l-136,-136l-362,-362q-28,-28 -28,-68t28,-68l136,-136q28,-28 68,-28t68,28l294,295l656,-657q28,-28 68,-28t68,28l136,136q28,28 28,68z' fill="%23f00"/></svg>");
}

Ответ или решение

Введение:

При работе с веб-технологиями важно понимать, как различные форматы данных взаимодействуют друг с другом, особенно когда речь идет о форматах изображений и стилях CSS. Одним из популярных форматов изображений для веб-дизайна является SVG (Scalable Vector Graphics), который позволяет создавать масштабируемую графику, используемую для множества различных целей, таких как логотипы, иконки и, как в данном случае, маркеры списков. Однако, при встраивании SVG через атрибут list-style-image, могут возникнуть определенные проблемы, связанные с интерпретацией синтаксиса, особенно когда требуется задать цвет элементов внутри SVG. Это может привести к ситуации, когда SVG просто не отображается, как ожидалось.

Теория:

SVG – это формат графики, основанный на XML. Это означает, что SVG-файлы создаются и редактируются как текстовые файлы и в них можно использовать различные XML-атрибуты для изменения внешнего вида графики, такие как fill для задания цвета заливки. Однако, когда вы встраиваете SVG непосредственно в атрибут CSS, такой как list-style-image, возникают некоторые нюансы. Во-первых, символы, которые имеют особое значение в URL, должны быть заменены их эквивалентами URL-кодирования. Например, символ #, который используется для обозначения шестнадцатеричных цветовых значений (например, #f00 для красного цвета), должен быть заменен на %23 в строках, вставляемых в URL.

Пример:

Рассмотрим ваш конкретный случай. У вас есть следующая строка SVG, встроенная в CSS:

ul {
    list-style-image:url("data:image/svg+xml;utf8,&lt;?xml version='1.0' encoding='utf-8'?&gt;&lt;svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'&gt;&lt;path d='m1671,566q0,40 -28,68l-724,724l-136,136q-28,28 -68,28t-68,-28l-136,-136l-362,-362q-28,-28 -28,-68t28,-68l136,-136q28,-28 68,-28t68,28l294,295l656,-657q28,-28 68,-28t68,28l136,136q28,28 28,68z'/&gt;&lt;/svg&gt;");
}

Чтобы добавить цвет заливки (например, красный), необходимо изменить fill="#f00" на fill="%23f00", чтобы корректно отобразить символ # в контексте URL:

ul {
    list-style-image:url("data:image/svg+xml;utf8,&lt;?xml version='1.0' encoding='utf-8'?&gt;&lt;svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'&gt;&lt;path d='m1671,566q0,40 -28,68l-724,724l-136,136q-28,28 -68,28t-68,-28l-136,-136l-362,-362q-28,-28 -28,-68t28,-68l136,-136q28,-28 68,-28t68,28l294,295l656,-657q28,-28 68,-28t68,28l136,136q28,28 28,68z' fill='%23f00'/&gt;&lt;/svg&gt;");
}

Применение:

Теперь, когда мы разобрались с теоретической частью и изучили пример, давайте рассмотрим, как это можно применить в вашем проекте. Вставляя SVG непосредственно в CSS и задавая для него атрибуты, важно всегда проверять корректность используемого синтаксиса. Это включает в себя как саму SVG-разметку, так и особенности URL-кодирования.

Когда возникает необходимость менять цвет SVG, встраиваемого через list-style-image, важно использовать правило URL-кодирования, чтобы все символы, использующиеся внутри URL, были корректно интерпретированы браузером. Это особенно критично, когда работа идет над веб-проектом с поддержкой множества браузеров, так как разные интерпретаторы могут обрабатывать спецификации по-разному.

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

Заключение:

Проблемы, связанные с вставкой и стилизацией SVG в атрибуте list-style-image, скорее всего, вызваны неверным кодированием URL специальных символов. Применяя знания о правильной замене символов на их %23-коды, вы обеспечите корректное отображение графики с необходимыми стилями. Эти знания не только улучшат визуальную составляющую вашего веб-проекта, но и укрепят навыки работы с современными технологиями и стандартами веб-дизайна.