Нужно убрать svg с текста, чтобы был сзади и не вылазил за края блока, не изменяя размеры, типа обрезался страничка с кодом на codepen
html{
padding:10px;
color:#2d2d2d
}
.svg_pu{
position: absolute;
right: 0px;
bottom: 0px;
top: 0;
fill: #DEE0ED;
transform: rotate(20deg);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<svg>
<symbol id="image" viewBox="0 0 16 16">
<path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
<path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z"/>
</symbol>
</svg>
<div class="row mt-3">
<div class="col-sm-2">
<div class="card">
<div class="card-body pb-2">
<h6 class="card-title">Картинки</h6><h6>123456789101112131415161718</h6>
<svg class="bi svg_pu" width="90" height="90"><use xlink:href="#image"/></svg>
</div>
</div>
</div>
</div>
.card h6 {position: relative;z-index: 5;} .card-body {position: relative;overflow: hidden;}