масштаб svg для определенной ширины и высоты

Question

Я пытаюсь отобразить файл .svg на 26*28, но он отображает div для этого 26*28, но не масштабирует значок до определенного размера. Я пробовал использовать атрибуты preseverveaspectratio = none, viewbox и width/height, но это не решает мою проблему.

.svg код:

<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; 
} 

Тонкий

.calendar-icon 

Answer 1

Ваш viewBox просто слишком большой, в результате чего у вас будет много места внизу и справа от вашего окна просмотра.

viewBox="0 0 70 70" 

довольно близко, хотя вам, возможно, придется экспериментировать дальше.

Answer 2

это может быть аа быстро исправить, хотя вы можете либо сохранить ГСВ в этом размер 26px 28px или попробовать

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