Можно ли работать с svg как с глификоном?

Question

Можно ли работать с SVG, как с глификом в HTML?

Я имею в виду сделать встроенный масштаб SVG до текущего размера шрифта и может быть использовать текущий цвет / цвет фона?

Послесловие: можно манипулировать размером "svg-glyph" с помощью "1em", но будьте готовы, что 1 em является немного неадекватным значением: оно больше заглавной буквы и меньше высоты строки.

span { 
  fill:gold;
  font-size:24px;
  color: green;
  background-color: Lavender;
}

span > svg { 
   display:inline-block;

   width:1em;  
}

<div>
<span>
    1 em Baseline Align: 
  <svg viewBox="0 0 100 100" style="vertical-align:baseline">
    <rect height="100" width="100"        fill="none" stroke="currentColor"  stroke-width="15" />
   </svg>
</span>
</div>

<div>
<span>
1 em Text bottom Align: 
  <svg viewBox="0 0 100 100" style="vertical-align:text-bottom">
    <rect height="100" width="100"  fill="none" stroke="currentColor"  stroke-width="15" />
   </svg>
</span>
</div>

<div>
<span>
0.75em Baseline Align: 
  <svg viewBox="0 0 100 100" style="vertical-align:Baseline; width:0.75em; height:0.75em;">
    <rect height="100" width="100"  fill="none" stroke="currentColor"  stroke-width="20" />
   </svg>
</span>
</div>

Каким-то образом должно быть возможно наследовать заливку и область просмотра от HTML, но я не могу найти как.

PS Это должно быть возможно с javascript, но пусть останется без решения javascript.

Answer 1

Масштабирование до текущего размера шрифта довольно просто - их единиц.

И fill/stroke являются наследуемыми свойствами CSS по умолчанию:

span { 
  fill:gold;
  font-size:24px;
}

span > svg { 
   display:inline-block;
   vertical-align:middle;
   width:1em;  
}

<span>
Text: 
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" />
</svg>
 </span>

Наследование цвета текста

Чтобы ваш SVG использовал тот же цвет, что и текст, используйте специальное значение цвета "currentColor".

span { 
  color:gold;
  font-size:24px;
}

span > svg { 
   height:1em;  
}

<span>
Text: 
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" stroke="black" stroke-width="3" fill="currentColor" />
</svg>
and more text
 </span>