фоновое изображение svg sa данные: изображение не отображается

Question

У меня svg в качестве фонового изображения, и я хотел бы иметь возможность обновлять цвет, как я хочу, поэтому я создал s css mixin

@mixin backgroundTick($color) {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13"><path fill="none" fill-rule="evenodd" stroke="#{$color}" stroke-width="2" d="M.688 6.299l4.5 3.6L11 2"/></svg>');
}

Например, результат может мне

data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13"><path fill="none" fill-rule="evenodd" stroke="#000" stroke-width="2" d="M.688 6.299l4.5 3.6L11 2"/></svg>

Но ничего не отображается, см. Этот пример https://jsfiddle.net/96emhq4v/

Но если я создаю SVG-файл, содержащий

<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13"><path fill="none" fill-rule="evenodd" stroke="#000" stroke-width="2" d="M.688 6.299l4.5 3.6L11 2"/></svg>

Нет проблем

Answer 1

Вам необходимо сначала закодировать SVG, а затем использовать его в качестве фона-изображения

Это ваш код SVG, я только что залил черным цветом

<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13"><path fill="#000000" fill-rule="evenodd" stroke="#000" stroke-width="2" d="M.688 6.299l4.5 3.6L11 2"/></svg>

Это кодированная версия вашего SVG. легко кодируется отсюда URL-кодировщик для SVG

%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath fill='%23000000' fill-rule='evenodd' stroke='%23000' stroke-width='2' d='M.688 6.299l4.5 3.6L11 2'/%3E%3C/svg%3E

Теперь вы можете использовать в качестве фонового изображения

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath fill='%23000000' fill-rule='evenodd' stroke='%23000' stroke-width='2' d='M.688 6.299l4.5 3.6L11 2'/%3E%3C/svg%3E");

Answer 2

Я бы порекомендовал не использовать фоновые изображения. Вместо этого вы можете добавить свой SVG и сделать его абсолютно позиционированным в div, который вы хотели сделать фоном. Он должен иметь те же размеры, если вы поместите left, top, right, bottom в 0. Отрегулируйте z-index и присвойте элементам класс, с помощью css fill, stroke, а затем вы можете изменить цвет. Не будет работать, если вы импортируете его как изображение. Круто то, что svgs очень хорошо масштабируется и не будет иметь проблем с пикселями.