Problem z wyświetlaniem SVG w przeglądarce

Question

Cześć,
Mam problem z wyświetlaniem przycisku hamburgera w przeglądarce. Stworzyłem ikonkę, wyeksportowałem do SVG i próbuję wkleić kod SVG, żeby po najechaniu dało się animować w CSS. 

<svg class="hamburger-button" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 18" style="enable-background:new 0 0 30 30;" xml:space="preserve">
  <rect y="0" width="30" height="2"/>
  <rect class="hamburger-middle-line" y="8" width="30" height="2"/>
  <rect y="16" width="30" height="2"/>
</svg>

.hamburger-button
{
	pointer-events: auto;
	cursor: pointer;
	fill: #000;
	height: 17px;
	transition: width 1s;
}

Problem polega na tym, że środkowa linia (rect) wyświetla się źle. Poniżej wklejam screen dla zobrazowania problemu. Co ciekawe nie jest to kwestia tego, że jest inaczej stylizowana i posiada klasę "hamburger-middle-line", ponieważ usunięcie tej klasy nic nie zmienia.

Ikona w oryginalnym rozmiarze (screenshot):

Poniżej porównanie powiększenia (po lewej - powiększenie w przeglądarce przy pomocy CTRL+Scroll-up, po prawej - screenshot ikony w oryginalnym rozmiarze powiększonej w programie graficznym)

Proszę o podpowiedź gdzie może być problem i jak go rozwiązać.