SVG - top pixels were not visible

Question

Using SVG as my source <img>, and this is a clock with round and hour minute hands.

<?xml version="1.0"?>
  <svg xmlns="http://www.w3.org/2000/svg">
  <g class="sprite" id="ico-watch" transform="scale(0.03125 0.03125)">
    <path d="M512 960c-282.317 0-512-229.683-512-512s229.683-512 512-512 512 229.683 512 512-229.683 512-512 512zM512-23.040c-259.727 0-471.040 211.292-471.040 471.040 0 259.727 211.313 471.040 471.040 471.040 259.748 0 471.040-211.313 471.040-471.040 0-259.748-211.292-471.040-471.040-471.040zM790.733 748.298c8.274-7.68 8.765-20.644 1.085-28.938l-225.587-243.057c4.444-8.499 7.209-18.043 7.209-28.303 0-15.79-6.124-30.065-15.933-40.94l84.808-156.344c5.407-9.933 1.7-22.364-8.233-27.75-3.092-1.679-6.431-2.478-9.748-2.478-7.27 0-14.316 3.871-18.022 10.711l-84.808 156.324c-3.113-0.492-6.246-0.963-9.503-0.963-33.935 0-61.44 27.505-61.44 61.44s27.505 61.44 61.44 61.44c8.663 0 16.896-1.843 24.371-5.079l225.403 242.852c7.7 8.335 20.623 8.786 28.959 1.085z" fill="#000000" stroke-width="1" />
  </g>
</svg>

Demo: jsFiddle

Problem: The top pixel is not displayed, the circle is incomplete. Adding padding-top:10px;dynamically works, but not when adding to an SVG file.

Answer 1

Using translate(0, 60), you just need to move your svg in the viewport.

Since your SVG was a big space with a small clock, I used width="32" height="32"in the element <svg>for the size of the viewport

<?xml version="1.0"?>
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
    <g class="sprite" id="ico-watch" transform="scale(0.03125 0.03125) translate(0, 60)">
        <path d="M512 960c-282.317 0-512-229.683-512-512s229.683-512 512-512 512 229.683 512 512-229.683 512-512 512zM512-23.040c-259.727 0-471.040 211.292-471.040 471.040 0 259.727 211.313 471.040 471.040 471.040 259.748 0 471.040-211.313 471.040-471.040 0-259.748-211.292-471.040-471.040-471.040zM790.733 748.298c8.274-7.68 8.765-20.644 1.085-28.938l-225.587-243.057c4.444-8.499 7.209-18.043 7.209-28.303 0-15.79-6.124-30.065-15.933-40.94l84.808-156.344c5.407-9.933 1.7-22.364-8.233-27.75-3.092-1.679-6.431-2.478-9.748-2.478-7.27 0-14.316 3.871-18.022 10.711l-84.808 156.324c-3.113-0.492-6.246-0.963-9.503-0.963-33.935 0-61.44 27.505-61.44 61.44s27.505 61.44 61.44 61.44c8.663 0 16.896-1.843 24.371-5.079l225.403 242.852c7.7 8.335 20.623 8.786 28.959 1.085z" fill="#000000" stroke-width="1" />
    </g>
</svg>

Run codeHide result

Answer 2

SVG-- . , viewBox

svg {
  outline: 1px solid blue;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -70 1030 1040" width="200">
  <g class="sprite" id="ico-watch">
    <path d="M512 960c-282.317 0-512-229.683-512-512s229.683-512 512-512 512 229.683 512 512-229.683 512-512 512zM512-23.040c-259.727 0-471.040 211.292-471.040 471.040 0 259.727 211.313 471.040 471.040 471.040 259.748 0 471.040-211.313 471.040-471.040 0-259.748-211.292-471.040-471.040-471.040zM790.733 748.298c8.274-7.68 8.765-20.644 1.085-28.938l-225.587-243.057c4.444-8.499 7.209-18.043 7.209-28.303 0-15.79-6.124-30.065-15.933-40.94l84.808-156.344c5.407-9.933 1.7-22.364-8.233-27.75-3.092-1.679-6.431-2.478-9.748-2.478-7.27 0-14.316 3.871-18.022 10.711l-84.808 156.324c-3.113-0.492-6.246-0.963-9.503-0.963-33.935 0-61.44 27.505-61.44 61.44s27.505 61.44 61.44 61.44c8.663 0 16.896-1.843 24.371-5.079l225.403 242.852c7.7 8.335 20.623 8.786 28.959 1.085z"
    fill="#000000" stroke-width="1" />
  </g>
</svg>

Hide result

, , SVG. ! , .

svg {
  outline: 1px solid blue;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200">
  <g class="sprite" id="ico-watch" fill="none" stroke="black" stroke-width="4" stroke-linecap="round">
    <circle cx="50" cy="50" r="47"/>
    <circle cx="50" cy="50" r="6" fill="black" stroke="none"/>
    <path d="M50,50 l13,-22 M50,50 l25,25"/>
  </g>
</svg>

Hide result