How to crop SVG file within HTML/CSS
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
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