How to crop SVG file within HTML/CSS


I have the following HTML file (mypage.html). A SVG file
is attached as image into it.

<!doctype html>


    <!-- Display legend -->
        <center> <img src="circos-table-image-medium.svg" height=3500; width=3500; /> </center>


The page it generates looks like this:

enter image description here

Notice there are a large white space around the circle.
How can I crop that within html or CSS?



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

CSS Display an Image Resized and Cropped


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"/>

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

Answered By – Persijn

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published