Меняем ширину и высоту 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 очень большой, поэтому возьмем попроще - мы в одних из первых статьях рассматривали круг.Зададим 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
