Вложение SVG вызывает неожиданное изменение размера

Question

Я пытаюсь использовать вложенные встроенные SVG для гибкого размещения небольших изображений SVG в контейнере SVG. Однако я изо всех сил пытаюсь понять правила определения размера вложенных SVG.

svg {
  display: block;
}

Почему это правильно отображает красный квадрат размером 200 на 200 пикселей:

<svg width="200px" viewBox="0 0 100 100">
  <rect width="100" height="100" fill="red" />
</svg>

Но почему применяется перенос? в другом элементе svg квадрат должен стать 150px на 150px?
, например:

<svg>
  <svg width="200px" viewBox="0 0 100 100">
    <rect width="100" height="100" fill="red" />
  </svg>
</svg>

или:

<svg width="200px">
  <svg width="200px" viewBox="0 0 100 100">
    <rect width="100" height="100" fill="red" />
  </svg>
</svg>

или:

<svg width="200px">
  <svg viewBox="0 0 100 100">
    <rect width="100" height="100" fill="red" />
  </svg>
</svg>

Answer 1

Вы можете изменить width и height каждого последующего <rect>, но обязательно сохраняйте одинаковые width и viewbox каждого вложенного родителя <svg> каждый раз.

Рабочий пример:

<svg width="200px" viewBox="0 0 200 200">

  <rect width="200" height="200" fill="red" />
  
  <svg width="200px" viewBox="0 0 200 200">
  
    <rect width="100" height="100" fill="yellow" />
  
    <svg width="200px" viewBox="0 0 200 200">
    
      <rect width="50" height="50" fill="red" />
    
      <svg width="200px" viewBox="0 0 200 200">
      
        <rect width="25" height="25" fill="yellow" />
      
        <svg width="200px" viewBox="0 0 200 200">

          <rect width="12.5" height="12.5" fill="red" />

        </svg>
      </svg>
    </svg>
  </svg>
</svg>