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

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

<svg viewBox="0 0 100 80" width="40" height="40">
  <rect width="100" height="20"></rect>
  <rect y="30" width="100" height="20"></rect>
  <rect y="60" width="100" height="20"></rect>
</svg>

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

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

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

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

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