Как управлять размером inline SVG?

Question

[Антон Литвиненко]

Нужно было сделать такую кнопку, где при наведении рисовался вокруг нее круг. Я пример нашел и подстроил под себя.
Но возник вопрос как при адаптиве ее уменьшить, так как svg инлайново прописана с размерами, я не придумал ничего лучше как заменить эти размеры с помощью js, но мне это кажется костылем. Может есть правильный способ?
зы. Я пример немного упростил и ресайзы убрал, нужно перезагрузить на меньшем разрешении.

Comments

[Юрий Литвиненко]

сделать две кнопки с разными размерами svg, и показывать адаптивно нужную.

[Антон Литвиненко]

Юрий Литвиненко, настолько я не люблю дублирование контента, что над таким способом даже не задумывался)

[Юрий Литвиненко]

))

Answer 1

[RAX7]

Добавь viewBox

Comments

[Антон Литвиненко]

и реально работает...

[Антон Литвиненко]

А почему оно вообще так работает? Я не шибко шарю SVG, может где почитать есть?

[RAX7]

Антон Литвиненко, держи css.yoksel.ru/svg-sizes

[Антон Литвиненко]

RAX7, Премного благодарен)

[RAX7]

Антон Литвиненко, не за что =)