CSS中的嵌入式SVG：无法使用<img/>标签

Question

我正在尝试在CSS样式表中内联使用SVG图像：

.avatar::before {
  content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='250' width='250'><circle cx='125' cy='125' r='125' fill='green' /></svg>");
  width: 250px;
  height: 250px;
  display: block;
}

<div class="avatar">

一切正常。但是，当我尝试使用更复杂的内容，例如image而不是circle时，它不起作用：

.avatar::before {
  content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='250' width='250'><image xlink:href='http://placehold.it/500x500' height='250' width='250'/></svg>");
  width: 250px;
  height: 250px;
  display: block;
}

<div class="avatar"></div>

任何帮助将不胜感激！