trim the extra space of SVG without changing its size-CodePudding

How can I trim extra space around the svg without changing the svg size:

<svg fill="#807c8c" width="45" height="45" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg">
                 <path style="stroke:#ffffff;stroke-width:5px;" d="m175 210c-3.0938 0-6.0625-1.2266-8.25-3.4141-2.1914-2.1875-3.418-5.1562-3.418-8.2539v-23.332c0.027344-21.652 8.6406-42.41 23.949-57.719s36.066-23.922 57.719-23.949h23.332c6.4453 0 11.668 5.2266 11.668 11.668s-5.2227 11.668-11.668 11.668h-23.332c-15.465 0.015625-30.293 6.1641-41.23 17.102s-17.086 25.766-17.102 41.23v23.332c0 3.0977-1.2266 6.0664-3.418 8.2539-2.1875 2.1875-5.1562 3.4141-8.25 3.4141zm361.67 175v-23.332c0-6.4453-5.2266-11.668-11.668-11.668s-11.668 5.2227-11.668 11.668v23.332c-0.015625 15.465-6.1641 30.293-17.102 41.23s-25.766 17.086-41.23 17.102h-23.332c-6.4453 0-11.668 5.2266-11.668 11.668s5.2227 11.668 11.668 11.668h23.332c21.652-0.027344 42.41-8.6406 57.719-23.949s23.922-36.066 23.949-57.719zm-256.67 70c0-3.0938-1.2266-6.0625-3.4141-8.25-2.1875-2.1914-5.1562-3.418-8.2539-3.418h-23.332c-15.465-0.015625-30.293-6.1641-41.23-17.102s-17.086-25.766-17.102-41.23v-23.332c0-6.4453-5.2266-11.668-11.668-11.668s-11.668 5.2227-11.668 11.668v23.332c0.027344 21.652 8.6406 42.41 23.949 57.719s36.066 23.922 57.719 23.949h23.332c3.0977 0 6.0664-1.2266 8.2539-3.418 2.1875-2.1875 3.4141-5.1562 3.4141-8.25zm256.67-256.67v-23.332c-0.027344-21.652-8.6406-42.41-23.949-57.719s-36.066-23.922-57.719-23.949h-23.332c-6.4453 0-11.668 5.2266-11.668 11.668s5.2227 11.668 11.668 11.668h23.332c15.465 0.015625 30.293 6.1641 41.23 17.102s17.086 25.766 17.102 41.23v23.332c0 6.4453 5.2266 11.668 11.668 11.668s11.668-5.2227 11.668-11.668z"/>
                </svg>

I have tried a million values for viewBox but it seems that I'm unable to find out the logic...

CodePudding user response：

I think you're looking for something like this, where the SVG clips off the extra space around the art without making the apparent size of the art larger. Note, I modified both the viewBox and width and height properties.

svg {
  background: pink;
}

<p>Before:</p>
<svg fill="#807c8c" width="45" height="45" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg">
  <path style="stroke:#ffffff;stroke-width:5px;" d="m175 210c-3.0938 0-6.0625-1.2266-8.25-3.4141-2.1914-2.1875-3.418-5.1562-3.418-8.2539v-23.332c0.027344-21.652 8.6406-42.41 23.949-57.719s36.066-23.922 57.719-23.949h23.332c6.4453 0 11.668 5.2266 11.668 11.668s-5.2227 11.668-11.668 11.668h-23.332c-15.465 0.015625-30.293 6.1641-41.23 17.102s-17.086 25.766-17.102 41.23v23.332c0 3.0977-1.2266 6.0664-3.418 8.2539-2.1875 2.1875-5.1562 3.4141-8.25 3.4141zm361.67 175v-23.332c0-6.4453-5.2266-11.668-11.668-11.668s-11.668 5.2227-11.668 11.668v23.332c-0.015625 15.465-6.1641 30.293-17.102 41.23s-25.766 17.086-41.23 17.102h-23.332c-6.4453 0-11.668 5.2266-11.668 11.668s5.2227 11.668 11.668 11.668h23.332c21.652-0.027344 42.41-8.6406 57.719-23.949s23.922-36.066 23.949-57.719zm-256.67 70c0-3.0938-1.2266-6.0625-3.4141-8.25-2.1875-2.1914-5.1562-3.418-8.2539-3.418h-23.332c-15.465-0.015625-30.293-6.1641-41.23-17.102s-17.086-25.766-17.102-41.23v-23.332c0-6.4453-5.2266-11.668-11.668-11.668s-11.668 5.2227-11.668 11.668v23.332c0.027344 21.652 8.6406 42.41 23.949 57.719s36.066 23.922 57.719 23.949h23.332c3.0977 0 6.0664-1.2266 8.2539-3.418 2.1875-2.1875 3.4141-5.1562 3.4141-8.25zm256.67-256.67v-23.332c-0.027344-21.652-8.6406-42.41-23.949-57.719s-36.066-23.922-57.719-23.949h-23.332c-6.4453 0-11.668 5.2266-11.668 11.668s5.2227 11.668 11.668 11.668h23.332c15.465 0.015625 30.293 6.1641 41.23 17.102s17.086 25.766 17.102 41.23v23.332c0 6.4453 5.2266 11.668 11.668 11.668s11.668-5.2227 11.668-11.668z"/>
</svg>
<p>After:</p>
<svg fill="#807c8c" width="28" height="28" version="1.1" viewBox="150 80 400 400" xmlns="http://www.w3.org/2000/svg">
  <path style="stroke:#ffffff;stroke-width:5px;" d="m175 210c-3.0938 0-6.0625-1.2266-8.25-3.4141-2.1914-2.1875-3.418-5.1562-3.418-8.2539v-23.332c0.027344-21.652 8.6406-42.41 23.949-57.719s36.066-23.922 57.719-23.949h23.332c6.4453 0 11.668 5.2266 11.668 11.668s-5.2227 11.668-11.668 11.668h-23.332c-15.465 0.015625-30.293 6.1641-41.23 17.102s-17.086 25.766-17.102 41.23v23.332c0 3.0977-1.2266 6.0664-3.418 8.2539-2.1875 2.1875-5.1562 3.4141-8.25 3.4141zm361.67 175v-23.332c0-6.4453-5.2266-11.668-11.668-11.668s-11.668 5.2227-11.668 11.668v23.332c-0.015625 15.465-6.1641 30.293-17.102 41.23s-25.766 17.086-41.23 17.102h-23.332c-6.4453 0-11.668 5.2266-11.668 11.668s5.2227 11.668 11.668 11.668h23.332c21.652-0.027344 42.41-8.6406 57.719-23.949s23.922-36.066 23.949-57.719zm-256.67 70c0-3.0938-1.2266-6.0625-3.4141-8.25-2.1875-2.1914-5.1562-3.418-8.2539-3.418h-23.332c-15.465-0.015625-30.293-6.1641-41.23-17.102s-17.086-25.766-17.102-41.23v-23.332c0-6.4453-5.2266-11.668-11.668-11.668s-11.668 5.2227-11.668 11.668v23.332c0.027344 21.652 8.6406 42.41 23.949 57.719s36.066 23.922 57.719 23.949h23.332c3.0977 0 6.0664-1.2266 8.2539-3.418 2.1875-2.1875 3.4141-5.1562 3.4141-8.25zm256.67-256.67v-23.332c-0.027344-21.652-8.6406-42.41-23.949-57.719s-36.066-23.922-57.719-23.949h-23.332c-6.4453 0-11.668 5.2266-11.668 11.668s5.2227 11.668 11.668 11.668h23.332c15.465 0.015625 30.293 6.1641 41.23 17.102s17.086 25.766 17.102 41.23v23.332c0 6.4453 5.2266 11.668 11.668 11.668s11.668-5.2227 11.668-11.668z"/>
</svg>