Jak zacząć z SVG
W ciągu ostatnich kilku miesięcy szum wokół obrazów SVG urósł i urósł. SVG istnieje od lat, ale dopiero niedawno zaczął wyglądać jak prawdziwy rywal.
Hype wokół SVG to nie tylko jakiś modowy trend, SVG całkowicie rozwiązuje problemy, których formatów plików, takich jak JPG, całkowicie nie udaje się rozwiązać.
Jeśli chcesz rozpocząć korzystanie z SVG, ten artykuł jest dla Ciebie. Poprowadzę Cię przez pobranie SVG z Illustratora do HTML, a następnie nauczę cię modyfikować ten obraz za pomocą CSS.
Zanim zaczniemy, spójrzmy demo Połączyłem, to właśnie będziemy budować.
Co to jest SVG?
SVG oznacza Scaleable Vector Graphics, a to pierwsze słowo da ci wskazówkę, dlaczego SVG jest tak popularny. SVG to idealna przeciwwaga dla responsywnego projektu.
Obrazy SVG są w swej istocie formatem grafiki wektorowej opartym na XML dla grafiki 2D.
Specyfikacja SVG to otwarty standard opracowany przez W3C w 1999 r., Więc możesz zobaczyć, że jest to technologia od dekady do połowy życia w kategoriach internetowych.
Dlaczego powinienem używać SVG?
Przepływ pracy i wydajność są zbyt cenne, aby wyrzucić je na kaprys. Jeśli chcesz przejść z JPG lub PNG na SVG, potrzebujesz ważnych powodów, na szczęście SVG zapewnia dużo:
- SVG jest zwykle mniejszy niż bitmapy, takie jak pliki JPG i PNG, co oznacza, że zużywają mniej miejsca na WWW i szybciej je pobierają.
- Obrazy SVG są skalowalne, świetnie wyglądają bez względu na rozmiar, w którym są używane, a to jest świetne dla wyświetlaczy Retina.
- SVG sprawia, że akwizytywny obraz staje się akademicki, zapewniając uniwersalne rozwiązanie dla wszystkich.
- SVG idealnie nadaje się do modnego trendu, który jest obecnie tak popularny.
- Ponieważ SVG jest w zasadzie XML, można go kontrolować za pomocą CSS i JavaScript, zapewniając bogactwo interaktywnych możliwości.
- SVG nie wymaga żądań HTTP;
SVG jest częścią kodu źródłowego dokumentu i dlatego jest już dostępna.
SVG jest niesamowicie przydatną technologią i dla wielu jest tajemnicą, dlaczego nie ma pełniejszego efektu.
Od programu Illustrator do sieci
Istnieje wiele aplikacji, które wyprowadzą SVG, możesz użyć dowolnego z nich. Moje osobiste preferencje to Adobe Illustrator, więc tego użyjemy.
Właśnie wyrzuciłem kilka kształtów i tekst dla naszego SVG:
Jak widać, jest to bardzo prosta grafika, dzięki czemu możemy wyraźnie zobaczyć, co dzieje się w kodzie.
Następnym krokiem jest zapisanie go jako SVG. Wybierz Plik> Zapisz jako.
Zobaczysz zwykłe wyskakujące okienko, w tym musisz wybrać format SVG; jak tylko to zrobisz, pojawi się okno pop-up:
Ten dialog zapewnia nam dwie opcje:
Opcja 1: Zapisz obraz
Pierwszą opcją jest kliknięcie przycisku OK w oknie podręcznym i po prostu zapisanie obrazu jako obrazu .svg i dodanie go do naszego kodu HTML w taki sposób, jak obraz bitmapowy:
Jest to absolutnie w porządku, a obraz będzie nadal skalowany, jeśli chcesz, jednak ponieważ ta opcja jest plikiem osadzonym, nie będziemy mieli możliwości edycji w kodzie źródłowym naszej strony.
Opcja 2: kod SVG ...
Drugą opcją jest bezpośredni dostęp do kodu obrazu poprzez kliknięcie przycisku SVG Code .... Następnie możesz go skopiować i wkleić do kodu HTML.
Otrzymałem kod:
Jest to preferowane podejście, ponieważ pozwoli nam manipulować obrazem za pomocą CSS.
Jak widać, kod jest prosty i dlatego jest prawdopodobnie dobrze znany każdemu, kto pracuje w sieci. Ta znajomość jest wielką zaletą podczas pracy z SVG.
Zobaczysz także, że istnieje wiele atrybutów w elementach XML, to szczegółowe kolory i pozycje; są to wartości, którymi będziemy później manipulować.
Czyszczenie kodu
Jeśli znasz XML (nie martw się, jeśli nie jesteś), zobaczysz, że kod generowany przez Illustrator jest nieco brudny. Dzieje się tak dlatego, że dodano do niej prezentacyjne właściwości CSS, które zaśmiecają go.
Następną naszą pracą jest przeniesienie aspektów prezentacji do CSS tam, gdzie one należą.
Widzimy, że wszystkie nasze kształty mają kolor wypełnienia i jest to jedna z cech, które możemy łatwo przenieść do naszego CSS. Aby to zrobić, wystarczy usunąć atrybut wypełnienia i wartość z pliku XML i użyć prostego selektora, aby zdefiniować kolor, który chcemy w właściwości wypełnienia:
rect {fill: #AD6F6F;}circle {fill: #6F9FAA;}polyline {fill: #6FA86F;}Następnie widzimy, że w naszym tekście większość atrybutów można również przenieść do naszego CSS. Po prostu usuń wypełnienie, rodzinę czcionek i rozmiar czcionki z pliku XML i dodaj je do CSS:
text {fill: #383838 ;font-family: 'Pacifico-Regular', arial, sans-serif;font-size: 35px;} Rzućmy teraz okiem na nasz kod:
Widać, że usuwając atrybuty prezentacji mamy znacznie bardziej czytelny kod.
Biorąc to w górę
Przenieśliśmy nasze cechy prezentacji z naszego XML do naszego CSS, ale to były atrybuty, które już mieliśmy. Możemy również dodać zupełnie nowe atrybuty.
Pierwszą rzeczą, którą chcę zrobić, jest dodanie obrysu do naszego pierwszego kręgu, ale nie tylko, chcę kontrolować grubość i krycie. To wszystko jest bardzo proste:
circle {stroke: #547178;stroke-width: 5px;stroke-opacity: 0.5;}Jeśli sprawdzisz plik, zobaczysz, że rzeczywiście dodaje on obrys do koła, ale dodaje go do drugiego kręgu, którego nie chcieliśmy.
Rozwiązanie jest dokładnie takie samo jak w przypadku selekcji CSS, wystarczy dodać klasę do naszego elementu XML:
A potem możemy skierować klasę do naszego CSS:
circle.stroke {stroke: #547178;stroke-width: 5px;stroke-opacity: 0.5;}Niemal każdy CSS można zastosować do SVG. Możemy zastosować efekt najechania, który zwiększy nasz rozmiar czcionki, na przykład:
text:hover {font-size: 40px;}Jeśli to przetestujesz, zobaczysz, że to działa, ale jest to natychmiastowa reakcja. Byłoby znacznie lepiej, gdybyśmy skorzystali z przejścia CSS, co jest oczywiście możliwe:
text {fill: #383838 ;font-family: 'Pacifico-Regular', arial, sans-serif;font-size: 35px;transition: all 1s ease;}Po ponownym załadowaniu strony zobaczysz delikatne przejście w rozmiarze czcionki.
Wniosek
Jak widać, SVG ma za sobą wiele mocy. Krzywa uczenia się jest bardzo płytka, a możliwości wydają się nie mieć końca. Pojedynczy obraz SVG jest wart kilkudziesięciu obrazów bitmapowych.
Wyróżniony obraz / miniatura, skalowalny obraz projektu przez Shutterstock.