Wśród znajomych nie spotkałem się z tym ale tak właśnie czytam
Dlaczego miałbym się przekonać aby korzystać z grafik, ikon czy też z loga SVG ??
przecież różnica w wielkości pliku dobrze skompresowanego w png jest praktycznie żadna tak więc jakie są tego korzyści ???
Możesz skalować ile chcesz bez utraty jakości i bez przyrostku pliku.
SVG to wektor czyli możesz zmieniać rozmiar bez straty jakości.
Spóźniłem się.
Odpada też cyrkowanie przy gęstych ekranach. Przykładowo - ikonka 50x50 pikseli, przy zwykłym ekranie komputera FHD (brak skalowania = 1x) wygląda prawidłowo, jeden piksel ikony to jeden piksel na ekranie. Wszystko jest ostre i wyraźne.
Ale jak tylko weźmiemy gęstsze ekrany, np. takie w laptopach 4K albo telefonach które mają FHD i więcej, to już się okaże, że przeglądarka włączy skalowanie. Teraz nasza ikona zajmie przestrzeń 100x100 pikseli ekranu. W rezultacie zostanie rozciągnięta i może wyglądać nieostro. Można temu zaradzić serwując wysoko rozdzielcze ikony wszystkim lub wybranym (media queries w css) czyli od razu takie 100x100 px, które dla użytkowników bez skalowania zostaną zeskalowane w dół do 50x50 px co jest dużo łatwiejszym i dającym lepsze rezultaty procesem (chociaż też nie zawsze).
Alternatywą jest właśnie SVG w którym absolutnie nie obchodzi Cię czy jest skalowanie 2x czy 4x czy 1x czy ktoś ma powiększone grafiki bo ma kłopoty ze wzrokiem - zawsze obrazek będzie ostry.
czy mogę przerobić już zrobiony plik graficzny na przykład w gimpie na svg i uzyskać dokładnie to samo ??
tnz optymalna jakość i wielkość pliku ?
Nie, nie da się tego tak prosto zrobić. W ogóle gimp nie nadaje się za bardzo do grafiki wektorowej (z tego co mi wiadomo, mogę się mylić bo programu nie lubię i jest mi obcy).
Zgadza się - to jest program do grafiki rastowej. 
Ale można w Inkscape.
Nie do końca - bo jak wrzucisz grafikę rastową, to będzie ona powiększana i pomniejszana tak, jak przy pomocy każdego innego programu graficznego i będzie traciła jakość. Żeby to miało sens, to grafika musi być wykonana wektorowo.
Ponadto SVG przy prostym logo można załadować w kodzie, przez co odpada problem asynchroniczności i wszystko w Google Page Speed wygląda elegancko
czyli zwyczajnie najlepiej okiełznać inkscape i tyle. Nie ma co kombinować
Adobe Illustrator potrafi zrobić Ci z loga wektory, był też osobny program do tego ale nie pamiętam nazwy img to svg pewnie.
jeżeli szukasz ikonek to na flaticon masz ich całkiem sporo
Owszem potrafi, ale to najczęściej tylko pierwszy etap konwersji, nie można na tym bazować w 100% bo może dochodzić do sytuacji, że w ten sposób wygenerowany plik svg będzie bardzo dużych rozmiarów. Dlatego znajomość AI jak i umiejętność pracy z grafiką wektorową i umiejętność jej tworzenia nadal będzie potrzebna.
SVG ma sporo wad, zwłaszcza w przypadku ikonek. Z SVG nie da się zrobić optymalizacji w postaci CSS Sprite, więc może się okazać, że efekt będzie całkiem odwrotny od zamierzonego.
Jeśli już trzeba dodać wiele ikonek na stronę to trzeba zrobić z nich fonta i użyć go do ich wyświetlenia. Można też skorzystać z gotowych rozwiązań jak Font Awesome, bo aby zrobić font z ikon svg znów trzeba umieć robić fonty i mieć podstawowe pojęcie o typografii choćby po to by ikonki się nie rozjeżdżały i były intuicyjne w użyciu.
ja piernicze , to ja już nic z tego nie wiem
Nie ma rozwiązania idealnego, trzeba zastosować optymalne rozwiązanie dla danego problemu/sytuacji.
Nie da się nauczyć jednej rzeczy i robić ją do końca życia, niestety w IT tak nie jest. Trzeba się uczyć i rozwijać cały czas. Optymalizacja stron WWW jest tak obszernym tematem, że starczyłoby tematów na kilka książek.
Dużo zależy też z jakich grafik składa się layout i jakiego są one typu. Warto też już na etapie projektu myśleć o optymalizacji strony, np. właśnie przez używanie font awesome jako wszelkiej maści ikonek zamiast robienia własnych. Raz ułatwia to proces projektowania strony, a dwa pozytywnie wpływa na jej rozmiar i możliwości skalowania.
a znasz jakieś miejsce gdzie w jednym miejscu jest to okreslone lub porównianie co dzisiaj aktualnie ma zastosowanie w danych przypadkach ?
https://caniuse.com/
Masz dokładne informacje co wspierają dane przeglądarki, tylko nie wiem jaki to ma związek z SVG vs grafika rastrowa na stronach.
bardziej miałem na myśli jakieś porówniania itp.
Na przykład dajmy na to jaka będzie różnica szybkości w % w czasie wczytywania witryny w zależności od tego czy logo na stronie będzie w pliku png czy też svg i analogicznie jeśli będzie 20 ikonek na stronie głównej w svg oraz w png.
Czy będą to jakieś zasadnicze różnice czy raczej znikome że może nie warto sobie zawracać tym głowy ??
W tym przypadku mając logo + 20 ikonek będzie to wyglądało tak:
SVG - do pobrania 21 małych plików, czyli 21 żądań HTTP do serwera (nawet w przypadku HTTP/2 gdzie można pobrać to w ramach jednej sesji wygeneruje to w uproszczeniu 21 opóźnień)
PNG/JPEG - w przypadku braku optymalizacji, wyjdzie tak samo jak w SVG, tylko rozmiar plików może być nieco większy niż SVG - zależy od rozmiaru grafik i ich złożoności. Ikony zazwyczaj są prostymi obiektami SVG więc mało prawdopodobne by SVG ważyło więcej.
PNG z optymalizacją CSS Sprite - masz jeden duży plik, więc masz tylko 1 żądanie czyli mniej opóźnień w przypadku pobierania tych grafik. Plik będzie cięższy niż sumaryczny rozmiar dla pojedynczych plików PNG/JPEG. Jednak czas zaoszczędzony na komunikacji z serwerem będzie większy niż potrzebny na pobranie większego pliku. Dodatkowo można przygotować Sprite w różnych rozdzielczościach i za pomocą media queries pobrać odpowiedni dla danego urządzenia.
Można to sprowadzić do uproszczonej zasady: duża ilość małych plików (np. 21 plików po ~200KB) - tym dłuższe ładowanie, mała ilość, ale plików o większych rozmiarach (np. 3 pliki po 1,4MB) - szybsze ładowanie strony.
Zasada będzie traciła sens gdy pliki będą miały 2MB i więcej.
Dużo jednak zależy od targetu pod jaki tworzysz stronę - czy to są urządzenia mobilne czy nie; jakimi prędkościami internetu dysponuje grupa docelowa odbiorców; jakie wersje przeglądarek używa grupa docelowych odbiorców; jaka jest konfiguracja serwera; itd. itd…
Pozornie prosta sprawa wymaga niestety sporej wiedzy i doświadczenia w podjęciu dobrej decyzji. Nie ma jednego dobrego i uniwersalnego rozwiązania, każdy projekt jest inny i wymaga innych rozwiązań. Nie spotkałem się z takimi porównaniami/statystykami bo zazwyczaj są one mało użyteczne. Jest zbyt wiele zmiennych które trzeba uwzględnić w danym przypadku, a takie testy nie wykażą nic ponad to co Ci napisałem.
Ogólnie pozornie prosta czynność jak cięcie layoutu wymaga sporej wprawy, wiedzy i doświadczenia. Bo jeśli masz pattern w tle, który musi być w formie grafiki, ponieważ nie da się go zrobić przy pomocy CSS3. Jego najmniejszy powtarzalny fragment ma rozmiar 4x4px, pozornie wydawałoby się więc najoptymalniej byłoby zapisać go jako grafikę png/jpg o wymiarach 4x4px - niestety tak nie jest i jest to najgorsze rozwiązanie.
a tak próbując to zreasumować.
Kupują gotowe ikony svg.
Czy wówczas wrzucam taką jedną ikonę na stronie i ona automatycznie się skaluje czy też muszę ustawić do tej ikony odpowiedni kod na stronie lub też napisać to w css-ie ?
Bo z tego co rozumiem to jest główny atut svg (prócz wątpliwej optymalizacji). Wrzucam ikonę i w zależności od rozdzielczości ekranu wygląda ona proprocjonalnie i nie zaburza innych elementów ?
Zależy od tego jak ikony są przygotowane, możliwe, że wiele ikon jest w jednym pliku, w tedy musisz zapisać każdą w osobnym. Ale i to zależy od tego jak chcesz je osadzać na stronie. Jeśli do tej pory nie używałeś CSS Sprite to możesz osadzić je każda w osobnym pliku i jeśli chodzi o szybkość ładowania strony to będzie praktycznie identyczna jak w przypadku grafik png/jpg, z tą różnicą, że svg będzie się skalowało.
Tak tylko grafika svg w pewnym sensie nie ma swojego domyślnego wymiaru (wysokość, szerokość) i musisz je ustalić w momencie osadzania ikony. Problem ten nie występuje w przypadku ikon png/jpg bo jak ma mieć ona rozmiar 40x40px i w takim rozmiarze zapiszesz grafikę, a następnie wrzucisz ją na stronę to będzie wyświetlana w rozmiarze 40x40px.
Z svg to nie jest takie oczywiste, ale mimo wszystko dalej jest to możliwe do zrobienia.
Przecież możesz zrobić SVG sprites https://css-tricks.com/svg-sprites-use-better-icon-fonts/ oczywiście to tylko przykład. Chodzi o sam fakt że buduje się już sprite dla SVG