Niech będzie ładny i mały

Pliki zapisane w formacie JPEG albo GIF zajmują sporo miejsca i bywa, że mocno spowalniają ładowanie stron WWW. Czasami nie da się zrezygnować z obrazów rastrowych, ale nieraz można je zastąpić grafiką wektorową - na przykład zgodną ze standardem SVG

Przynajmniej część rastrowych grafik można zastąpić niewielkimi obrazami wektorowymi. Jasne, że nie zawsze da się to zrobić – zdjęcia z uroczystości rozdania Oscarów już raczej na wieki wieków pozostaną zdjęciami. Istnieje jednak wiele przypadków, w których wektorowe grafiki sprawdzą się nie gorzej niż pliki JPEG czy GIF. W artykule pokażę, jak sporządzić takie „lekkie” obrazy. Sięgniemy po SVG.

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:

  • xmln – przechowuje nazwę przestrzeni;
  • version – wskazuje wersję języka SVG;
  • x, y – określają współrzędne poziomą i pionową wierzchołka prostokątnego regionu, w którym zostanie osadzony element opisany między znacznikami <svg>. Jeśli nie podamy tych atrybutów, zostaną im przypisane wartości 0;
  • width, height – szerokość i wysokość elementów <svg> osadzanych w danym miejscu. Wartość 0 uniemożliwia pokazanie elementu. Jeśli atrybuty nie zostaną wpisane, będą traktowane tak, jakby ich wartość wynosiła 100%.
  • 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
  • mały rozmiar obrazów;
  • niezależność od sprzętu, na którym prezentowana jest grafika;
  • obsługa profili kolorów ICC, sRGB, gradientów i maskowania;
  • interaktywność – dzięki aplikacjom XML współpracującym z SVG można sporządzić obrazy aktywne, reagujące na ruch myszy, wskazanie wybranego elementu itp.;
  • skalowalność;
  • łatwość modyfikowania grafiki z zastosowaniem zwykłego edytora tekstu.
  • 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:

  • M – moveto;
  • L – lineto;
  • H – poziome lineto;
  • V – pionowe lineto;
  • C – curveto;
  • Q – kwadratowa krzywa Beziera;
  • A – eliptyczny łuk kąta;
  • Z – zamknięcie ścieżki.
  • Close

    Choć staramy się je ograniczać, wykorzystujemy mechanizmy takie jak ciasteczka, które pozwalają naszym partnerom na śledzenie Twojego zachowania w sieci. Dowiedz się więcej.