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

Question

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>

 

Comments

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

---

 

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.

---

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

Answer 1

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>