How to output svg?

Question

css

It is required to make this svg the background of the pseudo-element:

<?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>

I do it like this:

.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;
}

But only the corner from svg is displayed. It's just not very clear to me - how should I set with, height, background-size with the values ​​​​that are written in the svg itself (widdth, height, viewbox)?