Нужно использовать symbol, вот статьи с описанием методологии:
https://css-tricks.com/svg-sprites-use-better-icon...
https://css-tricks.com/svg-symbol-good-choice-icons/

В кратце, у нас есть один большой SVG со всеми изображениями в виде символов:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  
  <symbol id="beaker" viewBox="214.7 0 182.6 792">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>
  
  <symbol id="shape-icon-2" viewBox="0 26 100 48">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>
  
</svg>

Подключаем картинки на странице:

<svg class="icon">
  <use xlink:href="#shape-icon-1" />
</svg>

<svg class="icon">
  <use xlink:href="#shape-icon-2" />
</svg>

Всё картинки можно стилизовать через CSS (например задать заливку fill: black и т. д.). Замечу, что атрибут viewBox для символов нужно задавать обязательно, что-бы картинки правильно масштабировались (например если вы будете изменять их размеры).
Если вы используете grunt, взгляните в сторону grunt-svgstore: https://github.com/FWeinb/grunt-svgstore для автоматизации сборки картинок и обётки оных в один SVG контейнер.

Сделайте макет адаптивным под 3 разрешения с использованием media-queries, что-бы можно было просматривать в том числе на "старых моделях" с разрешением в 320px, 640px и 750px (www.iphoneresolution.com). Но перед этим желательно проконсультироваться с заказчиком, что-бы не делать лишнюю работу или если и делать, что-бы это было оплачено.

Или можете воспользоваться старым добрым масштабированием при этом сверстав только макет шириной в 750px, задав метатэг:

<meta name="viewport" content="width=750px, initial-scale=1">

Решение с использованием Flexbox: cssdesk.com/BFj4R
То-же самое, только с display: table cssdesk.com/gqRQz