Ikony oraz loga SVG - jaki sens?

(jeffrej) #1

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 ???

(Fizyda) #2

Możesz skalować ile chcesz bez utraty jakości i bez przyrostku pliku.

1 Like
(sensu) #3

SVG to wektor czyli możesz zmieniać rozmiar bez straty jakości.

Spóźniłem się.

(hindus) #4

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.

(jeffrej) #6

@Fizyda @sensu

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 ?

(Fizyda) #7

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).

(Dimatheus) #8

Zgadza się - to jest program do grafiki rastowej. :slight_smile: 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.

1 Like
(mkubacki) #9

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 :slight_smile:

(jeffrej) #10

czyli zwyczajnie najlepiej okiełznać inkscape i tyle. Nie ma co kombinować

(p.spaczek) #11

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 :slight_smile:

(Fizyda) #12

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.

(jeffrej) #13

ja piernicze , to ja już nic z tego nie wiem

(Fizyda) #14

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.

1 Like
(jeffrej) #15

a znasz jakieś miejsce gdzie w jednym miejscu jest to okreslone lub porównianie co dzisiaj aktualnie ma zastosowanie w danych przypadkach ?

(Fizyda) #16

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.

1 Like
(jeffrej) #17

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 ??

(Fizyda) #18

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.

2 Likes
(jeffrej) #19

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 ?

(Fizyda) #20

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.

1 Like
(p.spaczek) #21

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 :slight_smile:

1 Like