teslor

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

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

Можно сверстать флексбоксами (если не нужна поддержка IE9-), картинки - SVG.

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

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