W grafice wektorowej SVG istnieje obiekt g (ang. group), który służy do grupowania elementów. Znajduje on zastosowanie nie tylko w edytorach graficznych umożliwiających edytowanie wielu obiektów naraz poprzez ich zgrupowanie. Wspomniany obiekt można użyć do utworzenia grupy, a następnie przekształcenia tej grupy pod względem wielkości czy położenia. W ten sposób nie istnieje potrzeba edytowania każdego obiektu oddzielnie i edytowania jego właściwości.
W celu zgrupowania kilku elementów wystarczy utworzyć obiekt g, a następnie pomiędzy elementem początkowym i końcowym wstawić wybrane obiekty. Przykładowo, aby dwie linie tworzące celownik były w grupie wystarczy taki kod:
Wcięcia w kodzie są opcjonalne i nie wpływają w żaden sposób na wyświetlanie tworzonego rysunku. Warto zauważyć, że samo użycie grupy nie powoduje żadnej zmiany w przedstawionych obiektach - są dalej wyświetlane w ten sam sposób. Jednak obie linie są czarne i przydałoby się, aby były nieco grubsze. Użycie grupy ułatwia ustalanie obiektów wewnątrz grupy. Przykładowo, aby linie była narysowane grubszą linią i dalej były czarne można zmienić kod następująco:
Należy jednak pamiętać, że tego typu zamiany spowodują, że po usunięciu grupy obiekty pozostaną niesformatowane. Z tego powodu po utworzeniu grupy i przeniesieniu stylu obiektu do niej należy być przekonanym, że nie zaistnieje potrzeba jej rozbicia, ponieważ bez użycia edytora graficznego może to zająć bardzo dużo czasu.
W celu zmiany wielkości i / lub obrotu obiektu w grafice należy użyć atrybutu transform razem z odpowiednimi właściwościami, które zostały opisane poniżej. Można go użyć do jednego konkretnego obiektu, ale również do grupy obiektów. Jednak wtedy wszystkie podobiekty są traktowane jako jeden obiekt. Przykładowo obrót o 30 stopni nie spowoduje obrotu wszystkich podobiektów grupy wokół ich lewego, górnego rogu, a wokół rogu całej grupy.
W celu przemieszczenia grupy obiektów wystarczy użyć właściwości translate, która przyjmuje dwa argumenty x - przesunięcie w poziomie oraz y - przesunięcie w pionie. Przykładowo w celu przesunięcia obiektu o 30 pikseli w prawo i 10 w dół należy wpisać:
Jak przy każdej wielkości miary istnieje możliwość dopisania jednostki. Domyślnie wartości x i y są wartościami wyrażonymi w pikselach co ułatwia pracę z dokumentem na typowym komputerze. Szary obrazek ma za zadanie pokazać jedynie, że wskaźnik został przesunięty.
Obracanie obiektu nie jest trudne. Wystarczy w atrybucie transform podać właściwość rotate i jeden argument angle, który określa o ile stopni ma zostać obrócony obrazek. Przykładowo w celu obrócenie celownika o 20 stopni wystarczy:
Warto zauważyć, że środek obrotu na obrazku wyżej znajduje się w lewym górnym rogu. Jednym ze sposobów, aby obrazek był wyśrodkowany wokół środka należy użyć polecenia translate w celu odpowiedniego wyśrodkowania obiektu.
Dokumentacja grafiki SVG przewiduje jednak prostsze rozwiązanie, które warto znać. Przede wszystkim funkcja rotate może przyjmować dwa dodatkowe argumenty: cx i cy, które oznaczają środek obrotu obracanego obiektu. W przypadku pokazanego wskaźnika środek znajduje się w punkcie (20, 20), więc kod wygląda następująco:
Z reguły zwykle rozmiar tekstu, elementów rysunku dobiera się w trakcie projektowania. O ile pracuje się samemu wszystkie rysunki będą miały ten sam rozmiar. Jednak kiedy niektóre elementy grafiki są tworzone przez różnych grafików to rozmiary mogą być delikatnie zachwiane. Nie oznacza to jednak, że w celu dołączenia grafiki do innego rysunku trzeba zmieniać wartości wszystkich obiektów (co ręcznie byłoby czasochłonne, a komputer zrobiłby bez mrugnięcia okiem). Wystarczy użyć właściwości scale. Przyjmuje ona jeden argument p, który określa skalę nowego obiektu lub grupy. Można to również stosować w sytuacji kiedy istnieje potrzeba dopasowania rozmiarów obiektów, ale niekoniecznie chce się zmieniać rozmiar każdego obiektu.
Właściwość scale może też przyjmować dwa argumenty. W ten sposób obrazek można zwiększać nieproporcjonalnie. Przykładowo nowy wskaźnik będzie dwa razy mniejszy w pionie, ale trzy razy szerszy:
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.
