Символ SVG - используйте шаблон: почему ширина и высота больше, чем я определил?

Question

У меня есть SVG 11 × 19, который я определяю как символ в хост-документе HTML. В другом месте документа я ссылаюсь на него <use xlink:href />. Но независимо от того, какую комбинацию width / height и viewBox я определяю для символа, связанная версия всегда рендерится с разрешением 300 × 150 пикселей. Я не понимаю, что задает эти размеры.

Я пытаюсь создавать адаптивные значки, которые можно использовать в любом контексте, поэтому я не хочу жестко кодировать ширину и высоту на связывание SVG. Я хочу иметь возможность <use /> и независимо от того, к чему применяются размеры символа SVG, так же, как нормальный <img />.

Вот тестовый пример Codepen ; Я воспроизвел источник ниже.

HTML:

<h2>SVG Symbol–Use Dimensions</h2>

<svg version="1.1" hidden>
  <symbol id="icon">
    <polyline
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-miterlimit="10"
      points="0.94,0.71 9.43,9.19 0.71,17.91 "
    />
  </symbol>

  <symbol id="icon--width-height" width="11" height="19">
    <polyline
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-miterlimit="10"
      points="0.94,0.71 9.43,9.19 0.71,17.91 "
    />
  </symbol>

  <symbol id="icon--viewbox" viewBox="0 0 11 19">
    <polyline
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-miterlimit="10"
      points="0.94,0.71 9.43,9.19 0.71,17.91 "
    />
  </symbol>

  <symbol id="icon--width-height-viewbox" width="11" height="19" viewBox="0 0 11 19">
    <polyline
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-miterlimit="10"
      points="0.94,0.71 9.43,9.19 0.71,17.91 "
    />
  </symbol>
</svg>

<div class="content">
   <article class="example">
    <h3>No size attributes</h3>
    <svg>
      <use xlink:href="#icon" />
    </svg>
    <p><b>SVG size:</b> <output class="svg-size"></output></p>
    <p><b>Should be:</b> 11px × 19px</p>
  </article>

  <article class="example">
    <h3>width + height only</h3>
    <svg>
      <use xlink:href="#icon--width-height" />
    </svg>
    <p><b>SVG size:</b> <output class="svg-size"></output></p>
    <p><b>Should be:</b> 11px × 19px</p>
  </article>

  <article class="example">
    <h3>viewBox only</h3>
    <svg>
      <use xlink:href="#icon--viewbox" />
    </svg>
    <p><b>SVG size:</b> <output class="svg-size"></output></p>
    <p><b>Should be:</b> 11px × 19px</p>
  </article>

  <article class="example">
    <h3>width + height + viewBox</h3>
    <svg>
      <use xlink:href="#icon--width-height-viewbox" />
    </svg>
    <p><b>SVG size:</b> <output class="svg-size"></output></p>
    <p><b>Should be:</b> 11px × 19px</p>
  </article>
</div>

CSS:

body {
  font-family: sans-serif;
}

[hidden] {
  display: none;
}

article {
  border: 2px solid black;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

article > :first-child {
  margin-top: 0;
}

article > :last-child {
  margin-bottom: 0;
}

svg {
  border: 2px solid orange;
}

JavaScript:

const $examples = document.querySelectorAll('.example');

$examples.forEach( ( $example ) => {
  const $img = $example.querySelector('svg');
  const $svgSize = $example.querySelector('.svg-size');
  const imgStyles = getComputedStyle($img);

  const $use = $example.querySelector('use');
  const $useSize = $example.querySelector('.use-size')
  const useStyles = getComputedStyle($use);

  $svgSize.textContent = `${imgStyles.getPropertyValue('width')} × ${imgStyles.getPropertyValue('height')}`;
} );