Spojrzenie na skalowalną grafikę wektorową (SVG)
Grafika wektorowa jest szeroko stosowana w mediach drukowanych. W witrynie możemy również dodawać grafiki wektorowe za pomocą SVG lub Skalowalna grafika wektorowa. Powołując się na oficjalną specyfikację W3.org, SVG jest opisany jako:
Język do opisu grafiki dwuwymiarowej w języku XML. SVG pozwala na trzy typy obiektów ßgraphic: kształty grafiki wektorowej (np. Ścieżki składające się z linii prostych i krzywych), obrazy i tekst.
W rzeczywistości istnieje od 1999 r. I od 16 sierpnia 2011 r. Stał się rekomendacją W3C. Jednak SVG jest nadal w znacznym stopniu niewykorzystywany, podczas gdy korzystanie z Vectora zamiast Bitmapy przynosi wiele korzyści w celu wyświetlania grafiki lub obrazu na stronie internetowej.
Zalety SVG
Jeśli chodzi o obsługę grafiki na stronach internetowych, SVG oferuje kilka zalet w stosunku do bitmapy, z których niektóre obejmują:
Rozdzielczość niezależna
Grafika bitmapowa / rastrowa jest zależna od rozdzielczości - jest zbudowana na pikselach. Obsługiwane grafiki będą wyglądały jak piksele, gdy zostaną zmienione przy określonym poziomie powiększenia. Nie dzieje się tak z grafiką wektorową, która ma rozdzielczość niezależną od natury, ponieważ grafika jest wyrażona równaniem matematycznym, które ją tworzy skalowalny przy dowolnym poziomie powiększenia przy zachowaniu jakości, nawet na wyświetlaczu Retina.
Zmniejszanie żądania HTTP
SVG można osadzać bezpośrednio w dokumencie HTML za pomocą svg tag, więc przeglądarka nie musi wysyłać prośby o podanie grafiki. Powoduje to również lepszą wydajność obciążenia witryny.
Stylizacja i skrypty
Osadzanie bezpośrednio z svg tag pozwoli nam także na łatwe stylizowanie grafiki za pomocą CSS. Możemy zmień właściwości obiektu takie jak kolor tła, krycie, granice itp. w taki sam sposób, jak w przypadku zwykłego tagu HTML. Podobnie możemy również manipulować grafiką za pomocą JavaScript.
Może być animowany i edytowany
Obiekt SVG może być animowany, gdy używa elementu animacji lub biblioteki JavaScript, takiej jak jQuery. Obiekt SVG można również edytować za pomocą dowolnego edytora kodu tekstowego lub oprogramowania graficznego, takiego jak Inkscape (który jest bezpłatny) lub Adobe Illustrator.
Mniejszy rozmiar pliku
SVG ma mniejszy rozmiar pliku w porównaniu z bitmapą, która ma podobną graficzną prezentację.
Rysowanie podstawowych kształtów za pomocą SVG
Zgodnie ze specyfikacją możemy narysować kilka podstawowych kształtów, takich jak prostokąt, okrąg, linia, elipsa, polilinia i wielokąt z SVG i aby przeglądarka mogła renderować grafikę SVG, wszystkie te elementy graficzne muszą być wstawione wewnątrz etykietka. Zobaczmy poniższe przykłady, aby uzyskać więcej informacji:
Linia
Rysować linia w SVG możemy użyć
Jak widać powyżej, współrzędna punktu początkowego linii jest wyrażona dwoma pierwszymi atrybutami x1 i x2, podczas gdy współrzędna punktu końcowego linii jest wyrażona za pomocą y1 i y2.
Istnieją również dwa inne atrybuty uderzenie i szerokość obrysu które są używane do zdefiniowania odpowiednio koloru obramowania i szerokości obramowania. Alternatywnie możemy również zdefiniować te atrybuty w stylu inline, tak jak poniżej:
w końcu to samo robi.
- Wyświetl demo “Linia”
Polilinia
Jest prawie podobny do
zwrotnica atrybuty przechowujące wszystkie współrzędne tworzące linie.
- Wyświetl demo “Polilinia”
Prostokąt
Prosty jest również rysunek prostokąta
- Wyświetl demo “Prostokąt”
okrąg
Możemy również narysować okrąg za pomocą 100 promień, który jest zdefiniowany za pomocą r atrybut:
Pierwsze dwa atrybuty, cx i cy definiują współrzędną środka okręgu. W powyższym przykładzie ustawiliśmy 102 oba dla x i y współrzędne, jeśli te atrybuty nie są określone, 0 zostanie przyjęta jako wartość domyślna.
- Wyświetl demo “okrąg”
Elipsa
Możemy narysować elipsę za pomocą x promień linii i y promień linii z rx i ry atrybut;
- Wyświetl demo “Elipsa”
Wielokąt
Z
- Wyświetl demo “Wielokąt”
Korzystanie z edytora grafiki wektorowej
Jak widać, rysowanie prostych obiektów za pomocą SVG w HTML jest dość łatwe. Jednak gdy obiekt staje się bardziej złożony, praktyka ta nie jest już idealna i spowoduje ból głowy.
Na szczęście, jak już wspomnieliśmy powyżej, możemy użyć edytora grafiki wektorowej Adobe Illustrator lub Inkscape wykonać pracę. Jeśli jesteś zaznajomiony z tym oprogramowaniem, z pewnością dużo łatwiej jest rysować obiekty za pomocą GUI, niż samemu kodować grafikę w tagu HTML.
Jeśli pracujesz z Inkscape, możesz zapisać swoją grafikę wektorową jako zwykły SVG, a następnie otworzyć ją w edytorze kodu tekstowego. Teraz powinieneś znaleźć kody SVG w pliku. Skopiuj wszystkie kody i wklej je do dokumentu HTML.
Możesz także osadzić .svg plik przez jeden z tych elementów; osadzać, iframe i obiekt, na przykład;
Wyniki będą ostatecznie takie same.
W tym przykładzie używam tego iPoda Apple z OpenClipArt.org.
- Wyświetl demo “iPod”
Obsługa przeglądarki
Jeśli chodzi o obsługę przeglądarki, SVG jest bardzo dobrze obsługiwany we wszystkich głównych przeglądarkach, z wyjątkiem IE8 i wcześniejszych. Ale ta sprawa może zostać rozwiązana dzięki tej bibliotece JavaScript, o nazwie Raphael.js. Aby ułatwić działanie, użyjemy tego narzędzia, ReadySetRaphael.com, aby przekonwertować nasz kod SVG na format obsługiwany przez Raphael. Oto jak.
Przede wszystkim pobierz i dołącz Raphael.js biblioteka do twojego dokumentu HTML. Następnie prześlij .svg plik do witryny, skopiuj i wklej wygenerowany kod do następującego obciążenia funkcjonować;
window.onload = function () // kod Raphaela idzie tutaj
W środku ciało tag, umieść następujące div z rsr atrybut id;
To wszystko, gotowe. Sprawdź przykład z linku poniżej.
- Wyświetl demo “Rafael”
Końcowe przemyślenia
Więc to jest podstawa z SVG. Mamy nadzieję, że teraz dobrze rozumiesz ten temat. Jest to najlepszy sposób na zoptymalizowanie witryny pod kątem dowolnej rozdzielczości ekranu, nawet do użycia na wyświetlaczu Retina.
Jak zawsze, jeśli jesteś osobą żądną przygód, tutaj umieściliśmy kilka dodatkowych odniesień i dyskusji, aby głębiej wniknąć w ten temat.
- Wprowadzenie do SVG - W3 Schools
- Rozdzielczość Niezależna z SVG - Smashing Magazine
- Dlaczego nie używasz SVG? - NetTuts
Dziękujemy za przeczytanie i mamy nadzieję, że ten post spodobał Ci się.
- Wyświetl demo
- Pobierz źródło
