How to create hamburger menu icon consisting from single SVG path - html

Question

The SVG code of Material design Hamburger menu icon:
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
</svg>
However it always could be some reason I can not use the Material Design icon and need to create my own one. But how I can reach such simple code? One path.
Tried to draw the similar icon in AbodeXD. The output SVG code was:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="18" viewBox="0 0 26 18">
<defs>
<clipPath id="clip-アートボード_1">
<rect width="26" height="18"/>
</clipPath>
</defs>
<g id="アートボード_1" data-name="アートボード – 1" clip-path="url(#clip-アートボード_1)">
<line id="線_1" data-name="線 1" x2="26" transform="translate(0 0.5)" fill="none" stroke="#000" stroke-width="1"/>
<line id="線_2" data-name="線 2" x2="26" transform="translate(0 17.5)" fill="none" stroke="#000" stroke-width="1"/>
<line id="線_3" data-name="線 3" x2="26" transform="translate(0 9)" fill="none" stroke="#000" stroke-width="1"/>
</g>
</svg>
The SVG optimization reduced above code to:
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="18">
<defs>
<clipPath id="a">
<path d="M0 0h26v18H0z"/>
</clipPath>
</defs>
<g data-name="アートボード – 1" clip-path="url(#a)" fill="none" stroke="#000">
<path data-name="線 1" d="M0 .5h26"/>
<path data-name="線 2" d="M0 17.5h26"/>
<path data-name="線 3" d="M0 9h26"/>
</g>
</svg>
But it a more complicated than Material Design SVG. Also, we can't change the icon color by like fill: red as many other icons.

Answer 1

Path syntax is easy to understand - let's break it down:
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
M3,6 - Move the drawing point to coordinates [3,6]
H21 - draw a Horizontal line to coordinates [21,Current Y Coordinate (6)]
V8 - draw a Vertical line to coordinates [Current X Coordinate (21), 8]
H3 - draw a Horizontal line to coordinates [3,Current Y Coordinate (8)]
V6 - etc.
M3,11 - Move the drawing point to coordinates [3,11]
... etc
Z - Draw a line to the start of the current subpath (the coordinates of the last MoveTo - which in this case, doesn't do anything, because we're already at those coordinates)
So if you want the hamburger menu to be in a smaller viewBox, you can edit the path by hand like so:
<svg style="width:20px;height:20px" viewBox="0 0 20 20">
<path fill="currentColor" d="M1,4 H18 V6 H1 V4 M1,9 H18 V11 H1 V7 M3,14 H18 V16 H1 V14" />
</svg>

Answer 2

Please Use stroke="red" rather than using Fill="red"
Please find the Below updated code:
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="18">
<defs>
<clipPath id="a">
<path d="M0 0h26v18H0z"/>
</clipPath>
</defs>
<g data-name="アートボード – 1" clip-path="url(#a)" fill="none" stroke="red">
<path data-name="線 1" d="M0 .5h26"/>
<path data-name="線 2" d="M0 17.5h26"/>
<path data-name="線 3" d="M0 9h26"/>
</g>
</svg>