W miarę budowania strony internetowej i dodawania obrazów do tej witryny, jedną z najważniejszych rzeczy, które musisz określić, jest to, które formaty plików są prawidłowe. W zależności od grafiki jeden format może być znacznie lepszy niż inne.
Wielu projektantów stron internetowych jest zadowolonych z formatu pliku JPG, a format ten jest idealny dla obrazów o głębokiej głębi kolorów, takich jak fotografie. Chociaż ten format działa również w przypadku prostej grafiki, takiej jak ikony ilustrowane, nie jest to najlepszy format do użycia w tej instancji. Dla tych ikon, SVG będzie lepszym wyborem. Przyjrzyjmy się dokładnie, dlaczego:
SVG to technologia wektorowa
Oznacza to, że nie jest to technologia rastrowa. Obrazy wektorowe to połączenie linii utworzonych za pomocą matematyki. Pliki rastrowe wykorzystują piksele lub małe kwadraty koloru. Jest to jeden z powodów, dla których SVG jest skalowalny i idealny dla responsywnych stron internetowych, które muszą być skalowane wraz z rozmiarem ekranu urządzenia. Ponieważ grafika wektorowa istnieje w świecie matematyki, aby zmienić jej rozmiar, wystarczy zmienić cyfry. Pliki rastrowe często wymagają znacznego przeglądu, jeśli chodzi o rozmiary. Gdy chcesz powiększyć obraz wektorowy, nie ma zniekształceń, ponieważ system jest matematyczny, a przeglądarka właśnie przelicza tę matematykę i sprawia, że linie są tak gładkie jak nigdy dotąd. Gdy powiększysz obraz rastrowy, tracisz jakość obrazu, a plik zaczyna tracić ostrość, gdy zaczynasz widzieć te piksele koloru. Matematyka rozszerza się i kurczy, piksele nie. Jeśli chcesz, aby twoje obrazy były niezależne od rozdzielczości, SVG da ci tę zdolność.
SVG jest oparty na tekście
Kiedy używasz edytora graficznego do tworzenia obrazu, program robi zdjęcie ukończonej kompozycji. SVG działa inaczej. Nadal można korzystać z niektórych programów i poczuć się jak na rysunku, ale ostatecznym produktem jest zbiór linii wektorowych, a nawet słów (które w rzeczywistości są tylko wektorami na stronie). Wyszukiwarki przeglądają słowa, w szczególności słowa kluczowe. Jeśli przesyłasz plik JPG, ograniczasz się do tytułu swojej grafiki i być może fraza tekstu alternatywnego. Dzięki kodowaniu SVG poszerzasz możliwości i tworzysz obrazy, które są bardziej przyjazne dla wyszukiwarek.
SVG to XML i działa w innych formatach językowych
To wraca do kodu tekstowego. Możesz zrobić swój podstawowy obraz w SVG i użyć CSS do wypolerowania go. Tak, możesz mieć obraz, który jest w rzeczywistości plikiem SVG, ale możesz również zakodować SVG bezpośrednio na stronie i edytować go w przyszłości. Możesz go zmienić za pomocą CSS w taki sam sposób, jak zmieniłbyś tekst strony itp. Jest to bardzo potężne i ułatwia edycję.
SVG jest łatwo edytowany
Jest to prawdopodobnie największa zaleta. Kiedy robisz zdjęcie kwadratu, właśnie nim jest. Aby dokonać zmiany, musisz zresetować scenę i zrobić nowe zdjęcie. Zanim się zorientujesz, masz 40 obrazów kwadratów i nadal nie masz racji. W przypadku SVG, jeśli popełnisz błąd, zmień współrzędne lub słowo w edytorze tekstu i gotowe. Mogę odnieść się do tego, ponieważ narysowałem okrąg SVG, który nie był ustawiony prawidłowo. Jedyne, co musiałem zrobić, to dostosować współrzędne.
Obrazy JPG mogą być ciężkie
Jeśli chcesz, aby obraz rósł w rozmiarze fizycznym, zwiększy się również rozmiar pliku. W przypadku SVG funt wciąż jest funtem, bez względu na to, jak duże. Kwadrat o szerokości 2 cali waży tyle samo, co kwadrat o szerokości 100 cm. Rozmiar pliku się nie zmienia, co jest znakomite z punktu widzenia wydajności strony!
Więc co jest lepsze?
Jaki jest lepszy format - SVG czy JPG? To zależy od samego obrazu. To jest jak pytanie "co jest lepsze, młotek lub śrubokręt?" To zależy od tego, co musisz osiągnąć! To samo dotyczy tych formatów graficznych. Jeśli chcesz wyświetlić zdjęcie, JPG to najlepszy wybór dla Ciebie. Jeśli dodajesz ikonę, SVG jest prawdopodobnie lepszym wyborem. Możesz dowiedzieć się więcej o tym, kiedy należy użyć plików SVG tutaj.
Oryginalny artykuł Jennifer Krynin. Edytowane przez Jeremy'ego Girarda w dniu 6/6/17
