Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

SVG - budowa pliku

Email Drukuj PDF

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.


 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V