Prevent image rotation to change viewport width

Question

I'm applying rotation to an img element and this is causing the viewport to change it's width, giving the user the possibility of scrolling to sides, there is a way to change this? The images are svgs

Answer 1

Use overflow-x: hidden on the wrapping element

Answer 2

Wrap the SVG in a <div> styled to be the same height and width as your SVG element and set overflow: hidden on the wrapping element.

The <div> will hide the corners of your SVG as it rotates but none of the inner SVG circle should be clipped.