W poprzedniej części został przedstawiony generalny koncept tworzenia grafiki SVG oraz jak zakodować linię i nadać jej inny kolor oraz grubość. W tym artykule zostanie przedstawiony sposób wstawiania do obrazka bardziej skomplikowanych obiektów takich jak koło i kwadrat.
Jednym z podstawowych obiektów jakie można wstawić w SVG to prostokąty. Służy do tego znacznik rect (ang. skrót rectangle). W celu utworzenia obiektu rect należy podać co najmniej jego szerokość width oraz wysokość height. Należy pamiętać, że znacznik rekt należy prawidłowo zamknąć! Najprostszy obrazek, który będzie rysował prostokąt 200 x 100 wygląda następująco:
(2.) W utworzonym obiekcie rect prócz określenia ich szerokości i wysokości został ustalony styl obiektu. W celu ustalenia obramowania obiektu to zasada jest jak w przypadku linii. Kolor obramowania ustala się przy pomocy atrybutu stroke, a szerokość przy pomocy stroke-width. Pojawił się jednak nowy atrybut fill, który odpowiada za określenie koloru wypełnienia obiektu. Wszystkie argumenty stylizujące można określić poprzez CSS.
W przypadku ustawiania pozycji dowolnego obiektu w SVG należy określić argumenty x i y.
Prostokąty w SVG można jeszcze stylizować przy pomocy atrybutów rx oraz ry. Służą one do określania zaokrąglenie rogów. W przypadku, gdy oba atrybuty przyjmują tę samą wartość to wszystkie rogi prostokąta zostaną tak samo zaokrąglone jak na poniższym rysunku:
Jednak w przypadku zmiany wartości jednego z tych atrybutów (lub nawet usunięcia) zaokrąglenie stanie się nieregularne, ponieważ rx określa punkt zaokrąglenie (przesunięcia w poziomie), a ry analogicznie w pionie. Daną zależność można przeanalizować na poniższym rysunku:
Do narysowania koła należy użyć znacznika circle. W tym przypadku pozycjonowanie obiektu odbywa się nieco inaczej niż w przypadku prostokąta. Dla koła należy ustalić dwa argumenty cx i cy, które określają środek rysowanego koła. Natomiast sam promień koła ustala się atrybutem r. Przykładowe fioletowe koło o promieniu 50px wygląda następująco:
W przypadku pominięcia atrybutów cx i cy środek koła zostaje domyślnie ustawiony w punkcie (0, 0)! Ustalenie stylu obiektu odbywa się na tych samych zasadach co w przypadku prostokąta lub lini.
Zwykle o kole mówi się po elipsach jako, że koła są specjalnym przypadkiem elipsy, ale w tym przypadku elipsę tworzy się bardzo podobnie do koła. Znacznik z circle zmienia się na ellipse. Pozycjonowanie obiektu odbywa się ponownie poprzez ustawienie środka obiektu poprzez argumenty cx oraz cy. Różnica polega na określeniu promienia krzywizny. W tym przypadku należy cofnąć się do prostokątów z nieregularnie zakrzywionymi rogami, a konkretniej argumentów rx i ry.
Przykładowo elipsa może wyglądać:
W celu sprawdzenie wiadomości nabytych podczas czytania artykułów postaraj się uzyskać jak najdokładniejsze kopie poniższych rysunków:
W celu sprawdzenia kodu dowolnego rysunku wystarczy zapisać obrazek np. na pulpicie i otworzyć w edytorze tekstu.
Ten obrazek może sprawdzić nieco trudności.
