Optymalizacja svg

0

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.

1

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.

1

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

0
<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"

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0