Как увеличить размер svg иконки?

Question

Есть следующая SVG иконка 17 на 17 пикселей. Как сделать ее размером 40 на 40? Или единственный вариант это transform: scale(2);

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id='paragraph' width="17" height="17" viewBox="0 0 17 17">
  <path d="M16 1.026h-11.008c-2.181 0-3.955 1.774-3.955 3.955s1.774 3.954 3.955 3.954h3.008v7.065h1v-13.974h2.015v13.974h1v-13.974h3.985v-1zM8 7.936h-3.008c-1.63   0-2.955-1.325-2.955-2.954 0-1.63 1.325-2.955 2.955-2.955h3.008v5.909z"  />
 </symbol>
</svg>

Answer 1

Вам наверное нужно кроме увеличения размеров иконки, сделать её адаптивной.

Для этого убираем width="17" height="17" и оставляем только viewBox="0 0 17 17"

А размеры иконки будем регулировать в процентах (для адаптивности) внутри команды <use>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id='paragraph' viewBox="0 0 17 17">
    <path d="M16 1.026h-11.008c-2.181 0-3.955 1.774-3.955 3.955s1.774 3.954 3.955 3.954h3.008v7.065h1v-13.974h2.015v13.974h1v-13.974h3.985v-1zM8 7.936h-3.008c-1.63 0-2.955-1.325-2.955-2.954 0-1.63 1.325-2.955 2.955-2.955h3.008v5.909z"/>
  </symbol>
  <use xlink:href="#paragraph" width="40%" height="40%"/>
</svg>

2# способ (главный и самый правильный)

с помощью <svg width="10%" height="10%" viewBox="0 0 17 17">

размеры иконки регулируются с помощью процентов ширины и высоты.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10%" height="10%" viewBox="0 0 17 17">
  <symbol id='paragraph'>
    <path d="M16 1.026h-11.008c-2.181 0-3.955 1.774-3.955 3.955s1.774 3.954 3.955 3.954h3.008v7.065h1v-13.974h2.015v13.974h1v-13.974h3.985v-1zM8 7.936h-3.008c-1.63 0-2.955-1.325-2.955-2.954 0-1.63 1.325-2.955 2.955-2.955h3.008v5.909z"/>
  </symbol>
  <use xlink:href="#paragraph"/>
</svg>