SVG - budowa pliku

czwartek, 03 maj 2012 10:41 pwimmer
Drukuj

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.