CODEWITHSUNDEEP
svg
no_lyf_programmer
no_lyf_programmer

Reputation: 595

scale svg to specific width and height

enter image description hereI'm trying to display an .svg file to 26*28 but it is showing div to that 26*28 but not scaling the icon to specific size. I tried using preseverveaspectratio = none , viewbox and width/height attributes but it doesn't solve my problem.

.svg code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" ><defs><style>.a{fill:#aeddd6;}.b{fill:none;stroke:#0d0d0d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5px;}.c{fill:#0d0d0d;}</style></defs><title>calendar</title><path class="a" d="M12.2 13.5V31H73.4V13.5H62.4s0.9 10.2-5 9.4c0 0-5.8-5.6-9.8H33.2v5.9s-1.4 4.2-5 3.9c0 0-6.2 1.2-5-9.8Z" transform="translate(-10.90282 -4.52324)"/><polyline class="b" points="51.5 8.6 62.5 8.6 62.5 67.9 1.3 67.9 1.3 8.6 12.2 8.6"/><line class="b" x1="22.3" y1="8.6" x2="41.4" y2="8.6"/><line class="b" x1="1.3" y1="26.4" x2="62.5" y2="26.4"/><circle class="c" cx="14.8" cy="40.6" r="3.1"/><circle class="c" cx="25.9" cy="40.6" r="3.1"/><circle class="c" cx="37" cy="40.6" r="3.1"/><circle class="c" cx="48.2" cy="40.6" r="3.1"/><circle class="c" cx="14.8" cy="53.1" r="3.1"/><circle class="c" cx="25.9" cy="53.1" r="3.1"/><circle class="c" cx="37" cy="53.1" r="3.1"/><circle class="c" cx="48.2" cy="53.1" r="3.1"/><rect class="b" x="12.6" y="1.3" width="9" height="16.8" rx="3.2" ry="3.2"/><rect class="b" x="42" y="1.3" width="9" height="16.8" rx="3.2" ry="3.2"/></svg>

SCSS

.calendar-icon{
  background-image: image-url('calendar.svg');
  width: 26px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: contain;
}

Slim

.calendar-icon

Upvotes: 0

Views: 550

Answers (2)

Robert Longson
Robert Longson

Reputation: 124299

Your viewBox is simply too big, resulting in lots of space to the bottom and right of your viewport.

viewBox="0 0 70 70"

is pretty close, though you might have to experiment further.

Upvotes: 1

Fabian
Fabian

Reputation: 25

this may be a a quick fix although you can either save the svg in that size 26px 28px or try

.calendar-icon{
  background-image: image-url('calendar.svg');
  width: 26px !important;
  height: 28px !important;
  background-repeat: no-repeat;
  background-size: contain;
}

Upvotes: 0

Related Questions