Podobnie jak w przypadku CSS3, obiekty utworzone za pomocą techniki SVG można transformować.
Przesunięcie
Przyjmijmy, że tworzymy wyjściowy prostokąt o następującym kodzie:
<svg width="500" height="250" xmlns="http://www.w3.org/2000/svg"> <rect height="100" width="250" y="30" x="80" stroke-width="5"
stroke="#000000" fill="#7f3f00"/>
</svg>
Aby zmiany były bardziej widoczne, obejmujemy obszar rysowania obramowaniem.
Przesunięcie o 50 pikseli w prawo i 40 pikseli w dół uzyskamy, dopisując w definicji prostokąta następujący fragment kodu:
transform="translate(50,40)"
Przesunięcie o 30 pikseli w lewo i 20 pikseli w górę uzyskamy, dopisując w definicji prostokąta następujący fragment kodu:
transform="translate(-30,-20)"
Obrót
Obrót o 15 stopni w prawo uzyskamy, dopisując w definicji prostokąta następujący fragment kodu:
transform="rotate(15)"
Jednak trzeba też podać współrzędne środka obrotu, inaczej system przyjmie, że jest nim punkt (0,0). Trzeba go zatem wskazać, badając rozmiary i położenie obiektu.
transform="rotate(15,100,50)"
W poniższym przykładzie obiekt o jaśniejszym kolorze khaki został obrócony za pomocą kodu transform="rotate(45,200,150)", gdzie 200,150 wyznacza środek prostokąta i zarazem środek obrotu.
Naturalnie obrót w lewo wymagałby podania wartości ujemnej kąta obrotu, np.:
transform="rotate(-15,100,50)"
Skalowanie
Powiększenie obiektu można wykonać za pomocą kodu podającego współczynnik skalowania obu wymiarów lub też każdego z wymiarów z osobna, np.
transform="scale(2)"
<svg style="border:solid 1px black" width="500" height="300"
xmlns="http://www.w3.org/2000/svg"> <circle fill="#7f3f00" stroke-width="3" cx="80" cy="80" r="50" stroke="#000000"/> <circle fill="khaki" stroke-width="3" cx="80" cy="80" r="50"
transform="scale(2)" stroke="#000000"/> </svg>
transform="scale(2,1)"
Użycie liczby mniejszej od 1 powoduje zmniejszenie obiektu.
Pochylenie
Pochylenie obiektu może dotyczyć składowej x lub y obiektu. Może to być np. kod:
transform="skewX(45)"
powoduje pochylenie bocznych krawędzi prostokąta.
transform="skewY(45)"
powoduje pochylenie górnej i dolnej krawędzi prostokąta.
<svg style="border:solid 1px black" width="500" height="500"
xmlns="http://www.w3.org/2000/svg"> <rect height="100" width="200" y="50" x="50" stroke-width="5"
stroke="#000000" fill="#7f3f00"/> <rect height="100" width="200" y="150" x="50" transform="skewX(30)"
stroke-width="5" stroke="#000000" fill="khaki"/> <rect height="100" width="200" y="200" x="100" transform="skewY(30)"
stroke-width="5" stroke="#000000" fill="darkkhaki"/> </svg>
Możliwe jest też użycie obu jednocześnie, np.
transform="skewX(30) skewY(20)"
