На серверной стороне есть данные:
$arr[0]['title'] = 'John Smith';
$arr[0]['photo'] = 'img/John Smith.svg';
Из этих данных вычисляется цвет иконки персонажа:
$color = '#'.mb_substr(md5($arr[0]['title']),0,3);
Из этих данных формируется код:
<style>
.pic {
background-image: url(".$arr[0]['photo'].");
fill: ".$color.";
}
</style>
<h2>".$arr[0]['title']."</h2>
<div class="pic">
</div>
Не было бы проблемы, если бы SVG картинка была добавлена в HTML инлайн или Base64.
Но как окрасить ее, когда она задана в файле?
UPD: Казалось бы элегантное решение прописать в css .pic {--svg-color: ".$color."}
и style="fill: var(--svg-color)"
внутри svg файла, но не работает, когда картинка - это фон. (