Why does this SVG element have so much whitespace?

All we need is an easy explanation of the problem, so here it is.

Here‘s a crowbar.

I have downloaded the SVG version of it, and have attempted to rotate it so it is more horizontal (for use as a text banner) — but apparently the highlight (the brighter red on the darker red bar) has a large amount of whitespace surrounding it in the SVG element. This means that even when "laid flat", the image remains largely square.

I have installed Inkscape, but can’t figure out what that element "is" and how to modify it. Help?

For now, I have adjusted the image to have huge negative margins, but I’d still like to understand what’s going on.

Edit: Tried to link to image, can’t display SVG’s, so here’s a link to the image (yes, the license says I can copy and share it).

Edit 2: Here is the SVG code for just the highlight element of the crowbar:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   viewBox="0 0 629.63403 163.85557"
   id="svg45"
   sodipodi:docname="crowbar-flat2.svg"
   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
   width="166.59067mm"
   height="43.353386mm">
  <title
     id="title154">Crowbar</title>
  <metadata
     id="metadata49">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title>Crowbar</dc:title>
        <cc:license
           rdf:resource="https://pixabay.com/service/license/" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="640"
     inkscape:window-height="480"
     id="namedview47"
     showgrid="false"
     inkscape:current-layer="svg45"
     units="mm"
     fit-margin-top="-68"
     fit-margin-left="0.1"
     fit-margin-right="-13.6"
     fit-margin-bottom="-70.6"
     inkscape:pagecheckerboard="true"
     borderlayer="false"
     showborder="true"
     inkscape:showpageshadow="true" />
  <defs
     id="defs35">
    <filter
       id="f"
       style="color-interpolation-filters:sRGB">
      <feGaussianBlur
         stdDeviation="0.51902533"
         id="feGaussianBlur2" />
    </filter>
    <linearGradient
       id="g"
       x1="77.831001"
       x2="52.800999"
       y1="118.62"
       y2="83.089996"
       gradientTransform="matrix(-2.4934374,2.9715629,2.9715629,2.4934374,307.17626,-370.44507)"
       gradientUnits="userSpaceOnUse">
      <stop
         stop-color="#4d4d4d"
         offset="0"
         id="stop5" />
      <stop
         stop-color="#999"
         offset=".30233"
         id="stop7" />
      <stop
         stop-color="#681c1a"
         offset=".42565"
         id="stop9" />
      <stop
         stop-color="#681c1a"
         offset=".96563"
         id="stop11" />
      <stop
         stop-color="#250a09"
         offset="1"
         id="stop13" />
    </linearGradient>
    <linearGradient
       id="h"
       x1="18.610001"
       x2="147.38"
       y1="79.934998"
       y2="79.934998"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(-2.4934374,2.9715629,2.9715629,2.4934374,308.4654,-347.84218)">
      <stop
         stop-color="#b0b0b0"
         offset="0"
         id="stop16" />
      <stop
         stop-color="#b0b0b0"
         stop-opacity="0"
         offset="1"
         id="stop18" />
    </linearGradient>
    <linearGradient
       id="i"
       x1="20.488001"
       x2="136.14999"
       y1="119.46"
       y2="32.432999"
       gradientUnits="userSpaceOnUse">
      <stop
         stop-color="#681c1a"
         stop-opacity="0"
         offset="0"
         id="stop21" />
      <stop
         stop-color="#be3a35"
         offset=".07894"
         id="stop23" />
      <stop
         stop-color="#be3a35"
         offset=".9116"
         id="stop25" />
      <stop
         stop-color="#922d29"
         stop-opacity="0"
         offset="1"
         id="stop27" />
    </linearGradient>
    <linearGradient
       id="j"
       x1="32.094002"
       x2="38.695999"
       y1="129.02"
       y2="135.39999"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(-2.4934374,2.9715629,2.9715629,2.4934374,308.4654,-343.84218)">
      <stop
         stop-color="#b0b0b0"
         offset="0"
         id="stop30" />
      <stop
         stop-color="#7f7f7f"
         offset="1"
         id="stop32" />
    </linearGradient>
  </defs>
  <path
     inkscape:connector-curvature="0"
     id="path39"
     style="color:#000000;text-indent:0;text-transform:none;fill:url(#i);filter:url(#f)"
     d="M 135.44,31.562 39.252,105.25 c -0.62684,0.48038 -1.9054,0.92276 -2.9688,1.0625 -9.7988,1.2876 -14.403,4.0041 -15.812,7.2812 -0.70479,1.6386 -0.56102,3.37 0.09375,5.0312 0.65477,1.6612 2.3468,3.2218 3.7491,4.6433 l 0.5,-0.5 c -1.3528,-1.3713 -2.9885,-2.8599 -3.5928,-4.3933 -0.6043,-1.5334 -0.71226,-3.062 -0.09375,-4.5 1.237,-2.876 5.5536,-5.5695 15.25,-6.8438 1.1695,-0.15368 2.52,-0.55622 3.3438,-1.1875 l 96.188,-73.719 z"
     transform="matrix(-2.4934374,2.9715629,2.9715629,2.4934374,308.4654,-343.84218)" />
  <path
     inkscape:connector-curvature="0"
     id="path41"
     style="color:#000000;text-indent:0;text-transform:none;fill:url(#j);stroke-width:3.87909985"
     d="m 609.37551,73.382045 c 0.66193,-0.80092 1.6042,-1.19934 2.54999,-1.34167 0.9458,-0.14233 1.96976,0.02977 2.80721,0.614843 0.83745,0.585074 1.40262,1.553786 1.52739,2.70583 l 3.72243,39.435022 -2.90518,-1.26142 c -0.27989,-0.12147 -0.3397,-0.34124 -0.36223,-0.57962 l -3.52899,-37.324658 c -0.041,-0.37897 -0.0997,-0.41643 -0.21561,-0.497403 -0.11584,-0.081 -0.29616,-0.160605 -0.52728,-0.125957 -0.46194,0.06955 -1.04117,0.244649 -0.99817,1.377854 l 1.80328,34.830434 c 0.0102,0.19721 -0.11957,0.50398 -0.47738,0.35287 l -2.59567,-1.09609 -1.81944,-33.989224 c -0.0469,-1.230834 0.35758,-2.299713 1.01939,-3.100733 z" />
</svg>

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

The extra space is the extent of the gaussian blur filter that has been added to the highlight in the middle of the crowbar.

To be honest, you can just ignore this. It shouldn’t stop you from just rotating the image slightly. Alternatively, if you don’t want that gaussian blur filter, select the object, and just delete the filter.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply