Меняем ширину и высоту 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 widthsvg width heightsvg width height viewboxsvg path widthsvg path width heightsvg g widthsvg stroke widthsvg widthsvg css widthsvg path stroke widthsvg line widthsvg use widthsvg heightsvg width heightsvg width height viewboxsvg path heightsvg path width heightsvg height
