Praktyczny przewodnik dla SVG dla początkujących
Chociaż format nie jest szczególnie nowy, obrazy SVG są coraz bardziej popularne w projektowaniu stron internetowych. Wszystkie główne przeglądarki obsługują ten format, a SVG zmienia sposób myślenia i renderowania obrazów w Internecie.
Dlaczego są tak popularne? A czym dokładnie różni się plik SVG? Dzisiaj mamy odpowiedzi i wszystko, co musisz wiedzieć, aby zacząć korzystać z tego typu plików. (Jako mały bonus, wszystkie obrazy w tym poście są dostępne w formacie SVG z Creative Market.)
Poznaj elementy Envato
Co to jest SVG?
Skalowalna grafika wektorowa (SVG) to wektorowy format graficzny opracowany z myślą o Internecie. (Więcej informacji o formatach wektorowych i rastrowych można znaleźć w poprzednim artykule Design Shack).
Popularność formatu wzrosła dzięki wyświetlaczom o wysokiej rozdzielczości, w których użytkownicy widzą każdy piksel (jeśli istnieje). Ponieważ SVG jest formatem wektorowym, renderowanie obrazu odbywa się w ten sam sposób - z doskonałą szczegółowością - bez względu na rozmiar.
Język znaczników został po raz pierwszy opracowany przez konsorcjum World Wide Web, które jest bardziej znane jako W3C, w 1999 r. W3C definiuje SVG jako „język znaczników do opisywania dwuwymiarowych aplikacji graficznych i obrazów oraz zestaw powiązanych interfejsów skryptów graficznych . ” Jest obsługiwany przez wszystkie nowoczesne przeglądarki - więc nie musisz się martwić, czy pliki SVG będą renderowane poprawnie, czy nie - i działa niezależnie od typu urządzenia.
Praktyczne zastosowania
Co sprawia, że SVG jest tak popularne i dlaczego korzysta z niego więcej projektantów? Po prostu dlatego, że to działa.
Pliki SVG są małe i skalowalne. Chociaż format ten najlepiej nadaje się do kształtów, ma wiele praktycznych zastosowań. Logo marki, ikony, elementy interfejsu użytkownika i wiele innych elementów projektu mogą pracować w formacie SVG. Największą zaletą jest to, że są wektorami. Obraz SVG może być używany w prawie każdym rozmiarze. (Niektóre najmniejsze pliki mogą być tak duże.)
Plikami SVG można także łatwo manipulować i kontrolować. Plik SVG można nie tylko zapisać jako obraz statyczny, ale można również dodać interaktywność i filtry, aby obraz był jeszcze bardziej zabawny. (Pliki SVG mogą być animowane i kolorowe.)
Oto kilka praktycznych zastosowań dla SVG:
- Logo lub obrazy
- Jako obraz tła
- Jako przedmiot, taki jak przycisk
- Mapowanie
- Wykresy lub rysunki
Zasadniczo SVG najlepiej nadaje się do obrazów, które mogą ewoluować lub zmieniać się w czasie, w zależności od typu urządzenia lub zawierać animację lub inne efekty dynamiczne. Skorzystaj z formatu w przypadku elementów wizualnych, takich jak logo, szkice, kształty, grafika i wykresy lub inne proste obrazy.
Plusy korzystania z SVG
Dlaczego więc miałbyś odejść od sprawdzonego JPG lub GIF do SVG? Istnieje wiele powodów, dla których ten format może być najlepszym zastosowaniem w twoich projektach. (Istnieje również możliwość wykorzystania SVG do drukowania).
- SVG to format wektorowy. Samo to jest ważne, gdy myślimy o responsywnym projekcie, w którym rozmiary obrazu często zmieniają się w zależności od urządzenia. Plik SVG jest na tyle mały, że jeden plik może wykonać całą pracę i nie ma utraty jakości na większych ekranach.
- Obrazy i zachowania SVG są definiowane za pomocą XML, co oznacza, że obrazy można wyszukiwać indeksowane, skryptowane i kompresowane.
- Możesz zrobić prawie wszystko z obrazem SVG, co możesz zrobić z dowolnym innym obrazem, na przykład włączając różnorodne techniki projektowania. Łatwo jest dodawać filtry, tryby mieszania, efekty bur, kolory, przycinanie i maskowanie, upuszczać cienie i prawie każdą inną technikę, którą lubisz.
- Pliki SVG są dostępne.
- SVG działa w oparciu o otwarte standardy sieciowe.
- Możesz utworzyć SVG za pomocą kodu tekstowego lub z narysowanego obrazu. Daje to pewną swobodę, w zależności od potrzeb i poziomu wiedzy w różnych obszarach.
- Rozmiary plików są małe i można je zmniejszyć. Oznacza to, że grafika, która w innym przypadku mogłaby być duża, wydłuża czas ładowania. (Zawsze bonus.)
Wady korzystania z SVG
Prawdopodobnie jesteś sprzedawany na SVG po przeczytaniu wszystkich korzyści, prawda? Ale jest też kilka negatywów do rozważenia.
- Starsze przeglądarki - takie jak Internet Explorer 8 lub starsza - nie obsługują SVG. Prawdopodobnie możesz znaleźć obejście (lub może to nie obchodzić), ale powinieneś wiedzieć, że niektórzy użytkownicy nie widzą twoich zdjęć.
- SVG nie działa w przypadku złożonych obrazów, takich jak zdjęcia. Jest to format przeznaczony tylko dla kształtów i linii.
Co dalej z SVG?
Przyszłość SVG dopiero się zaczyna. Jako przyjęty mobilny format obrazu (i standard) wykorzystanie i rozwój SVG będzie się nadal zwiększać.
Według W3C „SVG 2 jest obecnie w fazie rozwoju i doda nowe funkcje łatwości użytkowania do SVG, a także ściślej integruje się z HTML, CSS i DOM oraz przestarzałe funkcje nieobsługiwane przez wszystkie przeglądarki”.
Inne dodatki są również rzucane. Firmy produkujące sprzęt drukujący szukają sposobów lepszego wykorzystania SVG do procesów drukowania i mają wsparcie liderów branży, takich jak Adobe i Canon. Rozszerza się także wykorzystanie mapowania i GIS, co pozwala na lepsze możliwości mapowania i powiększania.
Kiedy naprawdę zaczynasz o tym myśleć, istnieje prawie nieskończona szansa na użycie i wdrożenie SVG w projektach w Internecie oraz w projektach drukowanych. (To jedna z zalet formatu wektorowego.)
Zasoby SVG
Teraz, gdy jesteś trochę bardziej podekscytowany SVG i widzisz, dlaczego i jak może być przydatny w twoich projektach, mamy listę zasobów, które pomogą Ci zacząć.
- Eksportowanie SVG do Internetu za pomocą Adobe Illustrator
- Osadź SVG bezpośrednio na stronach HTML
- Uruchamianie dzięki serii SVG Video
- Profile SVG
- Sztuczki CSS: Używanie SVG
Wniosek
Czy już używasz SVG do swoich projektów? Jeśli nie, czy jesteś gotowy na zmianę?
Popularność SVG rośnie niemal codziennie, a ponieważ jest to narzędzie typu open source, te zmiany i postępy są odczytywane natychmiast. Nie jesteś powiązany z żadnym dostawcą ani produktem i możesz tworzyć obrazy, które są całkowicie kompatybilne w nowoczesnej sieci.
Zdjęcia Stock Dzięki uprzejmości Kreatywnie rynek .
