KATEGORIA:

SVG – koło, elipsa, prostokąt

svg

CO TO JEST SVG?

SVG (Scalable Vector Graphics) – to skalowalna grafika wektorowa. Gdy zdjęcie o rozdzielczości 100 px na 100px ustawimy jako tło naszej strony, to będzie ono wyglądać źle. Będzie niewyraźne i zobaczymy, że składa się z wielu małych kwadratów. W przypadku grafiki wektorowej jest zupełnie inaczej. Rysunek, który wygląda dobrze w małej rozdzielczości, powiększony wygląda tak samo.

ZALETY UŻYWANIA SVG

  1. Grafikę wektorową można zaprojektować i wykonać w odpowiednim programie a następnie umieścić ją na stronie. Od niedawna pojawiła się jednak możliwość rysowania bezpośrednio na stronie za pomocą 01języka html5.  Największą zaletą takiego rozwiązania jest „odchudzenie” strony. Pliki graficzne ważą, gdy dodamy ich wiele na stronę to mogą ją spowolnić.
  2. Ponadto, w przypadku gdy trzeba poprawić plik, należy otworzyć ponownie program, dokonać zmian i ponownie wgrać go na stronę. Używając svg oszczędzamy czas. A jak wiadomo, czas to pieniądz.
  3. SVG można animować, np. dodać ruch, obrócić, zmieniać kolory w czasie itp.

JAK NARYSOWAĆ KOŁO UŻYWAJĄC SVG?

Zaczynamy pisać nasze koło. Poniżej znajduje się kod wraz z omówieniem.

<svg height="300" width="300">
  <circle cx="150" cy="150" r="100" stroke="gray" stroke-width="3" fill="lightgray" />
</svg> 

Zaczynamy od znaczników svg. W nich określamy wysokość i szerokość elementu svg, w którym będzie znajdować się nasze koło.

Element circle jest używany do narysowania koła.

cx określa przesunięcie środka koła względem osi x – w poziomie, natomiast cy przesunięcie środka koła względem osi y – w pionie.

r określa promień koła w pikselach.

stroke to kolor obrysu, stroke-width to grubość obrysu, a fill to kolor wypełnienia koła.

Jeżeli nie określimy cx i cy, wtedy środek znajdować się będzie w pozycji 0, 0, czyli tak jak na poniższym przykładzie.

circle 0

To wszystko co jest potrzebne do narysowania koła na stronie internetowej.

JAK NARYSOWAĆ PROSTOKĄT UŻYWAJĄC SVG?

rect

Prostokąt rysujemy w sposób zbliżony do koła.

Zamiast circle używamy rect, zamiast cxcy używamy x i y. W przypadku prostokątów należy jednak określić szerokość i wysokość elementu svg a także elementu rect. Jeśli pominiemy to drugie, prostokąt nie zostanie wyświetlony.

Poniżej znajduje się odpowiedni kod html:

<svg width="400" height="130">
  <rect x="50" y="10" width="300" height="100" fill="green" stroke="black" stroke-width="3"/>
</svg>

JAK NARYSOWAĆ ELIPSĘ UŻYWAJĄC SVG?

ellipseW przypadku elipsy, do standardowych cech jak: cxcy, dodajemy jeszcze rx i ryrx określa promień w poziomie a ry promień w pionie.

Poniżej znajduje się kod elipsy.

 

 

<svg height="140" width="500">
  <ellipse cx="100" cy="80" rx="100" ry="50"/>
</svg>

A tu przykład dwóch elips:

<svg height="100" width="500">
  <ellipse cx="220" cy="50" rx="200" ry="30" style="fill:yellow" />
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:orange" />
</svg>

two_ellipses

CO JEŚLI KOMUŚ NIE WYŚWIETLAJĄ SIĘ ELEMENTY SVG?

Niektóre przeglądarki nie wyświetlają elementów svg. Dbając o użytkowników takich przeglądarek zaleca się dodanie takiego zdania: Niestety twoja przeglądarka nie wyświetla elementu svg.

Poniżej prezentuję, w którym miejscu umieścić tą informację.

<svg height="300" width="300">
  <circle cx="150" cy="150" r="100" stroke="gray" stroke-width="3" fill="lightgray" />
	Niestety twoja przegladarka nie wyswietla elementow svg.
</svg> 

Wszystkie te elementy można edytować w arkuszu stylów. Można dowolnie zmieniać im kolory, obramowania, przezroczystość itp.

W następnym wpisie wyjaśnię, jak rysować trójkąty, wielokąty i linie. Zapraszam do lektury.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *