Почему мне нужно указывать свойство viewBox, когда я ссылаюсь на SVG из другого файла, в котором указан viewBox?

Question

В моем внешнем файле с именем icons.svg у меня есть:

<symbol viewBox="0 0 1117.48 823.88" id="a_day_at_the_park" xmlns="http://www.w3.org/2000/svg">
<!-- ... -->

В моем HTML:

<svg viewBox="0 0 1117.48 823.88">
  <use xlink:href="icons.svg#a_day_at_the_park"></use>
</svg>

<svg>
  <use xlink:href="icons.svg#a_day_at_the_park"></use>
</svg>

Первый работает хорошо (с viewBox) - точно так же, как встроенный SVG.

Зачем указывать viewBox во внешнем файле, когда он не работает при использовании его с use?

Я хотел бы получить такой же результат, когда я 'м, используя use без указания viewBox.У меня есть несколько значков, которые имеют разные viewBox, но кажется, что это невозможно, и мне всегда приходится копировать это в мой HTML?

Answer 1

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

Например, если вашSVG всегда будет 24x24, и ваш контент (который содержит символы) находится внутри этого поля 24x24, вам не нужны никакие окна просмотра.

<svg width="0" height="0">
  <symbol id="icon">
     <rect width="24" height="24" fill="orange"/>
     <circle cx="12" cy="12" r="10" fill="red"/>
   </symbol>
 </svg>
  
 <svg width="24" height="24">
   <use href="#icon"/>
 </svg>
 

Но если они не рассчитаны на масштаб 1: 1, то для рендеринга SVG всегда потребуется viewBox.Однако символ не обязательно должен иметь его.

<svg width="0" height="0">
  <symbol id="icon">
     <rect width="100" height="100" fill="orange"/>
     <circle cx="50" cy="50" r="40" fill="red"/>
   </symbol>
 </svg>
  
 <svg width="24" height="24" viewBox="0 0 100 100">
   <use href="#icon"/>
 </svg>