Итак, нам нужно нарисовать гамбургер-меню: всего три полосы - это достаточно просто сделать, кроме того, для этого в HTML и CSS существует множество способов. Но, с другой стороны, нарисовать иконку гамбургер-меню можно и в SVG, и это, пожалуй, самый легкий и приятный вариант решения данной задачи.

Нам потребуются три одинаковых прямоугольника, расположенных друг под другом:

А вот и результат на codepen:

Манипулируя цифрами, можно изменить внешний вид иконки в соответствии с потребностями проекта.

И, возможно, у Вас появится необходимость сделать у прямоугольников закругленные углы. Для этих целей обычно мы используем CSS-свойство border-radius, но при работе с SVG на помощь придет атрибут rx:

Спасибо за внимание.

Перевод статьи Chris Coyier “SVG Hamburger Menu”.