Roman Pokrovskij Roman Pokrovskij - 5 months ago 12
HTML Question

Is it possible to act with svg as with glyphicon?

Is it possible to act with svg as with glyphicon in HTML?

I mean to make inline svg scale to current font-size and may be use current color/background-color?

Addition: it is possible to manipulate "svg-glyph" size with "1em" but be ready that 1 em is a little bit inadequate value: it is bigger then capital letter and smaller then line height.



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

span > svg {
display:inline-block;

width:1em;
}

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

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





Somehow should be possible to inherit fill and viewport from html but I can't find how.

P.S. It should be possible with javascript but let stay with no javascript solution.

Answer

Scaling to current font-size is quite simple - em units.

And fill/stroke are inheritable CSS properties by default:

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>

Inheriting text color

To have your SVG use the same colour as the text, use the special colour value "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>