W projekcie graficznym strony mam ikonki, które się powtarzają (facebook x2, instagram x2, phone x3).
Przy ikonce, która występuje tylko raz na srtonie to pewnie najlepiej ogarnąć ją inline SVG?
A co z tymi, które się powtarzają? Może lepiej byłoby się odnieść do takiego phone za pomocą img? pobieramy z serwera tylko raz, a pozostałe zostaną wczytane z pamięci.
Chciałbym też żebyście napisali jak sobie radzicie z svg w swoich projektach.
Wydaje mi się, że jest dużo więcej krytycznych miejsc gdzie trzeba zająć się optymalizacją a nie dosłownie 3-4 ikonami... Zrób sobie customowego fonta i już albo daj po prostu wszędzie inline.
Jeśli ci bardzo zależy na optymalizacji, obczaj temat:Image Sprites
https://www.w3schools.com/css/css_image_sprites.asp
Zwróć też uwagę, że (przynajmniej część) edytorów SVG straszliwie śmieci w kodzie, produkując pliki kilkukrotnie większe niż faktycznie potrzeba.
Ale co do ogółu zgadzam się z @sieedukuje
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="test" viewBox="0 0 384 384" width="20" height="20">
<path d="M353.188 252.052c-23.51 0-46.594-3.677-68.469-10.906-10.719-3.656-23.896-.302-30.438 6.417l-43.177 32.594c-50.073-26.729-80.917-57.563-107.281-107.26l31.635-42.052c8.219-8.208 11.167-20.198 7.635-31.448-7.26-21.99-10.948-45.063-10.948-68.583C132.146 13.823 118.323 0 101.333 0h-70.52C13.823 0 0 13.823 0 30.813 0 225.563 158.438 384 353.188 384c16.99 0 30.813-13.823 30.813-30.813v-70.323c-.001-16.989-13.824-30.812-30.813-30.812z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#000"/>
</symbol>
</svg>
^ umieściłem tego svg na koniec body. Chciałem się do niego odwołać w kilku miejscach za pomocą:
<svg><use href="#test></use></svg>
Wszystko działa tylko, że svg ma romiar 300x150px. Dlaczego? skoro jest w kodzie width="20" height="20"