Меняем ширину и высоту svg
Установка высоты и ширины для svg
- Как поставить или извинить svg width и height
- Изменить svg width и height
если это код svg - Не меняется высота(width) и ширина(height) у svg
Как поставить или извинить svg width и height
Загрузку svg векторной графики - мы выделили в отдельный пункт - оттуда возьмем экземпляр для экспериментов :Выведем прямо здесь:
Зададим svg width и svg height
Как вы знаете есть "3 способа css" - воспользуемся одним из этих способов!
<img style="width:50px;height:50px;" src="https://dwweb.ru/__img/__svg/bell/bell_95.svg">
Изменить svg width и height если это код svg<
Выше приведенный пример не будем рассматривать, поскольку код этого svg очень большой, поэтому возьмем попроще - мы в одних из первых статьях рассматривали круг.Зададим svg width и svg height прямо внутри кода
Возьмем код svg и зададим svg width и svg height прямо внутри кода :Изменим svg width и height
Заменим выше приведенные значения в нашем svg -выделено красным.
Результат изменения svg width и height
Как видим высота и ширина никак не повлияли на наш svg - блок внешний увеличился, а сама картинка нет!
В чем может быть проблема!?
Дело в том. что для данного svg - это у нас круг, нужно изменить некоторые параметры внутри кода svg.
Нам нужно изменить:
координаты по оси "x" - половину ширины width="300" -> cx="150"
координаты по оси "y" - половину ширины height="300" -> cy="150"
радиус круга половина внешнего размера 300/2 = 150 -> r="150"
Результат изменения svg width и height
Не меняется высота(width) и ширина(height) у svg
Иногда ширина и высота svg не меняется при изменении width и height.Давайте приведу пример:
<svg width="25" height="25"> <path d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"/> </svg>
<svg width="125" height="125"> <path d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"/> </svg>
Картинка svg не меняет высоту(width) и ширину(height)
Как видим, наружный размер изменился - я специально добавил бордюр. А картинка нет. Почему!?
Для картинок svg нужен атрибут "viewBox"!
Не буду подробно рассказывать о viewBox - это надо делать отдельную страницу.
Совсем кратко:
Первые два числа — координаты X и Y верхнего левого угла масштабируемой области, два других — её ширина и высота.
Изменим размер и позицию внутри обертки с размером "150", а то 50 - как-то совсем маловато...
Смотрим, что у нас получилось:
<svg width="150" height="150" viewBox="1 2 22 20"> <path d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"></path> </svg>
Результат изменения высоты(width) и ширины(height) у svg
Когда у вас уже есть "viewBox" вы можете использовать "3 способа css", давайте изменим на 350 внутри тега:
<svg width="350" height="350" viewBox="1 2 22 20" fill="red"> <path d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"></path> </svg>
Результат изменения высоты(width) и ширины(height) у svg
svg width
svg width height
svg width height viewbox
svg path width
svg path width height
svg g width
svg stroke width
svg width
svg css width
svg path stroke width
svg line width
svg use width
svg height
svg width height
svg width height viewbox
svg path height
svg path width height
svg height

подробнее.
подробнее.