Как делать SVG из спрайтов адаптивными?

Question

[Дмитрий Дев]

Сейчас пытаюсь разобраться с SVG спрайтами. Но уперся в то, что приходится указывать их размеры высоту и ширину. иначе ширина 300px вообще не понятно откуда берется.

У изображений всё просто - указал max-width: 100px; height: auto и изображение в случае чего подстроится.
Как это делать с SVG? И откуда берется ширина 300px?

Comments

[xdevelx]

Чтобы задавать размеры нужно изменить display с inline на inline-block или block

[Дмитрий]

повторю вопрос,
зачем спрайты, если есть http/2?

ну и, зачем на пустом месте себе выдумывать проблему?

[tema_sun]

Дмитрий, спрайты удобно перекрашивать, например.

[Дмитрий]

tema_sun, абсолютно так же можно красить и отдельный svg

Answer 1

[exdude]

Все просто!
Берешь код SVG, вставляешь в текстовый редактор, сохраняешь его как [name].svg .
Вставляешь его уже не как код, а как изображение, и присваиваешь class или id .
То есть:
<img src="[name].svg" class="svg-name-one"/>

Ну и соответственно в css:

.svg-name-one {
	width: 100%;
}

Или присвоить класс к самой svg:
Тык

Comments

[Rustam Bainazarov]

Не совсем хорошо, всё же use гораздо более гибкий. Вставка через img, логично, убивает всякую возможность стилизации SVG через CSS, для чего и используют сейчас SVG-спрайты для механизма use.

А у автора вопроса проблема лишь в том скорее всего, что он у SVG забыл заменить родной display: inline.

[Дмитрий Дев]

Рустам Байназаров, а на какой display надо изменить? я вроде все варианты перепробовал.