teslor

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

Двойной клик обычно может происходить по следующим причинам:
1) Задан обработчик на одно и то же событие у самого элемента и у элемента-контейнера, в котором он находится. В этом случае поможет метод event.stopPropagation(), который предотвращает всплытие события.
2) Дополнительно срабатывает встроенный обработчик браузера (в частности, при клике по ссылке браузер попытается по ней перейти). Чтобы запретить браузеру делать какие-то действия по умолчанию, используйте метод event.preventDefault(). Этот метод часто используется совместно с предыдущим.
3) Пользователь слишком быстро делает подряд 2 клика. В этом случае нужно вызывать обработчик не ранее чем через определенное время после последнего срабатывания (debounce)

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

Чтобы сделать сайт на основе готового шаблона (неважно WordPress это или другая CMS/конструктор сайтов) со стандартной функциональностью и без особых требований, верстку знать не обязательно. Знания верстки понадобятся, если нужно будет внести на сайт какие-то изменения или сделать уникальный дизайн.

Можно cделать элементы изначально невидимыми (с помощью opacity или visibility) и отобразить только когда они уже будут спозиционированы.

JS/CSS не предоставляют средств для определения физического размера пикселя. Можно попробовать определить dpi косвенно, посмотрите здесь.

IE не поддерживает анимацию background-size, про scale вам уже ответили.

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