Archive

Posts Tagged ‘SVG’

[PL] SVG na przykładzie oznaczeń oporników (resistor color decoder)

December 8, 2013 Leave a comment

Resistor color codeOstatnio po zakupie arduino na nowo zainteresowałem się elektroniką. Pierwszą rzeczą jaka była mi potrzebna, to odszyfrowywanie kolorów na rezystorach (opornikach). Istnieje kilka stron, które na żywo pomagają rozszyfrować te oznaczenia, jednak wybieranie kolorów z listy rozwijanej i wyliczanie wartości poprzez kliknięcie, trochę mnie męczy. Postanowiłem więc utworzyć taki ‘programik’ samemu.

[EN] In this blog post, I’m describing how to write a resistor color decoder in SVG. You can download an offline version from git hub and run it in any browser (checked in Interned Explorer 11). Then just pick a color, and the value will be calculated automatically.

Read more…

[PL] #SVG style CSS – odcinek 11 #HTML5

November 28, 2011 Leave a comment

Oprócz definiowania kolorów, gradientów czy wzorów wewnątrz SVG, mozna także wykorzystywać CSS. Przy jego pomocy, w prosty sposób można zmienić kolor kształtów, a także i wygląd – definiując na przykład szczegóły w osobnym pliku. Tego typu style można wykorzystywać do różnego rodzaju map i wykresów, a także przycisków i elementów strony.

Szczegóły można znaleźć w kolejnej części samouczka SVG:

  1. SVG – style CSS
Tags: , , ,

[PL] #SVG kolory, gradienty, wzory i wypelnienia – odcinek 9,10 #HTML5

November 27, 2011 Leave a comment

Obiekty w SVG – kształty, krawędzie ścieżki można wypełniać kolorem, gradientem lub także własnym wypełnieniem utworzonym z połączenia poprzednich. Gradienty SVG wypychają gradienty z CSS ze względu na prostszą ich definicję, a także praktycznie dostępność w każdej przeglądarce (jednak, niektóre urządzenia mogą jeszcze nie wspierać SVG – patrz komentarze do tego posta).

Pełne artykuły wyjaśniające krok po kroku sposób tworzenia gradientów i wypełnień SVG znaleźć można na stronie MSDN:

  1. SVG – kolory i gradienty
  2. SVG – wzory i wypełnienia
Tags: , ,

[PL] #SVG – animacja – odcinek 8 #HTML5

November 23, 2011 Leave a comment

Ósmy odcinek samouczka wprowadza odrobinę dynamiki. Za pomocą paru linii JavaScript w połączeniu z poznanymi do tej pory elementami SVG utworzymy prostą i praktyczną kontrolkę, którą można w łatwy sposób dołączyć do strony. Przykład opiera się do przedstawionego jakiś czas temu zegarka w SVG, jednak poniższy artykuł posiada odświeżoną wersję wyjaśniającą szczegółowiej krok po kroku każdą zmianę wraz z prostym zadaniem do samodzielnego wykonania.

Pełna treść odncinka dostępna jest na stronie MSDN:

  1. SVG – animacje
Tags: , ,

[PL] #SVG – transformacje – odcinek 7 #HTML5

November 22, 2011 Leave a comment

To już półmetek szkolenia, podczas którego poznajemy SVG. Tym razem dowiemy się czym jest transformacja obiektów SVG oraz w jaki sposób skalować i przesuwać elementy po naszej grafice. Całość oparta jest na przykładzie tworzenia grafiki przedstawiającej różę wiatrów znanej między innymi z kompasów (btw. kto dzisiaj używa kompasu?).

Całość samouczka znaleść można na stronie MSDN:

  1. SVG – Transformacje
Tags: , ,

[PL] #SVG – biblioteka elementów – odcinek 6 #HTML5

November 21, 2011 Leave a comment

W kolejnej części samouczka SVG dowiedzieć możemy się w jakis sposób grupować elementy, a następnie odwoływać się do nich wewnątrz grafiki.  Cały przykład oparty jest na dodaniu tekstu wyświetlanego na ścieżce z wykorzystaniem gradientu (wszystkie elementy zdefiniowane są wewnątrz kontenera). Na zakończenie można spróbować swoich sił definiując w ten sposób prosty znak drogowy.  Read more…

Tags: , ,

[PL] #SVG – Tekst – odcinek 5 #HTML5

November 19, 2011 Leave a comment

SVG również pozwala na tworzenie i wyświetlanie tekstu, a także na manipulowanie pojedynczymi znakami zdania. Tekst definiowany przez SVG można wykorzystywać między innymi przy definiowaniu niestandardowego wyglądu nagłówków, tytułów.

I tak na zakończenie tygodnia pojawił się kolejny, piąty już odcinek, na którym poruszany jest SVG. Tym razem dowiemy się w jaki sposób można tworzyć udekorowany tekst, który wykorzystany może zostać do definiowania na przykład ozdobnych nagłówków.

Read more…

Tags: , ,

[PL] #SVG – Ścieżki – odcinek 4 #HTML5

November 17, 2011 Leave a comment

Za pomocą prostych kształtów nie zawsze da się uzyskać wszystkie struktury geometryczne. Lukę tą wypełniają ścieżki, które pozwalają na tworzenie bardziej skomplikowanych struktur geometrycznych, takich jak krzywe czy łuki, a także linie proste.

To już czwarty odcinek, w którym poruszany jest SVG – tym razem wykorzystując do tego celu element – path – utworzymy krok po kroku bardziej skomplikowany znak drogowy. Dowiemy się także, w jaki sposób sama ścieżka jest definiowana (co ciekawe definicja ścieżki w SVG jest identyczna z definicją ścieżki z XAML).

Read more…

Tags: , ,

[PL] #SVG Podstawowe kształty – odcinek 3 #HTML5

November 16, 2011 Leave a comment

Podstawowe kształty SVG można wykorzystywać do tworzenia wielu bardziej złożonych struktur, schematów i oznaczeń. Warto wiedzieć, w jaki sposób kształty te można łączyć i na jakiej zasadzie one działają. – wiedza ta jest przydatna na przykład przy modyfikowaniu obiektów za pomocą JavaScript.

W kolejnej części samouczka omawiane są niektóre podstawowe kształy dostępne w SVG. Za pomocą nich krok po kroku tworzone są dwa różne znaki drogowe. Jest to pierwszy odcinek w którym przez praktykę można poznać coś nowego i ciekawego. Po szczegóły zapraszam na stronę z samouczkiem:

  1. SVG – Podstawowe kształty
Tags: , ,

[PL] #SVG wprowadzenie – odcinek 1 i 2 #HTML5

November 15, 2011 Leave a comment

Scalable Vector Graphics (w skrócie SVG) jest plikiem tekstowym, którego zawartość tworzy zestaw znaczników XML opisujących pozycję, rozmiary, wygląd dwuwymiarowych kształtów, obrazów i tekstu. Poszczególne podstawowe elementy możesz łączyć i wykorzystywać, tworząc dzięki temu bardziej skomplikowane kształty.

Tak zaczyna się cykl krótkiego kursu, na którym poruszam podstawy tej ‘technologii’ dostępnej już praktycznie we wszystkich przeglądarkach. Pierwsze dwa odcinki pozwalająu ugryźć ten temat od podstaw i krok po kroku poznać sposób dodawania SVG do strony web. Cykl ten, który składa się z 13 odcinków, jest o tyle ciekawy, że jest praktycznie niezależny od platformy, można prześledzić go na ‘pingwinie’, ‘windzie’ czy na ‘jabłku’ a także pewnie i na telefonie.

Tak więc czym jest SVG oraz jak dodawać SVG do strony web dowiesz się czytając dwa pierwsze wpisy kursu, które pojawiły się na stronie MSDN:

  1. Kurs HTML5 – SVG – Wprowadzenie 
  2. Kurs HTML5 – SVG – Stosowanie na stronach WWW 
Tags: , ,
%d bloggers like this: