Ответы пользователя по тегу HTML
  • Почему не получается задать нужный размер SVG-элементу, использующему SVG-спрайт?

    Jman
    @Jman
    Frontend Developer
    К сожалению без указания viewBox ничего не получится. Так как элемент svg ничего не знает о размерах символа и он будет отображатся с размерами по умолчанию ( высота по умолчанию 150px и даже height:auto; не поможет).
    Чтоб пример заработал как надо нужно добавить viewBox элементу который отображает иконку или задавать размеры руками. https://jsfiddle.net/60xdccpL/

    UPD Для потомков чтоб не искали в комментариях

    Есть еще один вариант. Поскольку у нас есть свг элемент в html мы можем все таки упростить задачу управлением его размерами через CSS а не писать viewBox в svg:
    1. Для квадаратной иконки можно установить размеры равные 1em, для неквадратных – нужные пропорции (например ширина 1em и высота 1.6em) и тогда можно управлять размерами иконки с помощью font-size
    2. Туда же можно еще и fill: currentColor добавить.

    Пример https://jsfiddle.net/dart_eugenius/fahaedcq/
    Ответ написан