Przykład SVG

SVG jest napisany za pomocą XML.

Przykład SVG

Poniższy przykład to prosty przykład pliku SVG. Pliki SVG muszą być zapisywane z rozszerzeniem .svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

Zobacz przykład (tylko dla przeglądarek obsługujących SVG)

(Aby zobaczyć kod źródłowy SVG, otwórz ten przykład, a następnie kliknij prawym przyciskiem myszy w oknie. Wybierz „Zobacz kod źródłowy”.)

Wyjaśnienie kodu:

Pierwszy wiersz zawiera deklarację XML. Proszę zauważyć atrybut standalone! Ten atrybut określa, czy ten plik SVG jest „samodzielny” czy zawiera odniesienia do zewnętrznych plików.

standalone="no" oznacza, że dokument SVG będzie odnosił się do zewnętrznego pliku - w tym przypadku, pliku DTD.

Dwa i trzy wiersze odwołują się do zewnętrznego SVG DTD. DTD znajduje się pod adresem “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”. DTD znajduje się w W3C i zawiera wszystkie dozwolone elementy SVG.

Kod SVG zaczyna się od elementu <svg>, w tym znacznika otwierającego <svg> i znacznika zamykającego </svg>. Jest to element główny. Atrybuty width i height ustawiają szerokość i wysokość tego dokumentu SVG. Atrybut version definiuje używaną wersję SVG, a atrybut xmlns definiuje przestrzeń nazw SVG.

SVG <circle> służy do tworzenia okręgu. Atrybuty cx i cy definiują współrzędne x i y środka okręgu. Jeśli te atrybuty są pomijane, punkt początkowy ustawiany jest na (0, 0). Atrybut r definiuje promień okręgu.

Atrybuty stroke i stroke-width kontrolują sposób wyświetlania konturu kształtu. Ustawiamy kontur kółka na szerokość 2px, czarny obramowanie.

Atrybut fill ustawia kolor wewnętrzny kształtu. Ustawiamy kolor wypełnienia na czerwony.

Zadanie znacznika zamkniętego to zamknięcie elementu SVG i samego dokumentu.

Komentarz:Wszystkie otwarte znaczniki muszą mieć odpowiednie znaczniki zamknięte!