Wystarczy Notatnik
SVG (Scalable Vector Graphics) to aplikacja XML służąca do tworzenia grafiki statyczej i dynamicznej. Wektorowe obrazy są odczytywane przez Mozillę, Firefoksa i Operę. Użytkownicy Internet Explorera muszą natomiast zainstalować odpowiedniego plug-ina (
patrz:
ramka “Więcej informacji”). Istotną cechą SVG jest edytowalność pliku opisującego obraz – da się go zmodyfikować choćby za pomocą windowsowego Notatnika.
Zbiór SVG może być dokumentem samodzielnym, ale wolno nam też osadzić go w innym dokumencie XML (np. w XHTML). W pierwszym wypadku plikowi SVG nadajemy rozszerzenie.svg. W drugim – deklarujemy w zbiorze XHTML nazwę przestrzeni http://www.w3.org/2000/svg. Następnie używamy znaczników definiujących grafikę lub przygotowujemy oddzielny dokument SVG i wczytujemy go za pomocą tagów img ,
object
lub embed .
Oto struktura samodzielnego zbioru opisującego grafikę wektorową:
<?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 >
…
</svg>
Na początku umieszczamy deklarację dokumentu XML. Następnie wpisujemy identyfikatory, dzięki którym definiujemy język i składnię SVG zastosowaną w dokumencie. Na koniec wstawiamy główny element
<svg>
– tu właśnie umieszczamy podelementy i atrybuty opisujące grafikę.
Pierwszy obrazek
Najważniejszym elementem w dokumencie SVG jest znacznik
<svg>
– kontener do przechowywania grafiki. Jego podstawowe atrybuty to:
Przygotujmy nasz pierwszy samodzielny plik SVG, który później osadzimy w dokumencie XHTML. Nadamy mu nazwę
obraz1.svg
(zbiór zamieszczamy na płycie dołączonej do CHIP-a). Na początek narysujemy prostokąt, wypełniający całkowicie płótno.
<svg width=”305″ height=”305″ >
<rect width=”300″ height=”300″
style=”fill:red;
stroke-width:5px;
stroke:black;” />
</svg>
| Zalety grafiki SVG |
|
|
W języku SVG zdefiniowano kilka elementarnych figur geometrycznych i kształtów. Są nimi:
rect
(prostokąt),
circle
(koło),
ellipse
(elipsa),
polygon
(wielokąt),
line
(linia),
polyline
(linia łamana) oraz
path
(ścieżka).
Jak widać, sięgnęliśmy po element <rect>. Za pomocą atrybutów width i
height
określiliśmy szerokość i wysokość prostokąta. Dzięki stylom CSS zdefiniowaliśmy natomiast kolor wypełnienia (
fill:red
) oraz grubość i kolor obramowania (
stroke-width:5px, stroke:black
).
Z właściwości stylów w SVG korzystamy na kilka sposobów: poprzez zastosowanie właściwości jako atrybutów elementów SVG, dzięki użyciu właściwości wraz z wartością (
nazwa:wartość
) albo w postaci wartości atrybutu style. Wolno nam też zdefiniować wewnętrzny arkusz stylów CSS. Odwołujemy się wówczas do elementu <style>, np.:
<style type=”text/css”>
<![CDATA[ text { fill: white; } ]]>
</style>
Zakończmy już sprawę prostokąta. Dodajmy jeszcze tylko, że element <rect> ma atrybuty rx i
ry
, za pomocą których zaokrąglimy wierzchołki figury. Przykład wykorzystania atrybutów prezentuje plik obraz1a.svg .
Owale, kreski i łamańce
Teraz umieścimy na prostokącie kilka kół o różnym stopniu przezroczystości (
obraz2.svg
):
<circle cx=”50″ cy=”50″ r=”40″ style=”fill:green;
fill-opacity:1.0″/>
<circle cx=”150″ cy=”50″ r=”40″ style=”fill:green;
fill-opacity:0.5″/>
<circle cx=”250″ cy=”50″ r=”40″ style=”fill:green;
fill-opacity:0.2″/>
Do rysowania koła służy znacznik <circle>. Ma on trzy podstawowe atrybuty:
cx
,
cy
oraz r. Pierwsze dwa definiują współrzędne środka koła, a ostatni określa długość promienia. Dodatkowo zastosowaliśmy właściwości CSS dla nadania koloru oraz stopnia przezroczystości figury. Skorzystaliśmy z właściwości fill-opacity z wartością od
0.0
(całkowita przezroczystość) do
1.0
(brak przezroczystości). Podobnie rysujemy elipsę. Służy do tego znacznik <ellipse>. Jego atrybuty cx i
cy
wskazują środek figury. Teraz jednak podajemy jeszcze dwie wartości:
rx
i ry. Określają one długość półosi poziomej i pionowej.
W przypadku wielokąta stosujemy znacznik <polygon> z atrybutem points. Podajemy wówczas pary współrzędnych wierzchołków wieloboku i oddzielamy je od siebie spacją. Wartości składające się na każdą parę współrzędnych odseparowujemy za pomocą przecinka. W ten sposób narysujemy trójkąt (
obraz4.svg
):
<polygon points=”50,50 250,100 180,160″
style=”fill:green;” />
Pojedynczą linię tworzymy natomiast dzięki znacznikowi
<line x1=”0″ y1=”0″ x2=”300″ y2=”300″
style=”stroke:black;” />
Atrybuty x1 i
y1
określają położenie początku kreski,
x2
i
y2
– współrzędne jej końca. Punkty te zostaną połączone linią prostą. W naszym przykładowym pliku (
obraz5.svg
) narysowaliśmy przekątną prostokąta. Aby jednak linia była widoczna, musieliśmy także zdefiniować kolor kreski inny niż czerwony.
Pora naszkicować jakiegoś “łamańca”. Ścieżkę tworzymy za pomocą elementu <path>. Jej jedynym atrybutem jest d, któremu przypisujemy różne komendy określające sposób prowadzenia linii. Oto niektóre polecenia:
