How to crop SVG file within HTML/CSS

Question

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?

and i beleave is deprecated. I would recommend not to use it. — Persijn, Jun 02 '16 at 10:39

Persijn · Accepted Answer · 2019-09-23T12:29:04.363

60

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

edited Sep 23 '19 at 12:29

answered Jun 02 '16 at 10:35

Persijn

14,624
3
43
72

4

How can I use your `viewbox` approach on to SVG *file* inside html? – neversaint Jun 02 '16 at 11:35
1

Just open the svg file in a text editor copy and paste it from When you have copied it just change the viewBox of the You need to change that viewBox @neversaint – Persijn Jun 02 '16 at 14:10
5

I need to do it programmatically. Cos, the figures are generated in a web application. – neversaint Jun 03 '16 at 00:22
Using an `` element, although the most supported method, limits your ability to alter the SVG ...long story. Try some alternatives like adding an inline SVG as a wrapper, and using the SVG `` element or maybe use AJAX to load the SVG file and inject in the webpage, thus giving you full access to the SVG to alter the ` – Guy Park Dec 18 '18 at 02:36
Agree with neversaint. This solution is fine if you can edit the svg. But what if you need to just use an existing svg file without modifying it? E.g., as neversaint suggested, and the OP appeared to ask, if the svg file is programmatically generated, – hrabinowitz Jun 03 '20 at 20:45

score 27 · Answer 2 · answered Dec 13 '16 at 10:06

None of these answers (and multiple similar/duplicates) seemed to completely answer this and provide an example.

Step by Step: Remove "padding" (surrounding white space) directly within SVG code

Determine the "actual" size of your svg without padding. For me, this was easiest to do by using the (Chrome) inspector and hovering over the path element within the inspector. You'll see the width and height displayed next to the actual svg in your browser.
- If there are multiple path elements, I've found the last one is often the "containing" element.
Now edit the svg code directly in your text / code editor of choice. You'll be changing the code within the svg element tag only.
- Change the width and height attributes to the "actual" dimensions you determined in step #1.
- Change the 4 dimensions of the viewBox attribute. No units though, just the numbers (ie. 10 not 10px).
  - We'll start with the 3rd and 4th numbers, which will again be your "actual" width and height.
  - The 1st and 2nd dimensions are the x and y coordinates for the "origin" of the portion of the svg that is within the viewBox. These will respectively be changed (from what was likely 0 0) to: half of the difference between the initial width and height and the actual width and height. In simpler (CSS) terms, your left margin and your top margin.

Confused? Simple Step by Step Example

This example will make it extremely simple, and will use the svg directly below as reference. If you'd like to walk through this exact example, just wrap all of the code below in HTML tags <html> svg code </html> and open in your browser.

    <svg xmlns="http://www.w3.org/2000/svg" width="48" 
    height="48" viewBox="0 0 48 48">
    <path d="M40 4H8C5.79 4 4.02 5.79 4.02 8L4 44l8-8h28c2.21 
    0 4-1.79 4-4V8c0-2.21-1.79-4-4-4zM12 
    18h24v4H12v-4zm16 10H12v-4h16v4zm8-12H12v-4h24v4z"/></svg>

+ We'll assume you've been able to complete step #1 and determine the "actual" dimensions of your svg without padding. For this example, the actual dimensions are 40 x 40. Change the svg attributes to reflect this.

    width="40" height="40"

+ Our initial dimensions were 48 x 48 and our actual dimensions (sans padding) are 40 x 40. Half of this difference is 4 x 4. Change the viewBox attribute accordingly, and add our actual width and height.

    viewBox="4 4 40 40"

+ Our opening svg tag should now reflect these changes.

    <svg xmlns="http://www.w3.org/2000/svg" width="40" 
    height="40" viewBox="4 4 40 40">

+ If the padding around your svg has different amounts for the top / bottom and right / left, this is not a problem. Simply follow the standard instructions above, then play around with the first 2 values of the viewBox property to gain an understanding of how those values shift the image along the x and y axes.

I just learned all this tonight while dealing with the same issue. Entirely open to suggestions / edits from anyone more knowledgeable on manipulating scalable vector graphics than I

This is a nice way of determining the crop values for the svg! but its labor intensive if you have a lot of them this will be to much work. — Persijn, Apr 25 '19 at 18:05

score 17 · Answer 3 · edited Aug 28 '21 at 17:18

You can do exactly what you want with fragment identifiers. Fragment identifiers allow you to define the segment of an SVG that you wish to display in an img tag as well as allowing for control of image transforms and aspect ratio.

Adding #svgView(viewBox(0, 0, 32, 32)) to the end of your svg url defines the area in the svg that you want to display. The first 2 parameters are the x and y coordinates of the top left corner of your viewbox and the second 2 parameters are the width and height of your viewbox.

Using this technique your img tags will look something like this:

    <img src="circos-table-image-medium.svg#svgView(viewBox(0, 0, 32, 32))" height="3500" width="3500" />

It's important to ensure that the aspect ratio of the viewbox matches the aspect ratio of the img tag, if not your viewbox will not be correctly sized/aligned. If you need further control of aspect ratio you can always use the preserveAspectRatioSpec fragment identifier.

In order to find the viewBox for the entire image visit the svg url directly and inspect the page elements to find the viewBox defined on the outermost svg element.

Armed with that information you can now tailor your viewbox to your needs.

CodePen Example Here

This is perfect! I'd never heard of fragment identifiers before, but apparently they have good browser support. I was able to use this technique to crop an SVG without having to edit the original file. — Chris B, Apr 10 '19 at 20:56

score 4 · Answer 4 · answered Nov 04 '17 at 04:37

4

Just use Inkscape.

I do first recommend reading David Rebd's post about adjusting the dimensions of the SVG image via a text editor (such as Notepad++).

Then in Inkscape simply click on the item and you can literally just set the dimensions without even having to worry about precision mouse dragging.

If the toolbar is missing click on the View menu, then Show/Hide and enable the Tools Control Bar.

answered Nov 04 '17 at 04:37

John

1
13
98
177

Edit by dawg: if you want your SVG container to have the same dimensions as its content, follow the steps as above, then click on "File" -> "Document Properties" and enter the same dimensions as you used above. – ledawg Sep 02 '20 at 17:06
By modifying X, Y, W, H, it works like resizing image, not cropping. – Wasit Shafi Jul 27 '21 at 14:35
@WasitShafi This allows you to move or resize OUT to the borders of the image which is *effectively* cropping. – John Aug 28 '21 at 17:18

score 4 · Answer 5 · answered Feb 06 '21 at 00:59

4

You can do this with one click at https://svgcrop.com

answered Feb 06 '21 at 00:59

user3521314

464
6
14

Ferroao · Answer 6 · 2020-11-27T21:07:01.117

To crop any format in inkscape, based on https://designbundles.net/design-school/how-to-crop-an-image-in-inkscape#

Select the image/object (all) with arrow tool, Left click;
Go to menu "object", "Ungroup" (this step is not necessary for photos)
"Select the rectangle tool (or any shape tool you would like to use) Draw a shape over your image where you would like to crop."
With arrow tool, select all objects, as they may be ungrouped drag Left click over all area (otherwise, use shift + Left click)
Over the new shape (crop area step 2) Right click and select 'Set Clip'
In menu "Edit" use "Resize page to selection"

score 1 · Answer 7 · answered Jun 02 '16 at 10:44

Before attempting to fix with code, you may want to attempt to optimise your SVGs layout. The white space visible in Inspector alludes to the fact that the SVG isn't tightly set to the artboard. If you have Adobe Illustrator available open your SVG in that. You should see something similar to this:

The white area is your artboard, the circle your SVG. What you want to do is ensure your SVG is the same size as the artboard. This button allows you to resize your artboard:

Select that, select your white square, bring the edges to touch your circle and save your SVG.

The other potential fix to your actual SVG file may be that there is a clipping mask that extends the size of the SVG graphic. In which case you'll need to remove these masks where possible. To tell if there is a clipping mask affecting your SVG click your circle. If the surrounding box doesn't touch the edges of your circle when selected you have a clipping mask which is pushing your image boundaries out.

Looking at your image, this could potentially be quite complicated and if you aren't too familiar with vector editing it might be faster and easier to pass it back to a designer.

Nice, inkscape also has this feature. File -> documentProperties -> Resize -> Resize page to drawing or selection — Persijn, Jun 02 '16 at 10:58
@elmarko: I need to to this automatically not handcrafted. In actuality the image will be created on the fly in a web application. — neversaint, Jun 02 '16 at 11:30

How to crop SVG file within HTML/CSS

7 Answers7

Crop

BUT THIS IS AN SVG!

Step by Step: Remove "padding" (surrounding white space) directly within SVG code

Confused? Simple Step by Step Example