How to crop SVG file within HTML/CSS

Issue

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

<!doctype html>
<html>


<body>

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


</body>
</html>

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?

Solution

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

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