Требуется сделать фоном псевдоэлемента этот svg:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="488.072px" height="488.072px" viewBox="0 0 488.072 488.072" xml:space="preserve">
<g>
<g>
<path d="M170.105,367.449c-1.728,0-3.453-0.445-5-1.34c-3.094-1.786-5-5.088-5-8.66V130.623c0-3.573,1.906-6.874,5-8.66
s6.906-1.786,10,0l196.438,113.414c3.095,1.786,5,5.087,5,8.66c0,3.572-1.905,6.874-5,8.659L175.105,366.11
C173.558,367.003,171.832,367.449,170.105,367.449z M180.105,147.944V340.13l166.438-96.093L180.105,147.944z"/>
</g>
<g>
<path d="M244.036,488.072c-65.185,0-126.467-25.384-172.559-71.478C25.384,370.502,0,309.221,0,244.036
c0-65.186,25.384-126.468,71.478-172.561C117.569,25.386,178.851,0,244.036,0c65.187,0,126.468,25.384,172.562,71.476
c46.093,46.092,71.476,107.375,71.476,172.561c0,65.185-25.384,126.467-71.477,172.559
C370.504,462.688,309.222,488.072,244.036,488.072z M244.036,20c-59.842,0-116.103,23.305-158.417,65.62
c-42.313,42.313-65.618,98.574-65.618,158.417c0,59.842,23.305,116.103,65.618,158.416
c42.315,42.315,98.575,65.618,158.417,65.618c59.843,0,116.104-23.304,158.418-65.618c42.314-42.313,65.618-98.574,65.618-158.416
c0-59.843-23.303-116.103-65.618-158.417C360.139,43.305,303.879,20,244.036,20z"/>
</g>
</g>
</svg>
Делаю так:
.photo-item:before{
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 74px;
height: 74px;
content: '';
background-image: url('img/video.svg');
background-repeat: no-repeat;
}
Но выводится только уголок от svg. Мне просто не очень понятно - каким образом нужно выставлять with, height, background-size с теми величинами, что написаны в самом svg (widdth, height, viewbox)?
Простой
