phpjsJqueryhtmlcssblog

Меняем ширину и высоту svg

svg width и svg height будем рассматривать как одно целое! Не хочу делать отдельные страницы!

Установка высоты и ширины для svg

1. Как поставить или извинить svg width и height
2. Изменить svg width и height если это код svg
3. Не меняется высота(width) и ширина(height) у svg

Скопировать ссылку



Как поставить или извинить svg width и height

Загрузку svg векторной графики - мы выделили в отдельный пункт - оттуда возьмем экземпляр для экспериментов :

https://dwweb.ru/__img/__svg/bell/bell_95.svg

Выведем прямо здесь:

<img src="https://dwweb.ru/__img/__svg/bell/bell_95.svg">
Результат: Как видим наш svg без width и height растянулся на всю ширину, которая доступна.


Зададим 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="100" height="100"><circle cx="50" cy="50" r="50" fill="green"></svg>
Результат:

Изменим svg width и height

Заменим выше приведенные значения в нашем svg -выделено красным.

<svg width="300" height="300"><circle cx="50" cy="50" r="50" fill="green"></svg>

Результат изменения svg width и height

Как видим высота и ширина никак не повлияли на наш svg - блок внешний увеличился, а сама картинка нет!

В чем может быть проблема!?

Дело в том. что для данного svg - это у нас круг, нужно изменить некоторые параметры внутри кода svg.

Нам нужно изменить:

координаты по оси "x" - половину ширины width="300" -> cx="150"

координаты по оси "y" - половину ширины height="300" -> cy="150"

радиус круга половина внешнего размера 300/2 = 150 -> r="150"

Html:
<svg width="300" height="300"><circle cx="150" cy="150" r="150" fill="green"></svg>

Результат изменения svg width и height

Скопировать ссылку



Не меняется высота(width) и ширина(height) у svg

Иногда ширина и высота svg не меняется при изменении width и height.


Давайте приведу пример:

Html:

<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>

Результат:
Html:

<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 - как-то совсем маловато...

Смотрим, что у нас получилось:

Html:

<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 внутри тега:

Html:

<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

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---