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:
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