How to crop SVG file within HTML/CSS

Crop

You can crop the image by using negative margins and fixing the size of the parent element:

CSS Display an Image Resized and Cropped

BUT THIS IS AN SVG!

Not only can you display an svg directly in html:

<svg viewBox="0 0 100 100" height="150px" width="150px">
  <rect x="10" y="10" rx="5" width="80" height="80" fill="pink" stroke="green" stroke-width="5"/>
</svg>

but to crop/resize you can simply alter the viewBox attribute on the <svg> tag:

viewBox="0 0 100 100" 

will display anything within 0 and 100 unit x & y

viewBox="-100 -100 100 100" 

Will display anything from -100 to 100 units x & y

viewBox="50 50 500 500" 

Will display anything from 50 to 500 units x & y

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)