Inline SVG for high contrast support

Date: February 15, 2021
Author: Jon Gunderson

Using SVG graphics in combination with the CSS currentColor property to support high contrast theme options in operating systems.

Rendered SVG

SVG Code



<svg aria-hidden="true" width="11px" height="11px" viewBox="0 0 133 79" version="1.1">
   <title>menu open/close icon</title>
   <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g transform="translate(-50.000000, -122.000000)" fill="currentColor">
         <g transform="translate(45.000000, 64.000000)">
            <path d="M33.5,21 C40.4035594,21 46,26.5964406 46,33.5 L46,96.5 L109,96.5 C115.903559,96.5 121.5,102.096441 121.5,109 C121.5,115.903559 115.903559,121.5 109,121.5 L34,121.5 C30.4210403,121.5 27.1933842,119.995891 24.9146718,117.585313 C22.5041093,115.306616 21,112.07896 21,108.5 L21,33.5 C21,26.5964406 26.5964406,21 33.5,21 Z" transform="translate(71.250000, 71.250000) rotate(-45.000000) translate(-71.250000, -71.250000) " />
         </g>
      </g>
   </g>
</svg>


Category: Color Usage