Как убрать фиксированный размер SVG?

Question

[Денис Букреев]

Доброго дня.
Встраиваю svg в страницу инлайново - студия-заказчик настояла на таком отображении иконок, а я привык к спрайтам.

С помощью GULP.js создаю svg-спрайт, встраиваю его на страницу и далее, когда нужна иконка, вызываю ее:

<i class="icon">
	<svg class="icon__svg icon-light">
		<use x="0" y="0" xlink:href="#icon-light" />
	</svg>
</i>

Все бы ничего, но контейнер <svg></svg> имеет свою ширину в 300х150 пикселей.
Т.е., если я задам ширину, то высота останется 150, если задам высоту, то ширина останется 300. А мне надо, чтобы я один параметр указывал, а иконка сама уже масштабировалась.

Вот пример: codepen.io/denisbookreev/pen/NNmELb

Answer 1

[Петр]

С маштабированием svg не все так просто. Тут описана проблема

Comments

[Денис Букреев]

мдаа
с чего так повсеместно стараются использовать этот SVG
вес чуть меньше, чем у @2x спрайтов, но, учитывая, что скорости интернетов с каждым днем растут - этот параметр вообще можно считать незначительным
страницу захламляют кодом
использовать в два действия без мороки не получается

пустая тенденция, как и использование бустсрама

за ссылку спасибо

[Anton Filippov]

Денис Букреев: свг удобен масштабированием + если нужно подкрашивать иконки, у меня сейчас проект, в нем ключевые цвета сайта меняются в некоторых случаях, и свг удобен тем, что я их легко могу подкрасить и не грузить другое изображение другого цвета. То же и с машстабированием, иконки в разных местах повторяются но в разных размерах, свг скейлится нормально, png с артефактами.

[Anton Filippov]

ну и еще если кто-то будет делать сайт 400% зумом(может слабовидящие) то 2х пнг будет нечетким, а свг опять выиграет

[Петр]

Денис Букреев: Страница состоит из множества разных типов контента (Текст, картинки, стили и т.п.) Это не захломление, это просто иной тип подключения.

[Денис Букреев]

Anton Filippov: даа, тут соглашусь, преимущество большое
но стоит пересмотреть технологию и сделать более лаконичное подключение svg, чем имеется сейчас

[Anton Filippov]

Денис Букреев: да, мне в том проекте подклчаю svg через img src, и при загрузке страницы заменяю скриптом на инлайн-svg