Plik o rozszerzeniu .svg tworzymy wtedy, gdy chcemy się odwoływać w różnych miejscach do tego samego zewnętrznego pliku - wygodnie jest wówczas przechowywać definicję rysunku w osobnym pliku.
<?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 xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>
Pierwszy wiersz to deklaracja XML z atrybutem standalone="no", który mówi, że dokument odnosi się do zewnętrznego pliku, jakim jest tutaj dokument DTD znajdujący się na serwerze W3C i zawierający dopuszczalne elementy SVG. Drugi i trzeci wiersz zawierają tutaj internetowy adres tego pliku.
Znacznik obejmujący kod rysunku SVG, czyli <svg></svg>, jest element głównym, który zawiera atrybut xmlns z adresem przestrzeni SVG i numerem wersji.
W obrębie znacznika głównego umieszczane są znaczniki poszczególnych elementów rysunku. Przykładowo, znacznik circle w naszym przykładzie zawiera opis okręgu, inne przykłady to rect opisujący prostokąt czy ellipse opisujący elipsę.
Naturalnie w codziennej praktyce nie będziemy ręcznie wpisywać tych wszystkich kodów, lecz posłużymy się edytorem.
Przykładowo, możemy skorzystać z dostępnego online edytora SVG-edit i po sporządzeniu rysunku w trybie wizualnym.
możemy sięgnąć do źródła rysunku (ikona wskazana czerwoną strzałką), by skopiować go przez schowek do źródła redagowanej strony.
