Как показать SVG-картинку в белом кружке?

html, svg, кружок

0

1

Есть SVG-картинка, например такая:

https://cdn.rawgit.com/xintrea/mytetra_syncro/master/icons/Gnome/color_gnome_...

Нужно вывести ее на HTML-странице на фоне белого кружка. Размер картинки должен быть 24x24px, а размер белого кружка должен быть, например 32x32px.

Вопросы:

Можно ли это сделать без использования растровой/векторной бэкграунд-картинки? Как?

Можно ли это сделать с использованием векторной бэкграунд-картинки с белым кружком? Как?

Ссылка

←	Web framework или среда для Web-разработки для новичка

хочу написать игру на чистом HTML5

→

http://jsfiddle.net/pyyzfc7z/

pkurg ★★★★
(02.06.17 23:40:02 MSK)
Последнее исправление: pkurg 02.06.17 23:44:00 MSK (всего исправлений: 1)

Ссылка

Да. CSS:

<div style="width:60px;height:60px;display:block;border-radius:50%;background:rgb(255,255,255)">
<img src="https://cdn.rawgit.com/xintrea/mytetra_syncro/master/icons/Gnome/color_gnome_2_chardevice.svg" style="width:30px;height:30px;margin:15px"/>
</div>

Shadow ★★★★★
(02.06.17 23:52:14 MSK)
Последнее исправление: Shadow 02.06.17 23:53:10 MSK (всего исправлений: 1)