teslor

Высота по умолчанию вылезает, т.к. у вас не задана явно ни высота, ни viewBox.
Для большинства браузеров можно указать, например, <svg viewBox="0 0 1 1" class="box-icon">
В этом случае высота будет определяться автоматически и иконка будет вписываться в размеры в зависимости от ширины.
Но в IE высота по-прежнему будет 150px, там нужно явно задать высоту, или использовать хаки/другие способы.
Есть неплохая статья про адаптивный SVG (на английском).

При изменении размеров изображения может стать невозможно разместить его пиксель в пиксель. Браузер использует для таких случаев антиалиасинг, что проявляется в размытии границ. Можно попробовать задать для SVG свойство shape-rendering: crispEdges, которое выключает антиалиасинг. Или перерисовать иконку чтобы она нормально выглядела хотя бы при каких-то стандартных размерах.

Для SVG (IE8+) можете посмотреть еще эти библиотеки: snap.js, svg.js.