SVG/Struktura

Istnieją trzy sposoby na wyświetlenie pliku SVG w internecie:

oddzielny plik, renderowany poprzez przeglądarkę plików SVG
obiekt włączony w zawartość strony internetowej
przestrzeni nazw w dokumencie XHTML.

Plik SVG

Przykład #1.1

<?xml version="1.0" encoding="utf-8" 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" width="250px" height="250px" x="10px" y="10px">

 <rect x="10px" y="10px" width="100px" height="100px"/>

</svg>

Pierwsza linijka, rozpoczynająca dokument, to prolog (instrukcja przetwarzania) dokumentu XML, określająca kolejno: wersję, kodowanie znaków i czy dokument nie odwołuje się do zewnętrznych zasobów. Kolejna określa DTD (Document Type Declaration) jakie ma zostać wykorzystane - w nim określone są wszystkie elementy i atrybuty. Kolejna to element główny <svg> z atrybutami xmlns (eXtensible Markup Language Name Spaces - określa przestrzeń nazw), version (tutaj jest to 1.1) oraz wymiary i położenie.

Plusami pliku SVG jest jego niezależność od strony. Może on być wyświetlony oddzielnie od strony, jako inny dokument. Może być także włączony w stronę WWW za pomocą obiektów.

Obiekt XHTML

Przykład #1.2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
 <head>
  <title>Obiekt SVG</title>
 </head>
 <body>
  <h1>Obiekt SVG</h1>
  
  <div id="svg_object">
   
   <object type="image/svg+xml" data="image.svg"></object>  

  </div>

 </body>
</html>

Pierwsze linijki określają DTD i XMLNS dokumentu. Wewnątrz body znajduje się element object, którego typ MIME to image/svg+xml. Odwołuje się on do pliku image.svg i wyświetla na stronie. Należy zaznaczyć, że zgodnie ze standardem element object powinien znajdować się np. wewnątrz div'a. Taki kod przejdzie walidację (choć mogą wystąpić ostrzeżenia dotyczące kodowania znaków).

Przestrzeń nazw

Przykład #1.3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
 <head>
  <title>Obiekt SVG</title>
 </head>
 <body>
  <h1>Obiekt SVG</h1>
  
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px">   
   <rect x="0px" y="0px" width="100px" height="100px" fill="red" stroke="black" stroke-width="2px"/>
  </svg>

 </body>
</html>

Pierwsze linijki określają DTD i XMLNS dokumentu. Wewnątrz body znajduje się element svg, którego XMLNS to http://www.w3.org/2000/svg (wersja to 1.1). Tworzy on wewnątrz pliku XHTML czerwony kwadrat i wyświetla na stronie. Należy zaznaczyć, że taki może nie działać (nie zadziała np. w Operze 9.62, Firefoxie 3.08 oraz IE 7) i nie przechodzi walidacji (nawet jako XHTML+MathML+SVG).

« Edytory SVG

Spis treści

Spis obiektów »