Можно ли изменять размер svg если он вставлен в html?

Question

[Рамиль]

css иконка просто вставляется внутри html. Как можно изменить размер этой иконки ?
width не работает.

Comments

[cache0]

код в студию

[Рамиль]

<div>
<svg x="0" y="0" height="40" width="40"><path d="M12.5,1.7c1.1,0.8,2.2,1.8,3.2,2.7c0.9,0.8,2.1,1.8,2.8,2.8c-1.8,0.8-2.9,2.5-2.9,4.4c0,2.8,2.4,5,5.3,5
                s5.3-2.2,5.3-5s-2.4-5-5.3-5c-0.1,0-0.1,0-0.2,0c-0.8-1.2-2-2.3-3-3.3c-1-1-2.3-2.1-3.6-3.1C13-0.6,11.4,0.8,12.5,1.7z M36,21.8
                c0-0.3,0-0.6,0-1c0.1-3.1-3.7-6.9-5.4-9.5c-0.3-0.5-0.9-0.7-1.5-0.6c-0.4,0.1-0.8,0.2-1.2,0.3c0,0.1,0,0.3,0,0.4
                c0,3.6-3.1,6.5-6.9,6.5c-2.9,0-5.4-1.7-6.4-4.1c-4.5,1-9.1,1.9-13.6,2.9c-0.8,0.2-1,0.8-0.9,1.3c0,0.1,0,0.2,0,0.3
                c0,4.6,0,9.3,0,13.8c0,0.8,0.6,1.2,1.3,1.3C12.3,34.3,23.1,35.2,34,36c0.8,0.1,1.3-0.6,1.3-1.3c0-0.1,0,0.5,0-0.2s-0.4-1.7-1.2-2
                l0,0c0.8-0.2,1.3-1.4,1.4-1.6c0.1-0.2,0.1-0.8,0-1.1c-0.1-0.3-0.4-1.7-1.2-2l0,0c0.8-0.2,1.3-1.3,1.4-1.6c0-0.3,0.1-0.7,0-1.1
                c0-0.4-0.5-1.6-1.2-1.9l0,0C35.3,23.1,35.8,22.1,36,21.8z M29.3,33.3L3.7,31.2c-0.8-0.1-1.4-0.7-1.4-1.4c0-0.7,0.6-1.3,1.4-1.2
                " fill="#8AAE3E" stroke="none"></path></svg>
</div>

[cache0]

Рамиль:

<div>
<svg x="0" y="0" height="40" width="40" viewBox="-40 -40 80 80" transform="scale(8)"><path d="M12.5,1.7c1.1,0.8,2.2,1.8,3.2,2.7c0.9,0.8,2.1,1.8,2.8,2.8c-1.8,0.8-2.9,2.5-2.9,4.4c0,2.8,2.4,5,5.3,5
                s5.3-2.2,5.3-5s-2.4-5-5.3-5c-0.1,0-0.1,0-0.2,0c-0.8-1.2-2-2.3-3-3.3c-1-1-2.3-2.1-3.6-3.1C13-0.6,11.4,0.8,12.5,1.7z M36,21.8
                c0-0.3,0-0.6,0-1c0.1-3.1-3.7-6.9-5.4-9.5c-0.3-0.5-0.9-0.7-1.5-0.6c-0.4,0.1-0.8,0.2-1.2,0.3c0,0.1,0,0.3,0,0.4
                c0,3.6-3.1,6.5-6.9,6.5c-2.9,0-5.4-1.7-6.4-4.1c-4.5,1-9.1,1.9-13.6,2.9c-0.8,0.2-1,0.8-0.9,1.3c0,0.1,0,0.2,0,0.3
                c0,4.6,0,9.3,0,13.8c0,0.8,0.6,1.2,1.3,1.3C12.3,34.3,23.1,35.2,34,36c0.8,0.1,1.3-0.6,1.3-1.3c0-0.1,0,0.5,0-0.2s-0.4-1.7-1.2-2
                l0,0c0.8-0.2,1.3-1.4,1.4-1.6c0.1-0.2,0.1-0.8,0-1.1c-0.1-0.3-0.4-1.7-1.2-2l0,0c0.8-0.2,1.3-1.3,1.4-1.6c0-0.3,0.1-0.7,0-1.1
                c0-0.4-0.5-1.6-1.2-1.9l0,0C35.3,23.1,35.8,22.1,36,21.8z M29.3,33.3L3.7,31.2c-0.8-0.1-1.4-0.7-1.4-1.4c0-0.7,0.6-1.3,1.4-1.2
                " fill="#8AAE3E" stroke="none"></path></svg>
</div>

[Рамиль]

cache0: А через css можно изменить размер?

[cache0]

Рамиль: советую "пересобрать" свг в векторном редакторе, так как он не валиден, а потом засунуть в src тега img

[Рамиль]

cache0: цвет иконки меняется в коде. Через js. Поэтому img не подойдет.

[Рамиль]

cache0: Ваша подсказка с transform scale() помогла. Удалось изменить размеры.

[cache0]

Рамиль: img подойдет, необязательно запаковывать в base64

[cache0]

https://css-tricks.com/lodge/svg/09-svg-data-uris/

<img src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px">
<g>
    <path d="M28.1,36.6c4.6,1.9,12.2,1.6,20.9,1.1c8.9-0.4,19-0.9,28.9,0.9c6.3,1.2,11.9,3.1,16.8,6c-1.5-12.2-7.9-23.7-18.6-31.3   c-4.9-0.2-9.9,0.3-14.8,1.4C47.8,17.9,36.2,25.6,28.1,36.6z"/>
    <path d="M70.3,9.8C57.5,3.4,42.8,3.6,30.5,9.5c-3,6-8.4,19.6-5.3,24.9c8.6-11.7,20.9-19.8,35.2-23.1C63.7,10.5,67,10,70.3,9.8z"/>
    <path d="M16.5,51.3c0.6-1.7,1.2-3.4,2-5.1c-3.8-3.4-7.5-7-11-10.8c-2.1,6.1-2.8,12.5-2.3,18.7C9.6,51.1,13.4,50.2,16.5,51.3z"/>
    <path d="M9,31.6c3.5,3.9,7.2,7.6,11.1,11.1c0.8-1.6,1.7-3.1,2.6-4.6c0.1-0.2,0.3-0.4,0.4-0.6c-2.9-3.3-3.1-9.2-0.6-17.6   c0.8-2.7,1.8-5.3,2.7-7.4c-5.2,3.4-9.8,8-13.3,13.7C10.8,27.9,9.8,29.7,9,31.6z"/>
    <path d="M15.4,54.7c-2.6-1-6.1,0.7-9.7,3.4c1.2,6.6,3.9,13,8,18.5C13,69.3,13.5,61.8,15.4,54.7z"/>
    <path d="M39.8,57.6C54.3,66.7,70,73,86.5,76.4c0.6-0.8,1.1-1.6,1.7-2.5c4.8-7.7,7-16.3,6.8-24.8c-13.8-9.3-31.3-8.4-45.8-7.7   c-9.5,0.5-17.8,0.9-23.2-1.7c-0.1,0.1-0.2,0.3-0.3,0.4c-1,1.7-2,3.4-2.9,5.1C28.2,49.7,33.8,53.9,39.8,57.6z"/>
    <path d="M26.2,88.2c3.3,2,6.7,3.6,10.2,4.7c-3.5-6.2-6.3-12.6-8.8-18.5c-3.1-7.2-5.8-13.5-9-17.2c-1.9,8-2,16.4-0.3,24.7   C20.6,84.2,23.2,86.3,26.2,88.2z"/>
    <path d="M30.9,73c2.9,6.8,6.1,14.4,10.5,21.2c15.6,3,32-2.3,42.6-14.6C67.7,76,52.2,69.6,37.9,60.7C32,57,26.5,53,21.3,48.6   c-0.6,1.5-1.2,3-1.7,4.6C24.1,57.1,27.3,64.5,30.9,73z"/>
</g>
</svg>' alt="" />

только он не валидный этот ваш свг поэтому вот по образу и подобию

Answer 1

[cache0]

<img style="width:500px;height:500px;" src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px">
<g>
    <path d="M28.1,36.6c4.6,1.9,12.2,1.6,20.9,1.1c8.9-0.4,19-0.9,28.9,0.9c6.3,1.2,11.9,3.1,16.8,6c-1.5-12.2-7.9-23.7-18.6-31.3   c-4.9-0.2-9.9,0.3-14.8,1.4C47.8,17.9,36.2,25.6,28.1,36.6z"/>
    <path d="M70.3,9.8C57.5,3.4,42.8,3.6,30.5,9.5c-3,6-8.4,19.6-5.3,24.9c8.6-11.7,20.9-19.8,35.2-23.1C63.7,10.5,67,10,70.3,9.8z" fill="#ff00ff"/>
    <path d="M16.5,51.3c0.6-1.7,1.2-3.4,2-5.1c-3.8-3.4-7.5-7-11-10.8c-2.1,6.1-2.8,12.5-2.3,18.7C9.6,51.1,13.4,50.2,16.5,51.3z" fill="#aa00ff" />
    <path d="M9,31.6c3.5,3.9,7.2,7.6,11.1,11.1c0.8-1.6,1.7-3.1,2.6-4.6c0.1-0.2,0.3-0.4,0.4-0.6c-2.9-3.3-3.1-9.2-0.6-17.6   c0.8-2.7,1.8-5.3,2.7-7.4c-5.2,3.4-9.8,8-13.3,13.7C10.8,27.9,9.8,29.7,9,31.6z" fill="#ccaadd"/>
    <path d="M15.4,54.7c-2.6-1-6.1,0.7-9.7,3.4c1.2,6.6,3.9,13,8,18.5C13,69.3,13.5,61.8,15.4,54.7z"/>
    <path d="M39.8,57.6C54.3,66.7,70,73,86.5,76.4c0.6-0.8,1.1-1.6,1.7-2.5c4.8-7.7,7-16.3,6.8-24.8c-13.8-9.3-31.3-8.4-45.8-7.7   c-9.5,0.5-17.8,0.9-23.2-1.7c-0.1,0.1-0.2,0.3-0.3,0.4c-1,1.7-2,3.4-2.9,5.1C28.2,49.7,33.8,53.9,39.8,57.6z"/>
    <path d="M26.2,88.2c3.3,2,6.7,3.6,10.2,4.7c-3.5-6.2-6.3-12.6-8.8-18.5c-3.1-7.2-5.8-13.5-9-17.2c-1.9,8-2,16.4-0.3,24.7   C20.6,84.2,23.2,86.3,26.2,88.2z"/>
    <path d="M30.9,73c2.9,6.8,6.1,14.4,10.5,21.2c15.6,3,32-2.3,42.6-14.6C67.7,76,52.2,69.6,37.9,60.7C32,57,26.5,53,21.3,48.6   c-0.6,1.5-1.2,3-1.7,4.6C24.1,57.1,27.3,64.5,30.9,73z"/>
</g>
</svg>' alt="" />

короче можно выше пример с растягивание с помощью стилей как простое img