A. blue ruler = a real 24x24 div, for comparison
B. broken <use> svg, size only from width/height ATTRS
C. broken <use> svg, size from inline CSS
D. broken <use> svg, attrs AND css
E. VALID svg (rect), attrs only — control
F. VALID svg forced to 48px by CSS — does CSS win over intrinsic?
G. empty svg, attrs only
H. line-height:48px, font 20px — text must sit in the MIDDLE (half-leading). Box outlined below.
I. same, but inside a button
J. line-height:normal control (should hug the text)
K. flex button, line-height:48px + 24px svg sibling