V4 hamburger fix2

[patrickhlauke]

successor to #20260

closes #20234

for comparison: current v4-dev (top) using the unicode character, and the CSS SVG background image (bottom)

[patrickhlauke]

prototype fiddle to test out https://jsfiddle.net/nu5ejdy3/7/ - only issue seems to be Edge and IE11 rendering the svg a bit too...harshly. looks good in chrome/firefox though

[patrickhlauke]

rendering of the SVG icon in chrome, firefox, edge and IE11 on Win10

[cvrebert]

I believe the conclusion from #17222 was that SVGs shouldn't be base64-ed, since it increases their size.

[XhmikosR]

Agreed with @cvrebert, but just to verify, @patrickhlauke: isn't the base64 version larger?

[patrickhlauke]

fair enough, i'll admit to not knowing all the ins and outs of data URIs. optimized the source SVG and url-encoded it ... https://jsfiddle.net/nu5ejdy3/9/

original SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect y="2" width="16" height="1"/><rect y="7" width="16" height="1"/><rect y="12" width="16" height="1"/></svg>

[patrickhlauke]

force-pushed the change to encoding

[patrickhlauke]

@mdo @cvrebert any more thoughts on this?

[mdo]

Haven't had a chance to review much else with trying to wrap up the Alpha 3 stuff. Will peep when I can after that gets released.

[patrickhlauke]

ping @mdo

[patrickhlauke]

alternatively, there's a neat set of icons https://github.com/danklammer/bytesize-icons that we could look at using (also for other things like the X close icons)

[bardiharborow]

@patrickhlauke, aren't X close icons just × these days?