Quite often, web developers have a great SVG image that they want to use but would prefer a cropped version of it. It could be that there's too much whitespace or they only want to use a specific part of the graphic. Take this vector illustration, for instance.

Suppose I wish to hide the smoke clouds and also want to remove the whitespace to show rocket in dead-center. There are a bunch of tools I can use to crop the image. I can use Inkspace, or some online utility. However, I found that the fastest way is to edit the viewBox of SVG in a text editor. For me, it was far more efficient than importing the SVG in software and then, exporting it again.

viewBox in a Nutshell

viewBox has been explained quite a few times but it's easy to find it confusing because there's too much technical jargon to unwrap. There's an easy way to understand: imagine SVG as a canvas that extends infinitely in all directions. With viewBox (x, y, width, height), I can control which parts to show and which part to scale. For instance, the rocket illustration above has viewPort 0 168.4 940.7 724. Let's see what happens when we double the width and height.

The canvas got stretched to where there's is just an empty space.

Cropping SVG using viewBox

Editing the viewBox attribute is an easy way to crop an SVG image. How do you do it? Open the SVG file in a text editor and start tweaking the viewBox attribute. Finding the right value is a bit of guesswork, but you get there in 3-4 tries. Let's follow the approach for what we wanted to do:

Note: It's important that you don't use the "height" attribute while adjusting these numbers as the browser tries to scale both the width and height of the SVG.

First, we will work on the "x" attribute of viewBox. As we have already covered, the default viewPort is 0 168.4 940.7 724. We'll edit "x" to make it just close enough to the actual rocket.

Let's try "400" (viewBox: 400 168.4 940.7 724):

Nope, too much. "300" then! (viewBox: 300 168.4 940.7 724):

This seems almost right. Okay, so we move on to the next attribute, "y." Let's try to increase it, so it's just above the top of the rocket.

Let's try "300" (viewBox: 300 300 940.7 724):

Still more, so "280"? (viewBox: 300 280 940.7 724):

We will repeat the same process for width and height. We have to reduce "width" to make it reach just the right side of the rocket.

For width, the right number is around "380" (viewBox: 300 380 380 724):

Similarly, we can experiment around height to determine the correct number. Let's try "500":

Well, that's just about right. So, the cropped SVG viewBox is: 300 280 380 500

viewBox Approach vs Others

Some may feel that guesswork isn't the best approach to do a trivial image manipulation operation. I kind of agree, but it's the fastest way to do this. Quickly adjusting numbers, and checking the results by page refresh makes it a two minutes task. Much faster than using external software. Moreover, vector design software aren't always perfect in interpreting SVGs and exporting them properly. Using text editor is much faster that saves you more trouble than it gives. Give it a try!