How to Use IMG attributes, "width" and "height", to Crop SVG Images?

One way to get rid of those extra white spaces in a SVG image, is to use "width" and "height" attributes in HTML IMG tags.

There are the rules on how "width" and "height" attributes in the HTML IMG tag work with the SVG image size:

• If "width" or "height" attribute is not specified, the SVG image size in horizontal or vertical direction is not changed.
• If "width" or "height" attribute is specified and smaller than the SVG image size in horizontal or vertical direction, the image will be cropped in that direction.
• If "width" or "height" attribute is specified and larger than the SVG image size in horizontal or vertical direction, the image will be padded in that direction.

You can follow this tutorial to test those rules.

1. Save the following SVG image in a file called, circle.svg:

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50"/>
</svg>

2. Save the following HTML document in another file called, circle.html:

<html><body>
<p>Black
<img src="/circle.svg"/> 
Circle...
</p>

<p>Black
<img src="/circle.svg" width="100" height="100"/> 
Circle with <img ... width="100" height="100"
</p>

<p>Black
<img src="/circle.svg" width="50" height="50"/> 
Circle with <img ... width="50" height="50">
</p>

<p>Black
<img src="/circle.svg" width="200" height="200"/> 
Circle with <img ... width="200" height="200">
</p>
</body></html>

When you open the above HTML file, circle.html, in a Web browser, you see 4 SVG images with different display widths and heights:

As you can see, the second SVG image displayed perfectly in 100px x 100px with extra white spaces removed.

By the way, IMG 'width' and 'height' attributes behave differently on PNG (and other image types) images than SVG images. 'width' and 'height' attributes will scale (shrink or enlarge) PNG images, instead of crop or pad them.

⇒ Use SVG Images in OBJECT Tags

⇐ Use SVG Images in IMG Tags

⇑ Introduction to SVG (Scalable Vector Graphics)

⇑⇑ SVG (Scalable Vector Graphics)