Najlepszy przewodnik po SVG

Wyobraź sobie, że możesz umieścić obraz na stronie internetowej, przeskalować tę stronę do dowolnego rozmiaru i nigdy nie stracić jakości obrazu. Cóż, możesz. Jest to całkowicie możliwe, po prostu nie robiliśmy tego tak bardzo, jak powinniśmy.

Obrazy o stałych rozmiarach, takie jak pliki JPG, GIF i PNG, mają swoje miejsce w Internecie, ale ich naturalna statyczność jest sprzeczna ze sposobem, w jaki porusza się Internet. Gdy przechodzimy do responsywnych, płynnych projektów, tym bardziej irytujące staje się to, że mamy do czynienia z obrazami, które zasadniczo nie odpowiadają. Frustrowanie jest niewiarygodne, gdy zdaję sobie sprawę, że najlepszą praktyką jest tworzenie i wyświetlanie kilku różnych wersji każdego obrazu w witrynie.

Zdaję sobie sprawę, że istnieją ku temu dobre, techniczne powody. Minie sporo czasu, zanim ktokolwiek stworzy na przykład nieskończenie dużą fotografię. Zdjęcia nie są jednak ostatecznym obrazem. Grafika wektorowa ma bardzo długą drogę. Idą już daleko.

Mogą być trudniejsze do zdobycia, ponieważ nie każdy projektant stron internetowych jest ilustratorem. Zdjęcia są bogate, a dobre zdjęcia zapasów są łatwe do znalezienia. Z drugiej strony grafika wektorowa ma często niską jakość lub może po prostu nie można znaleźć właściwej. Zatrudnianie ilustratorów jest drogie.

Ale ponieważ wsparcie dla grafiki wektorowej rośnie online, tak samo będzie z ich wykorzystaniem. Nadszedł czas, aby wszyscy nauczyli się, jak wdrażać je na swoich stronach internetowych i kreatywnie ich używać. Obrazy tak responsywne, jak nasze strony internetowe są przyszłością.

Poznaj plik SVG ...

Co to jest SVG i dlaczego warto z niego korzystać?

W porządku, dla początkujących z nas SVG oznacza Scalable Vector Graphics. Pliki SVG są raczej proste, teoretycznie. To tylko pliki tekstowe z paczką XML wewnątrz. Każda informacja wizualna w pliku SVG jest definiowana przez czytelny dla człowieka kod, który jest następnie obliczany i renderowany przez przeglądarkę, oprogramowanie graficzne itp.

Oznacza to, że chociaż pliki SVG nie są tak skomplikowane, jak na przykład fotografia sformatowana jako JPG, są nieskończenie bardziej elastyczne. Można je zmieniać ręcznie w edytorze tekstu. Można je zmienić za pomocą kodu, takiego jak JavaScript i CSS. Można je skompresować do niemal śmiesznie małych rozmiarów.

Innymi słowy, są one specjalnie zaprojektowane do użycia razem z innymi technologiami sieciowymi. Są dla nas idealne.

Pod koniec lat 90. wprowadzono Macromedia i Microsoft (i inne firmy) VML , a następnie Adobe (i inne firmy) przedstawione PGML jako możliwe rozwiązania dla obrazów wektorowych na stronach internetowych do W3C (i ewentualnie jako alternatywy dla starego formatu PostScript). W3C powiedział: "Nie, zrobimy swoje; ale dzięki za pomysły! "Wynik był Grupa robocza SVG.

We wrześniu 2001 r. SVG 1.0 stał się oficjalną rekomendacją W3C, a reszta to historia. Raczej. Internet Explorer opóźnił się w przyjęciu formatu SVG, nie zaskakując nikogo. Od tego czasu pojawiały się aktualizacje ukierunkowane na urządzenia mobilne, a więcej z wyjaśnieniami.

Nawet teraz grupa robocza SVG tworzy SVG 2, który będzie obejmował więcej integracji integracyjnej z takimi elementami, jak HTML5, CSS i format czcionki WOFF.

Ma wsparcie

Jedyną wersją przeglądarki Internet Explorer, którą musisz się teraz martwić, jest IE8. to jest to! Wszyscy inni mają mniej lub bardziej pełne wsparcie SVG. Tak, czasami możesz napotkać błędy, nawet w "dobrych" przeglądarkach, ale wciąż warto. Nie tylko praca wokół nich sprawi, że twoje umiejętności rozwiązywania problemów będą ostre, ale im więcej będziemy używać tej technologii, tym więcej deweloperów przeglądarek będzie ją wspierać.

Sprawdzić caniuse.com dla bardziej dogłębnej analizy tego, co działa, a co nie, w jakich przeglądarkach.

Wszystko reaguje ... albo powinno być

Technologia internetowa poszła daleko, poza statyczne strony internetowe, które znaliśmy. Nadszedł czas, aby nasze obrazy nadrobić zaległości, proste i proste. Kiedy musisz zrobić ikonę, użyj SVG. Kiedy musisz użyć ilustracji, przejdź do SVG, jeśli możesz. Jeśli chcesz abstrakcyjne, ale wciąż proste tło strony, skorzystaj z SVG.

Nie jestem fanem technologii ekranowej siatkówki, szczególnie dlatego, że jej nie mam. To nie jest zazdrość. Cóż, to nie tylko zazdrość. Prostym faktem jest to, że ekrany Retina zniknęły i sprawiły, że serwowanie obrazów stało się o wiele bardziej skomplikowane. SVG, będąc nieskończenie skalowalnym, może pomóc zminimalizować problem.

Dostępność

Użytkownicy niedowidzący zazwyczaj przeglądają sieć ze wszystkim, co jest nieco powiększone. Kiedy zwykłe obrazy są powiększane, tracą jakość. SVG tego nie zrobi, więc dlaczego nie skorzystać z tego, aby pogorszyć jakość obrazu dla osób niedowidzących?

Może to pomóc w zabezpieczeniu twojej strony internetowej w przyszłości

Technologia zawsze się zmienia. To, co jest dzisiaj, może już dawno zniknąć, ale SVG najprawdopodobniej będzie jeszcze przez jakiś czas. Dopóki W3C wyznacza globalne standardy branżowe, wydaje się, że SVG nadal będzie de facto standardem grafiki wektorowej w przeglądarce. Użyj go teraz, a twoje strony będą ustawione na dobry, długi czas.

Samouczki i instrukcje obsługi SVG

Więc jesteś przekonany. SVG jest fajne, to przyszłość, czas się go nauczyć. Na szczęście dla wszystkich jest to Internet. Po prostu wiesz, że ludzie poświęcali wiele godzin na tworzenie darmowych materiałów szkoleniowych dla każdego, kto tego chce. Ludzie, którzy robią tego rodzaju rzeczy, to ludzie, którzy sprawiają, że Internet jest niesamowity.

Następnie, oczywiście, poszliśmy i spędziliśmy godziny przeglądając różne tutoriale, aby znaleźć najlepsze. Możesz nam podziękować później. Na razie trzeba coś zrobić!

Uwaga: Należy pamiętać, że pliki SVG są w całości kodem XML, więc wiele z tych samouczków jest skoncentrowanych na programistach lub po prostu zawiera dużo kodu. Zawarliśmy zarówno samouczki poświęcone podstawom, jak i konkretnym, kreatywnym zastosowaniom dla SVG, więc nie pomijaj tej części.

• Używanie SVG: Chris Coyier od lat tworzy łatwe do zrozumienia samouczki CSS i HTML na stronie css-tricks.com. Jego primer w SVG nie jest inaczej. Będę zawierał linki do wielu podstawowych objaśnień i samouczków, ale od tego zaczynam. Ten samouczek zawiera podstawowe instrukcje dla użytkowników programu Adobe Illustrator.
• Jak zacząć z SVG: Byłbym niedbały, gdybym nie uwzględnił Wkład własny WDD do edukacji SVG. Wciąż fantastyczna Sara Vieira obejmuje tworzenie grafiki, eksportowanie jej, czyszczenie kodu, przenoszenie atrybutów prezentacji do plików CSS i wiele więcej.
• Rozdzielczość Niezależność Z SVG: Jeśli jest związana z Internetem, to Smashing Magazine prawdopodobnie ma artykuł na ten temat. Obejmują one podstawy formatu SVG ze swoim zwykłym stylem i dbałością o szczegóły.
• Skalowalna grafika wektorowa (seria artykułów): Hongkiat.com jest kolejnym źródłem wysokiej jakości uczenia się w sieci i grafice. Zamiast opublikować tylko jeden długi artykuł cała ich seria autor: Thoriq Firdaus. Czasami brakuje angielskiego, ale instrukcje są nadal jasne i łatwe do zrozumienia.
• Sara Soueidan: Stylizacja i animacja skalowalnej grafiki wektorowej z CSS: Tak jest wideo z prezentacji podana na CSSconf EU 2014. W nim Sara Soueidan dostarcza wiele porad, sztuczek, a nawet kilku hacków do stosowania stylów i animacji w SVG w Internecie. Jest pół godziny, więc bądź wygodny i trzymaj coś na notatki. To całkowicie warte twojego czasu.
• Eksportowanie SVG do Internetu za pomocą Adobe Illustrator CC: użytkownicy programu Adobe Illustrator powinni Sprawdź to. Jeden z blogów Adobe podaje szczegółowe, a mam na myśli bardzo szczegółowe instrukcje dotyczące eksportu plików SVG do Internetu. Dowiedz się, jak zoptymalizować je do najmniejszego rozmiaru pliku w Internecie.
• SVGBasics: This cała strona internetowa jest poświęcony nauczaniu ludzi, jak tworzyć grafiki SVG od zera za pomocą XML. Polecam to dla tego, kto ma do czynienia z faktycznym zapleczem - lub nawet front-endem - jakiejkolwiek strony internetowej. Wiedząc, jak działa ten kod, może znacznie ułatwić rozwiązywanie problemów w locie.
• Samouczek SVG autorstwa Jakoba Jenkova: Kolejny programista-centric zestaw samouczków, tutaj. Wielka różnica? Autor zamieścił wersje wideo każdej sekcji. Jeśli nauczysz się lepiej, mając do dyspozycji zarówno wizualizacje, jak i dźwięk, to jest dobre miejsce na początek.
• Proste wprowadzenie do animacji SVG: tytuł mówi wszystko. David Walsh wyjaśnia, jak skonfigurować Elementy SVG do animacji, które atrybuty użyć dla różnych elementów, jakich bibliotek użyć i nie tylko. To nie jest kompletny przewodnik, ale zapozna cię z podstawowymi pojęciami niezbędnymi do rozpoczęcia animacji.
• Wprowadzenie do animacji SVG: Ten samouczek bardziej szczegółowe informacje na temat animacji obiektów SVG. Oprócz tego omawia niektóre typowe problemy, które możesz napotkać podczas animacji, więc warto przeczytać.
• Jak: Eksportować wiele ikon do plików SVG z Adobe Illustrator: Tworzenie zestawu ikon SVG w programie Illustrator? Przechowujesz je wszystkie w jednym pliku programu Illustrator? Wyeksportuj je wszystkie do ich oddzielnych plików jednym kliknięciem.
• Animuj tekst ze ścieżkami SVG: Czy dokładnie to, co mówi w tytule. Włącz animację, może użyć go na logotypie. To na pewno wygląda wystarczająco fajnie ...
• Animuj ikony SVG za pomocą CSS3 i JavaScript: Jednym z największych zastosowań SVG jest ikonka i nie bez powodu. Utwórz jeden plik i używaj go w dowolnym miejscu w swojej witrynie lub aplikacji o dowolnym rozmiarze. Czego więcej można chcieć? Ten samouczek pokazuje, jak animować ikony po najechaniu myszą.
• Tworzenie skalowalnej grafiki SVG Infografika to jeden z ulubionych sposobów konsumowania faktów przez Internet w dzisiejszych czasach. Dlaczego nie sprawić, by były nieskończenie skalowalne? Wrzuć trochę animacji, a ty możesz bardzo wysadzić wodze umysłów.
• Tworzenie przycisku SVG HTML Burger: Powiedz, co zrobisz z przyciskiem hamburgera, prawdopodobnie nigdzie się nie wybiera. Możesz równie dobrze użyj SVG i animacji aby to był najcieńszy i najfajniejszy przycisk hamburgera. Ta obejmuje sposoby animowania ścieżek i pociągnięć, aby jeden przycisk dosłownie zamieniał się w inny, więc daj mu spojrzenie.
• Snap.svg Przykłady i samouczki: To jest przewodnik do korzystania z biblioteki JavaScript Snap.svg (patrz sekcja "Narzędzia" poniżej) poniżej. Został zaprojektowany, aby pomóc Ci zacząć tworzyć elementy SVG w JS i animować je, co czyni je interaktywnymi i tak dalej.
• Wprowadzenie do Raphaël.js: Raphaël.js jest jedną z dużych bibliotek JavaScript powiązanych z SVG, oraz Ten artykuł uczy, jak z niego korzystać. (Ponownie zobacz sekcję Narzędzia poniżej).
• Animowana ikona SVG: Ludzie lubią animowane ikony, więc równie dobrze możesz nauczyć się każdego podejścia do ich tworzenia. Tutaj ponownie widzimy bibliotekę Snap.svg w akcji, gdy autor tworzy, a następnie animuje, przycisk odtwarzacza multimediów.
• Clipping in CSS and SVG - Właściwość Clip-path i element: Oto ładny długi artykuł o tym, jak korzystać z przycinania SVG, aby robić zdjęcia wewnątrz kształtów, a zdjęcia wewnątrz dużego tekstu. Możesz rozważyć użycie go do stworzenia wielkich, atrakcyjnych nagłówków, które są przyjazne SEO, ponieważ boty wyszukiwarek mogą je czytać.
• Reagowanie na SVG za pomocą CSS: Chociaż pliki SVG są nieskończenie skalowalne, metody użyte do umieszczenia ich na stronie internetowej mogą czasami powodować problemy. Ten samouczek od codrops wyjaśnia, jak rozwiązać różne problemy, które możesz napotkać.
• Shape Hover Effect Z SVG: Stwórz gładki i elegancki wygląd animowany efekt hover do podglądu obrazów. ( Sprawdź demo. )
• Podkład SVG dla dzisiejszych przeglądarek W3C: Nie do końca, a na pewno nie najmniej, mamy dostarczony zasób przez ludzi, którzy wymyślili cały format SVG: W3C. To nie jest podstawowy samouczek ani wprowadzenie. Zgodnie z przedmową, został on stworzony dla profesjonalnych programistów, grafików z "silnym technicznym zgięciem" i innych, którzy nie mają nic przeciwko temu, by dostać się do czystego granitu.
• Samouczek SVG autorstwa MDN: Tak jak w przypadku SVGBasics, to raczej obszerny zestaw samouczków, dostarczone przez Mozilla Developer Network. Choć sam w sobie jest obszerny, sam tutorial jest uważany za "rozwijany". Na przykład można to obecnie zobaczyć na stronie "Filtry", która jest pusta. Według samej strony samouczek znajduje się we wczesnej fazie rozwoju. Jeśli jesteś w stanie, proszę, pomóż sobie przy pisaniu paragrafu lub dwóch. Dodatkowe punkty za napisanie całej strony.

Narzędzia SVG

Jedną z wielu zalet otwartej natury SVG jest to, że każdy może tworzyć dla niego oprogramowanie. Nie ma żadnych ograniczeń licencyjnych ani opłat do zapłaty, tylko otwarty standard dla użytkowników. Jak można się było spodziewać, wielu programistów właśnie to zrobiło.

Dostępne są narzędzia do tworzenia i używania formatu SVG. Obejmują one od dużych pakietów oprogramowania, które obejmują opcję eksportu SVG po namyśle, do aplikacji do rysowania wektorowego, które wykorzystują SVG jako podstawowy format i wiele więcej.

Szybkie wyszukiwanie w Google słów "Narzędzia SVG" zwraca "Około 37 000 000 wyników", więc wiesz, że jest tam dużo.

Gdzie zatem powinieneś zacząć?

Aplikacje premium

Wielkie nazwiska w tworzeniu grafiki wszystkie obsługują SVG. Adobe Illustrator,Corel Draw, nawet różne produkty od Xara - tak, Xara wciąż jest czymś - wszystkie mogą importować, edytować i zapisywać pliki w formacie. (Wiadomo, że Illustrator umieścił kilka dziwnych rzeczy w plikach SVG, więc musisz zachować ostrożność przy ustawieniach eksportu).

Inkscape

Jeśli jeszcze nie korzystasz z pakietu grafiki wektorowej, Inkscape to fantastyczne miejsce na rozpoczęcie. Utworzony w 2003 roku jako rozwidlenie innego projektu open source o nazwie Sodipodi (który był oparty na jeszcze innym projekcie OSS), Inkscape stał się standardem dla darmowego, wieloplatformowego oprogramowania do grafiki wektorowej. Nie jest tak wypełniony funkcjami jak Adobe Illustrator, ale jest to więcej niż wystarczające dla większości projektów wektorowych.

Serif DrawPlus Starter Edition

Serif to firma, która tworzy całkiem niezłe oprogramowanie do tworzenia grafiki i oprogramowania do publikacji komputerowych. Wszystkie ich główne oferty oprogramowania zawierają bezpłatne "Wersje startowe", a ich aplikacja do rysowania wektorowego nie jest wyjątkiem.

Nie daj się jednak nabrać na "Starter Edition". Może nie mieć wszystkiego, co robi wersja pro, ale w większości przypadków może to zrobić. Jeśli nie jesteś ilustratorem z handlu, ta aplikacja może i zaspokoi Twoje potrzeby ... pod warunkiem, że jesteś w systemie Windows. Niestety, nie jest to platforma wieloplatformowa. Ponadto wymagana jest rejestracja do pobrania.

Karbon

Część pakietu biurowego Calligra, która jest przeznaczona głównie dla systemu Linux, Karbon jest w pełni funkcjonalnym edytorem grafiki wektorowej. Ma wszystkie podstawowe narzędzia i kilka innych rzeczy. Instalacja na komputerach Mac i Windows jest obecnie trudna, ale nie jest możliwa.

PrintDesign

Nazwa brzmi jak pakiet oprogramowania z lat 90., ale wiem, że jest całkiem nowy. W rzeczywistości jest to następca starej aplikacji ilustracyjnej sK1, która została wycofana. PrintDesign jest obecnie w fazie "podglądu" i ma wersje zarówno Linux, jak i Windows. Nie jest jeszcze gotowy do użycia w produkcji, ale jest to projekt wart obejrzenia.

SVG-edit

Być może nazwa jest trochę na nosie, ale oprogramowanie jest więcej niż zdolne. SVG-edit Opiera się całkowicie na technologiach internetowych, w szczególności HTML5, JavaScript i CSS. Oznacza to, że nie ma funkcji po stronie serwera. Co więcej, jest to Open Source, co oznacza, że ​​możesz go pobrać, umieścić na swoim serwerze lub nawet użyć go z pulpitu.

Ma lista funkcji wystarczająco długo, aby wzbudzić zazdrość na komputerze stacjonarnym i działa szybciej niż większość z nich, więc daj mu wir.

Janvas

Janvas to jedyna aplikacja internetowa na tej liście, która nie jest całkowicie darmowa. Jest trzydziestodniowy okres próbny, po którym subskrypcja kosztuje 26 euro rocznie. Jeśli jednak żaden z innych edytorów SVG opartych na sieci Web nie uszczęśliwi Cię, możesz go rozważyć.

Narzędzia do rysowania są zaawansowane i wystarczająco znane, każda zmienna jest edytowalna na pasku bocznym i możesz zapisywać swoje dokumenty na Dysku Google. Możesz tworzyć szablony, współpracować przy rysowaniu dokumentów, a nawet dodawać pliki CSS i JS, które mają wchodzić w interakcję z grafiką.

W sumie jest to solidna oferta.

Mondrian

Mały. Gładki. Prosty. Mondrian jest kolejnym otwarte źródło oferowanie i jest dużo mniejsze niż większość. Nie ma nawet narzędzia tekstowego ... ale bardzo dobrze rysuje proste rysunki. Możesz otwierać pliki z twardego dysku lub adresu URL, pobrać kod do osadzenia na swojej stronie internetowej lub po prostu zapisać rysunek jako plik SVG lub PNG. Może nie być tak zaawansowany, jak inne aplikacje, ale po prostu jest przyjemny w użyciu, a narzędzie pióra wydaje się naturalne.

Narysuj SVG

Narysuj SVG to kolejny internetowy edytor SVG z wszystkimi funkcjami, których powinieneś potrzebować. Najmocniejszym punktem wydaje się być sama szybkość, z jaką ładuje i rysuje. Niestety, interfejs użytkownika jest poważnie wadliwy. Mimo to, jest tam i działa, jeśli kiedykolwiek będziesz tego potrzebować.

Biblioteki SVG

Programiści się cieszą! Mamy dla ciebie także kilka linków. W końcu SVG to nie tylko kolejny format graficzny. To kod. Jest to kod, który można połączyć lub osadzić. Może być współdziałać i zmieniać w locie. Z matematyką!

Snap.svg

Kłapnięcie jest biblioteką JS do generowania i interakcji z SVG. Jest przeznaczony dla nowoczesnych przeglądarek. Tak, to znaczy, że obsługuje tylko IE9 + ... ale jeśli starsze przeglądarki nie są twoim problemem, idź do niego.

Raphaël

Raphaël, w przeciwieństwie do Snap, jest kompatybilny ze starszymi przeglądarkami. W rzeczywistości może działać z IE6 +, Safari 3+ i Chrome 5+. Jeśli tworzysz coś dla systemu przedsiębiorstwa, w którym użytkownicy mogą znajdować się na starszych komputerach, na przykład Raphaël może być najlepszym rozwiązaniem.

jQuery SVG

Jak SVG i jQuery? Nie jestem naprawdę zaskoczony. jQuery, być może, stracił trochę uwagi, którą miał kiedyś, ale nadal jest biblioteką dla wielu z nas.

jQuery SVG, wtedy prawdopodobnie jest to wtyczka, której szukasz. Ma funkcje animacji, tworzenia wykresów, a nawet rozszerzeń. Zgadza się, rozszerzenia wtyczki. Obsługa przeglądarki to IE9 +, ale starsze wersje IE mogą być używane z zainstalowanymi odpowiednimi wtyczkami do przeglądarek.

Nie zależałbym jednak od użytkowników posiadających te wtyczki.

SVGMagic

SVGMagic jest rozwiązaniem opartym na jQuery dla starszych przeglądarek (IE 7 i 8). Zamiast ręcznie tworzyć obrazy zastępcze dla każdego używanego pliku SVG, ta wtyczka może generować je w locie. Obsługuje również obrazy tła.

Jak to robi? Wykrywa, czy przeglądarka użytkownika może obsłużyć SVG. Jeśli tak, idzie spać. Jeśli nie, kontaktuje się ze skryptem PHP po stronie serwera i prosi go o utworzenie pliku PNG odpowiednich obrazów SVG o wymaganych wymiarach.

Po zakończeniu skrypt PHP wysyła adresy URL do tymczasowych obrazów zastępczych z powrotem do wtyczki jQuery, a domyślne adresy URL są zastępowane. To oczywiście wymaga czasu, więc możesz opcjonalnie podać obraz zastępczy, który będzie wyświetlany podczas konwersji.

Jedno zastrzeżenie: obecnie nie może obsłużyć zbyt wielu obrazów naraz. Nie chciałbyś używać tej techniki na stronach z więcej niż kilkoma plikami SVG.

SVG.JS

Wreszcie, oto opcja dla liczników bajtów. SVG.JS waży tylko 11,8 kb, gdy jest spakowany. Pomimo niewielkich rozmiarów obsługuje on imponującą liczbę funkcji (wymienionych na stronie projektu):

• Animacje dotyczące rozmiaru, położenia, transformacji, koloru
• Bezbolesne przedłużanie dzięki modułowej konstrukcji
• Dostępne różne przydatne wtyczki
• Zunifikowane api pomiędzy typami kształtów z ruchem, wielkością, środkiem
• Powiązanie zdarzeń z elementami
• Pełna obsługa masek kryjących i ścieżek przycinających
• Ścieżki tekstowe, nawet animowane
• Grupy i zestawy elementów
• Dynamiczne gradienty

Przeczytać dokumentacja po więcej informacji.

Zdjęcie SVG

Nie każdy jest ilustratorem. Przynajmniej na pewno nie byłem w tym dobry. Dlatego ilustracje do zapasów stają się nieocenionym źródłem informacji. Jednak może być trudno znaleźć dobre rzeczy. Co nie wygląda na to, że Microsoft clipart jest często ograniczony lub zbyt drogi.

Nie trać jednak nadziei. Istnieje wiele rzeczy, które są dobrej jakości. Jeśli to nie idealnie spełnia twoje potrzeby, to jest grafika wektorowa. Istnieje duża szansa, że ​​można go dostosować do twoich potrzeb, jeśli masz podstawową znajomość oprogramowania do grafiki wektorowej.

SVG może jednak zrobić coś więcej niż tylko ilustracje. Możesz także tworzyć wzory, duże, fantazyjne tła, które nie pochłaniają przepustowości i nie tylko. Rzućmy okiem na to, co ludzie zrobili dla reszty z nas:

Clipart SVG na openclipart.com

SVG, jako otwarty format, ma wielu entuzjastów open source jako fanów. W rezultacie jest to jeden z podstawowych formatów używanych w tym, co może być największa kolekcja bezpłatnych obiektów clipart tam na zewnątrz.

A wiele z nich to clipart-owski. A wiele z tego jest pracą amatorską. Jest jednak trochę dobrej jakości grafiki, jeśli spojrzysz. Hej, to nic nie kosztuje.

SVG Akcje

SVG Akcje jest małą witryną, o stosunkowo niewielkiej, ale doskonałej kolekcji. Są to głównie ikony i makiety urządzeń, ale wszystkie są wysokiej jakości. Jeśli potrzebujesz jednej z tych dwóch rzeczy, zacznij tutaj.

Zasoby SVG na deviantart.com

Ah DeviantArt, ta gigantyczna społeczność wciąż się rozwija. Przejdź do kategorii zdjęć i wyszukaj SVG (lub kliknij link powyżej). Znowu, jakość będzie się różnić, ale są tam dobre rzeczy, jeśli masz czas, aby spojrzeć.

Galeria wzorów SVG

Mała galeria pełna Wzory oparte na SVG. Został zaprojektowany jako bardziej spektakularny, ale pliki źródłowe są dostępne dla Twojej wygody.

Wzory SVG z svgeneration.com

svgeneration.com zawiera wiele wzorów SVG do użytku. Witryna zawiera opcje edycji dla każdego wzoru i możesz edytować kod bezpośrednio w witrynie, aby zobaczyć zmiany w działaniu. Jest to nie tylko świetne źródło gotowych wzorów, ale także wiele informacji na temat ich tworzenia.

Kliparty SVG

Sztuka na ta strona to wyraźnie staroświecki styl kreskówkowy. To, szczerze mówiąc, nie będzie tym, czego wszyscy szukają, ale jest tam dla tych, którzy chcą tego klasycznego stylu na swoich ilustracjach.

SVG Studio

SVG Studio oferuje tysiące ilustracji o wyraźnie nowoczesnym charakterze. Możesz je kupić w małych podzestawach lub pobrać cały ich katalog na raz. To cię cofnie o 500 USD, co na 3000 ilustracji nie jest tak źle.

SVG na większych stronach magazynowych

Nie mogę powiedzieć wiele o sztuce oferowanej na każdej stronie, ponieważ różni się ona znacznie w zależności od autora, bez ogólnego stylu. Największe nazwiska to istockphoto.com,shutterstock.com,bigstockphoto.com, i canstockphoto.com.

Inspiracja SVG

Możemy przeczytać wszystkie wstępy, które chcemy, i śledzić wszystkie tutoriale. Możemy zostać ekspertami w każdym aspekcie specyfikacji SVG, a mimo to możemy wciąż być niesamowicie nudni. Musimy spojrzeć na cały potencjał danej technologii, aby jak najlepiej z niej skorzystać.

Jednak często łatwiej powiedzieć, niż zrobić. Często pomaga mieć punkt odniesienia, coś niesamowitego do obejrzenia i pokazać nam dokładnie, jakie niesamowite rzeczy możemy zrobić z tym, co mamy. Takie są witryny Webcreme w ogóle do projektowania stron internetowych. Właśnie to Ogród Zen CSS, i wszystkie galerie CSS, które przyszły po nim, zrobiły dla układów CSS.

Na razie nie znalazłem żadnych galerii poświęconych temu, co można osiągnąć za pomocą SVG w połączeniu z innymi technologiami sieciowymi, a to może pomóc. W międzyczasie mamy do czynienia z niesamowitymi rzeczami, które znaleźliśmy:

Przystaw reklamę graficzną

Ten przykład jest częścią Snap.svg kolekcja na CodePen. Potrzebujesz idealnego przykładu wykorzystania SVG do zrewolucjonizowania reklam online? To jest to.

Pomyśl o tym: niektóre firmy reklamowe wciąż sprzedają reklamy w oparciu o rozmiar pikseli. To nie ma sensu w dobie nieskończonej różnorodności rozmiarów ekranów i ekranów Retina do rozruchu. Dopóki nie przedstawimy lepszego systemu niż reklamy graficzne, SVG może przynajmniej pomóc nam dopasować reklamy do responsywnego charakteru projektowania stron internetowych.

Zobacz pióro Przystaw reklamę graficzną CJ Gammon ( @cjgammon ) na CodePen .

Interfejs pulpitu Jtop

Mozilla Developer Network, podmiot, w którym działam, gdy badam ogólnie technologie internetowe, również wyprodukował kilka ciekawych rzeczy zrobionych przy pomocy SVG. Na przykład poszli i zrobili cały interfejs pulpitu oparty całkowicie na technologiach internetowych, takich jak HTML5, JS, SVG i CSS. Jest szybki, dostosowywany i prawie żałuję, że nie był częścią prawdziwego systemu operacyjnego.

Czas refleksji

Dostarczone przez nas ShinyDemos (co z kolei zostało nam przekazane przez ludzi w Opera ) Czas refleksji dosłownie po prostu nałożysz zegar na transmisję na żywo z kamery internetowej. Cóż, jeśli dasz mu pozwolenie, i tak naprawdę masz aparat. Ale chodzi o to, że pokazuje, jak maski SVG mogą być nakładane na prawie wszystko.

oblurlay

Poprzez kombinację CSS, SVG i jQuery, oblurlay tworzy dokładnie to, co sugeruje jego nazwa: rozmyta nakładka, styl iOS. Jest to plugin jQuery, więc implementacja nie jest trudna, i ładnie pokazuje, jak filtry SVG mogą być stosowane do różnych rzeczy, nie tylko do samych obiektów SVG.

Demony Codrops

Codropy (wcześniej wspomniane w sekcji samouczków) stworzyły wiele fascynujących, imponujących i po prostu ładnych demonstracji, które pokazują, co potrafi SVG. Każdy zasługuje na własną właściwą sekcję w tym artykule, ale jest ich tak wiele, że umieszczam je wszystkie w jednym. Jeśli nie spojrzysz na nic więcej z tej sekcji "Inspiracje", spójrz na te. Sprawdź dema i pobierz pliki źródłowe. Więc dziękujcie chłopcom z Codrops. Oni zasługują na to.

Uwaga: nie wszystkie z nich są skoncentrowane na SVG, ale wszystkie w jakiś sposób wykorzystują grafikę SVG.

Strona Ładowanie efektów : zestaw twórczych efektów ładowania stron, które używają animacji SVG z Snap.svg. Chodzi o to, aby pokazać nakładkę z interesującą animacją kształtu, podczas gdy nowa zawartość zostanie załadowana.

Pomysły na subtelne efekty unoszenia się : inspirujące efekty kreatywne i subtelne za pomocą nowoczesnych technik CSS, w tym translacji 3D i pseudoelementów. Korzystają również z SVG. Idź sprawdź próbny dla drugiego zestawu efektów.

Animacja rysunku SVG : mały eksperyment, który bada wykorzystanie animacji rysowania linii SVG, poprzedzając pojawienie się elementów graficznych lub strony internetowej, symulując ich ładowanie.

Off-Canvas Menu Efekty : inspiracja dla efektów i stylów menu poza obszarem płótna z wykorzystaniem przejść CSS i animacji ścieżek SVG.

Inspiracja stylów narzędzi : niewielka kolekcja różnych stylów podpowiedzi i efektów dla inspiracji. Korzystając z transformacji CSS, kształtu border-radius i SVG, możemy tworzyć nowoczesne i ciekawe podpowiedzi.

Inspiracja stylów powiadomień : kilka prostych pomysłów i efektów dla dyskretnych powiadomień na stronie. Mały skrypt jest wykorzystywany do prezentowania niektórych stylów, a do efektów służą animacje CSS.

Inspiracja dla niestandardowych elementów wyboru : inspiracja do stylizacji niestandardowej wersji wybranego elementu. Istnieje wiele możliwości i dzisiaj badamy kilka pomysłów, jak pozwolić użytkownikowi wybrać styl.

Inspiracja dla Inline Anchor Styles : inspiracja dla kreatywnych i nowoczesnych wbudowanych stylów kotwicy i efektów hover za pomocą różnych technik, takich jak przejścia pseudoelementowe i SVG.

Style nawigacyjne strzałek : niektóre inspiracje dla stylów nawigacji strzałek i efektów hover za pomocą ikon SVG dla strzałek oraz przejść i animacji CSS dla efektów.

Wobbly Slideshow Effect : slajdy w tym pokazie slajdów drgają, gdy się poruszają. Efekt jest oparty na strzale Dribbble Sergeya Valiukha i został wykonany przy użyciu Snap.svg i morfingu ścieżek SVG ... Należy pamiętać, że jest to wysoce eksperymentalne i testowane tylko w najnowszych wersjach współczesnych przeglądarek.

Zawijam to

SVG, choć nie jest to jeszcze jeden z najczęściej używanych formatów obrazu, jest dobrze udokumentowany, mocno wspierany i stanowi dużą część przyszłości Internetu. Jeśli nie używasz go jako elementu procesu projektowania, prawdopodobnie nadszedł czas, aby zacząć.

Przedstawiony obraz, bezszwowe grafika wektorowa przez Shutterstock.

• ← 10 darmowych wtyczek WordPress dla lutego 2015
• 21 narzędzi do współpracy, aby usprawnić pracę zespołową →