Как изменить цвета встроенного SVG в комплекте с веб-пакетом?

Question

Я пробовал разные вещи, и они всегда получаются черными.

У меня есть это SVG:

<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <title>power-cord</title>
  <path d="M32 8.828l-2.828-2.828-5.586 5.586-3.172-3.172 5.586-5.586-2.828-2.828-5.586 5.586-3.586-3.586-2.707 2.707 16 16 2.707-2.707-3.586-3.586 5.586-5.586z"></path>
  <path d="M24.814 21.056l-13.87-13.87c-2.994 3.591-6.391 9.139-4.044 13.913l-4.133 4.133c-0.972 0.972-0.972 2.563 0 3.535l0.464 0.464c0.972 0.972 2.563 0.972 3.536 0l4.133-4.133c4.774 2.348 10.322-1.049 13.913-4.043z"></path>
</svg>

Webpack / Quasar / Vue упаковывает и доставляет его в этот тег изображения:

<img src="data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgogIDx0aXRsZT5wb3dlci1jb3JkPC90aXRsZT4KICA8cGF0aCBkPSJNMzIgOC44MjhsLTIuODI4LTIuODI4LTUuNTg2IDUuNTg2LTMuMTcyLTMuMTcyIDUuNTg2LTUuNTg2LTIuODI4LTIuODI4LTUuNTg2IDUuNTg2LTMuNTg2LTMuNTg2LTIuNzA3IDIuNzA3IDE2IDE2IDIuNzA3LTIuNzA3LTMuNTg2LTMuNTg2IDUuNTg2LTUuNTg2eiI+PC9wYXRoPgogIDxwYXRoIGQ9Ik0yNC44MTQgMjEuMDU2bC0xMy44Ny0xMy44N2MtMi45OTQgMy41OTEtNi4zOTEgOS4xMzktNC4wNDQgMTMuOTEzbC00LjEzMyA0LjEzM2MtMC45NzIgMC45NzItMC45NzIgMi41NjMgMCAzLjUzNWwwLjQ2NCAwLjQ2NGMwLjk3MiAwLjk3MiAyLjU2MyAwLjk3MiAzLjUzNiAwbDQuMTMzLTQuMTMzYzQuNzc0IDIuMzQ4IDEwLjMyMi0xLjA0OSAxMy45MTMtNC4wNDN6Ij48L3BhdGg+Cjwvc3ZnPgo=" class="profile">

Cool!

Теперь я смогу покрасить его, используя fill? В Chrome devtools я вижу примененные атрибуты заполнения (с помощью CSS и возни с ним)

<img src="data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgogIDx0aXRsZT5wb3dlci1jb3JkPC90aXRsZT4KICA8cGF0aCBkPSJNMzIgOC44MjhsLTIuODI4LTIuODI4LTUuNTg2IDUuNTg2LTMuMTcyLTMuMTcyIDUuNTg2LTUuNTg2LTIuODI4LTIuODI4LTUuNTg2IDUuNTg2LTMuNTg2LTMuNTg2LTIuNzA3IDIuNzA3IDE2IDE2IDIuNzA3LTIuNzA3LTMuNTg2LTMuNTg2IDUuNTg2LTUuNTg2eiI+PC9wYXRoPgogIDxwYXRoIGQ9Ik0yNC44MTQgMjEuMDU2bC0xMy44Ny0xMy44N2MtMi45OTQgMy41OTEtNi4zOTEgOS4xMzktNC4wNDQgMTMuOTEzbC00LjEzMyA0LjEzM2MtMC45NzIgMC45NzItMC45NzIgMi41NjMgMCAzLjUzNWwwLjQ2NCAwLjQ2NGMwLjk3MiAwLjk3MiAyLjU2MyAwLjk3MiAzLjUzNiAwbDQuMTMzLTQuMTMzYzQuNzc0IDIuMzQ4IDEwLjMyMi0xLjA0OSAxMy45MTMtNC4wNDN6Ij48L3BhdGg+Cjwvc3ZnPgo=" class="profile" style="
    fill: purple;
    color: purple;
">

Но маленький парень всегда появляется черным: - (

Работает редактирование и переупаковка svg с fill="purple". С fill="var(--q-color-primary)" не использует переменные CSS.

<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <title>power-cord</title>
  <path fill="var(--q-color-primary)" d="M32 8.828l-2.828-2.828-5.586 5.586-3.172-3.172 5.586-5.586-2.828-2.828-5.586 5.586-3.586-3.586-2.707 2.707 16 16 2.707-2.707-3.586-3.586 5.586-5.586z"></path>
  <path fill="purple" d="M24.814 21.056l-13.87-13.87c-2.994 3.591-6.391 9.139-4.044 13.913l-4.133 4.133c-0.972 0.972-0.972 2.563 0 3.535l0.464 0.464c0.972 0.972 2.563 0.972 3.536 0l4.133-4.133c4.774 2.348 10.322-1.049 13.913-4.043z"></path>
</svg>

У меня будет 100 таких изображений, которые нужно раскрасить в разные темы, и они полюбят простой конвейер активов.

Какой самый простой способ динамического изменения цветов изображения после их упаковки?

Заранее спасибо!

Answer 1

Вы не можете делать то, что хотите.

Изображения, загруженные через URL-адрес данных, обрабатываются так, как если бы они были файлом изображения в другой файловой системе.После того, как они декодируются и отображаются, они фактически становятся растровыми изображениями - так же, как если бы они были PNG.

Ваши варианты:

• Вставьте SVG в ваш HTML
• Используйте <object> для встраивания SVG и изменения стилей с помощью JS
• Используйте код JS, который заменяет ваши теги <img> на введенные SVG из соответствующего файла.
• Имеет нескольковерсии SVG с разными цветами (либо в виде отдельных SVG, либо с использованием таблицы спрайтов SVG).

Re: встроенный svg в сравнении со значками шрифтов, эта статья подводит итогприятно: «Если вы можете использовать IE 9+ / Android 3+, встроенный SVG лучше во всем, чем пиктограммы».