Как правильно задать размеры SVG для фона

#css #css3 #html5 #svg

Хочу сверстать на svg фоновую картинку, внутри самого svg будут разные детали. Идея
в том, чтобы всю эту конструкцию без проблем можно было бы подогнать под все разрешения
и размеры экранов. С мобильными устройствами все понятно, придется несколько по-другому
реализовать. Меня интересует именно как правильно реализовать width="" height="" самого
svg  и как правильно подогнать viewBox="0 0 N N" ко всей этой конструкции. То что можно
svg вкладывать svg  я в курсе...

В первом примере у нас viewBox="0 0 600 300" такой. см второй пример








А вот во  втором примере viewBox="0 0 1200 700"  и естественно, дает такую разницу...








Если открыть эти два примера одновременно, мы видим, что у нас при одном и том же
размере экрана картинки выглядят по-разному, как сделать, чтобы они выглядели одинаково
 и viewBox="0 0 N N" подгонялся на всю ширину экрана? 

Знаю, что width="" height="" для svg можно задать в процентах. А вот  viewBox="0
0 N N" можно реализовать в процентах, и как это все грамотно и правильно реализовать?  
    

Ответы

Ответ 1

Попутно получился пример с множеством использования вложенных svg/
Многократное использование объектов svg c использованием команды
use, как для вызова группы объектов, так и для вызова отдельных
частей блока. 
Пример позиционирования объектов внутри вложенных svg








Ответ 2

Может быть Вам подойдёт способ масштабирования с помощью атрибута transform?





















Вот здесь разбираются на пальцах вопросы масштабирования.
И вот здесь.


Ответ 3

* {
  margin: 0;
  padding: 0;
}