[HTML][CSS]Czy da się te efekty przenieść na css? Czy tylko jako png? Opcje

[szczrzcz]

Mam plik psd photoshopa z projektem stronki. I jest tu fragment (poniżej w linku), który nie wiem jak przenieść w świat html/css. Jak sobie poradzić np z tymi falami? Stronka ma być responsywna i zastanawiam się czy wyeksportować cały ten fragment i z falami i wewnętrznymi ikonkami i ze wszystkim co widać na obrazku jako jeden png czy oddzielne png z górną i dolną falą i osobne png dla każdej ikonki i to wszystko powsadzać w divy. Bo w sumie jaką korzyść mam z tego że rozdzielę ten cały obrazek na 10 oddzielnych png zamiast jeden png ze wszystkim?

Proszę o wskazówki jak poprawnie to zrobić.

http://i67.tinypic.com/o5s0ol.png

[trueblue]

Korzyść masz taką, że ikonki możesz poukładać inaczej na każdej szerokości. Chyba, że satysfakcjonuje Cię wciśnięcie ich w ekran o szerokości 360px.
Fale możesz zrobić w SVG.

[szczrzcz]

Możesz słówko o tym svg? Czy mam sam wyprodukować svg na wzór obrazka czy istenie możliwość eksportu do svg tego fragmentu z tego pliku psd?

Ten post edytował szczrzcz 11.04.2019, 20:58:40

[trueblue]

W większości programów wektorowych jest możliwość trasowania bitmapy do wektorów, ewentualnie możesz sam odrysować.
Potem zapisać jako SVG.

[szczrzcz]

Zrobiłem. Wyeksportowałem z photoshopa górną i dolną falę do svg. Długo się męczyłem z odpowiednim ustawieniem atrybutów svg (viewbox i inne). I zastanawiam się po wszystkich czy było warto, czy jest jakaś korzyść z tego, że te fale (górna i dolna) mam w svg a nie png. Zakładając, że nie będę nigdy zmieniać kolorów to w skalowaniu chyba nie ma żadnych korzyści, tak?

[trueblue]

Zalety masz takie, że przy dodatkowej optymalizacji pliku SVG osiągniesz mniejszy rozmiar niż PNG, jeśli już nie osiągnąłeś.
A jeszcze większą zaletą jest jakoś grafiki.

Ale może faktycznie dla Ciebie lepiej będzie nie wdawać się w SVG.

[szczrzcz]

a, zapomniałem o istnieniu wektorowych i rastrowych formatach. No dobrze, czyli jakość, wiec warto było.