CODEWITHSUNDEEP
csssvg
Seb D
Seb D

Reputation: 139

Svg adds padding on resize bug -SVG/CSS

If I use a SVG and I resize it using CSS, I get a weird effect. If I change the width, the image will take up a lot of blank space vertically. If it I change the height, the image will take a lot of blank space horizontally. How can I fix that? 

#item{
  width: calc(30px + 3vw);
  background-color: red;
}
<svg id="item"
   width="100mm"
   height="100mm"
   viewBox="0 0 100 99.999997"
   version="1.1">
  <defs
     id="defs2" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     showgrid="false"/>
  <metadata
     id="metadata5">
    <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></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-197)">
    <rect
       style="opacity:1;fill:#ff6600;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.56531394;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="rect4485"
       width="100"
       height="100"
       x="0"
       y="197" />
  </g>
</svg>

Note: I made the image using inkscape and got rid of the useless XML.

Upvotes: 1

Views: 762

Answers (1)

Jakub Muda
Jakub Muda

Reputation: 6694

Resizing svg is different than regular image in jpg or png. In svg if you remove dimensions (in your case width/height set to 100mm) your svg will adapt to container width easily and generally will be scalable.

Try with this svg and you should be able to resize it with no problems using only width or height.

By the way, I minified the code and removed all unnecessary tags to focus only on relevant code. If you inline this svg into html you can also remove xmlns.

svg{width:110px} /*your custom dimensions here*/
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect style="fill:#ff6600;stroke:red;stroke-width:0.565;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0" width="100" height="100"/>
</svg>

I set a stroke color to red so you can see it. If you don't need a stroke just remove all elements with "stroke".

Upvotes: 1

Related Questions