How to manage SVG with CSS?

Question

css

Friends, I am very poorly versed in SVG. Help me figure out how to control the size of this SVG with a CSS mask?
t can even resize, block size is 170px by 125px and SVG is much smaller, how to resize SVG? And how to change the size of CIRCLE circles? Tell me please.
Here is the live code https://codepen.io/Cheizer/pen/xxKvyzb
SVG size is specified with border

<svg viewbox="0 0 10 6.7" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="myMask" x="0" y="0">
      <rect x=1 y=1 width="8" height="5" fill="white"></rect>
      <circle cx="1" cy="1" r="1" fill="black"></circle>
      <circle cx="9" cy="1" r="1" fill="black"></circle>
      <circle cx="1" cy="6" r="1" fill="black"></circle>
      <circle cx="9" cy="6" r="1" fill="black"></circle>
    </mask>
    <circle cx=5 cy=5 r=1 id="path1"/>
  </defs>
  <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" height="6.7" width="10" mask="url(#myMask)"/>
</svg>

But the actual size is smaller :( how to control the size?
And how to change the size of the circle element at the corners? If it is possible to control these sizes in CSS, it would be great.

Answer 1

You can most likely change the size only with the help of js: As for the size of svg, try to make width: 100% and height: 100% for svg, and control the size of the parent in which this svg is inscribed. So it seems to work

Answer 2

Open svg file in code editor, copy path and ViewBox. Further in the body at the very top write:

<svg style="display: none;">
  <symbol id="facebook" viewBox="0 0 96.124 96.123">
    <g>
      <path d="M72.089,0.02L59.624,0C45.62,0,36.57,9.285,36.57,23.656v10.907H24.037c-1.083,0-1.96,0.878-1.96,1.961v15.803
        c0,1.083,0.878,1.96,1.96,1.96h12.533v39.876c0,1.083,0.877,1.96,1.96,1.96h16.352c1.083,0,1.96-0.878,1.96-1.96V54.287h14.654
        c1.083,0,1.96-0.877,1.96-1.96l0.006-15.803c0-0.52-0.207-1.018-0.574-1.386c-0.367-0.368-0.867-0.575-1.387-0.575H56.842v-9.246
        c0-4.444,1.059-6.7,6.848-6.7l8.397-0.003c1.082,0,1.959-0.878,1.959-1.96V1.98C74.046,0.899,73.17,0.022,72.089,0.02z"/>
    </g>
  </symbol>
</svg>

Insert the icon where you need it like this:

<a class="social__item" href="#">
  <svg class="social__icon">
    <use xlink:href="#facebook"></use>
  </svg>
</a>

It doesn't have to be exactly like mine. I showed on the example of a social icon.