A. blue ruler = a real 24x24 div, for comparison

|24px|

B. broken <use> svg, size only from width/height ATTRS

|attr only|

C. broken <use> svg, size from inline CSS

|css only|

D. broken <use> svg, attrs AND css

|attr+css|

E. VALID svg (rect), attrs only — control

|valid attr|

F. VALID svg forced to 48px by CSS — does CSS win over intrinsic?

|valid css48|

G. empty svg, attrs only

|empty attr|

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