Dlaczego ikonki svg mają większy rozmiar na IOS niż na androidzie

pytanie zadane 20 listopada w HTML i CSS przez Beginner555 Obywatel (1,730 p.)

Cześć,

Zrobiłem stronę internetową, mam ikonki svg, które powinny mieć stały rozmiar na wszystkich rozdzielczościach. Jak testuję stronę na androidzie to jest w porządku, ale jak jestem na IOS to może na początku od razu po wejściu na stronę jest ok, ale jak po przełączam się między podstronami na przykład, to moje ikonki zaczynają być strasznie duże. Jak rozwiązać ten problem aby strona na IOS również wyświetlała poprawnie ikonki? Załączam przykład jak wygląda jedna z moich ikonek svg.

                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
                            <path id="ic20-chart-bar" d="M41,2a9,9,0,0,1,9,9V41a9,9,0,0,1-9,9H11a9,9,0,0,1-9-9V11a9,9,0,0,1,9-9ZM26,14a3,3,0,0,0-2.98,2.65L23,17V35a3,3,0,0,0,5.98.35L29,35V17A3,3,0,0,0,26,14Zm12,6a3,3,0,0,0-2.98,2.65L35,23V35a3,3,0,0,0,5.98.35L41,35V23A3,3,0,0,0,38,20ZM14,26a3,3,0,0,0-2.98,2.65L11,29v6a3,3,0,0,0,5.98.35L17,35V29A3,3,0,0,0,14,26Z" transform="translate(-2 -2)" fill="#1D1F21" fill-rule="evenodd"/>
                        </svg>

komentarz 20 listopada przez Comandeer Guru (596,500 p.)

A możesz pokazać całą stronę?

komentarz 20 listopada przez Beginner555 Obywatel (1,730 p.)

Mogę wysłać tylko z androida to wygląda tak kafelek z ikonką, czyli dobrze mniej więcej. A na IOS ta żółta ikonka staje się wielka na cały kafelek robiąc za tło dla tekstu poniżej.

komentarz 20 listopada przez Comandeer Guru (596,500 p.)

W sensie online. Bo sam kod jednej ikonki nie pozwala rozwiązać problemu. Sam mówisz, że dzieje się dopiero przy przechodzeniu na podstrony.

1 odpowiedź

odpowiedź 20 listopada przez VBService Ekspert (246,070 p.)

Próbowałeś użyć atrybutu preserveAspectRatio

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"
     preserveAspectRatio="xMinYMin meet">
    <path id="ic20-chart-bar" d="M41,2a9,9,0,0,1,9,9V41a9,9,0,0,1-9,9H11a9,9,0,0,1-9-9V11a9,9,0,0,1,9-9ZM26,14a3,3,0,0,0-2.98,2.65L23,17V35a3,3,0,0,0,5.98.35L29,35V17A3,3,0,0,0,26,14Zm12,6a3,3,0,0,0-2.98,2.65L35,23V35a3,3,0,0,0,5.98.35L41,35V23A3,3,0,0,0,38,20ZM14,26a3,3,0,0,0-2.98,2.65L11,29v6a3,3,0,0,0,5.98.35L17,35V29A3,3,0,0,0,14,26Z" transform="translate(-2 -2)" fill="#1D1F21" fill-rule="evenodd"/>
</svg>

lub ustawić kontener na ikonkę

<style>
    .icon-container {
       width: 48px;
       height: 48px;
    }
</style>

<div class="icon-container">
    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
        <path id="ic20-chart-bar" d="M41,2a9,9,0,0,1,9,9V41a9,9,0,0,1-9,9H11a9,9,0,0,1-9-9V11a9,9,0,0,1,9-9ZM26,14a3,3,0,0,0-2.98,2.65L23,17V35a3,3,0,0,0,5.98.35L29,35V17A3,3,0,0,0,26,14Zm12,6a3,3,0,0,0-2.98,2.65L35,23V35a3,3,0,0,0,5.98.35L41,35V23A3,3,0,0,0,38,20ZM14,26a3,3,0,0,0-2.98,2.65L11,29v6a3,3,0,0,0,5.98.35L17,35V29A3,3,0,0,0,14,26Z" transform="translate(-2 -2)" fill="#1D1F21" fill-rule="evenodd"/>
    </svg>
</div>