Grafika na stronę WWW

Wstęp

Niepodważalną zaletą grafiki wektorowej SVG jest fakt, że jest ona kompatybilna z HTML, CSS oraz JavaScript. W skrócie oznacza to, że tak dokument można wkleić bezpośrednio na stronę i jego styl automatycznie zostanie dopasowany, a co więcej może być interaktywny. W niniejszym artykule przedstawię jak wstawić grafikę wektorową na stronę, ustawić jej właściwości, a następnie stworzyć prosty skrypt, który wyświetli kolor obiektu po kliknięciu.

Implementacja

Jak już wcześniej wspomniałem grafikę wektorową można wstawić bezpośrednio na stronę. Oznacza to, że poniższy kod:

1. <svg xmlns="http://www.w3.org/2000/svg" width="480" height="240" viewBox="-20 -20 100 60">
2.   <rect x="30" y="30" width="10" height="40" transform="rotate(-100,30,30)" fill="yellow"/>
3.   <rect x="30" y="30" width="10" height="40" transform="rotate(-120,30,30)" fill="orange"/>
4.   <rect x="30" y="30" width="10" height="40" transform="rotate(-140,30,30)" fill="pink"/>
5.   <rect x="30" y="30" width="10" height="40" transform="rotate(-160,30,30)" fill="red"/>
6.   <rect x="30" y="30" width="10" height="40" transform="rotate(-180,30,30)" fill="green"/>
7.   <rect x="30" y="30" width="10" height="40" transform="rotate(-200,30,30)" fill="blue"/>
8.   <rect x="30" y="30" width="10" height="40" transform="rotate(-220,30,30)" fill="brown"/>
9.   <rect x="30" y="30" width="10" height="40" transform="rotate(-240,30,30)" fill="black"/>
10. </svg>

Można wstawić bezpośrednio do kodu strony co spowodowuje wyświetlenie obrazka na stronie:

Atrybut xlmns określa dokument według, którego ma być parsowany obiekt, ponieważ przeglądarka widząc obiekt SVG nie będzie wiedzieć, że to grafika i zinterpretuje jako kolejny obiekt HTML. Dalsze atrybuty width oraz height są domyślnie określone w px i przekazują przeglądarce informacje jakiej wielkości powinien być obrazek na stronie.

viewBox

Dotychczas nieomawiany atrybut viewBox służy do określenia, która część obrazka ma zostać wyświetlona. Jego wartość składa się z czterech liczb oddzielonych spacją i są domyślnie zapisane w px. Pierwsza dwa z nich określają lewy, górny róg, a drugi prawy, dolny róg wycinanego fragmentu.

W przypadku strony internetowej nieokreślenie atrybutu viewBox może mieć nieoczekiwane skutki. Przeglądarka wyświetli wtedy fragment płótna od punktu (0, 0) do punktu (width, height). Wtedy nie zawsze oznacza, że cały obrazek zostanie wyświetlony jak to jest pokazane na obrazku poniżej:

1. <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160">
2.   <circle cx="100" cy="100" r="100" style="fill:red;stroke:black;stroke-width:4px"/>
3. </svg>

Jednak po dodaniu atrybutu viewBox rysowane koło zostaje prawidłowo przeskalowane tak, aby zmieścić się do przeznaczonego obszaru na stronie internetowej. Dobrą praktyką jest dodawanie drobnego marginesu na boku obrazka, aby wszystkie na pewno zostały wyświetlona prawidłowo.

1. <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="-5 -5 210 210">
2.   <circle cx="100" cy="100" r="100" style="fill:red;stroke:black;stroke-width:4px"/>
3. </svg>

W przypadku, gdy nie zostawi się drobnego marginesu po każdej stronie rysunku mogłoby dojść do sytuacji jak poniżej. Linie zostały delikatnie przycięte, ponieważ prawdziwa szerokość i wysokość obrazka to suma średnicy koła oraz dwóch szerokości czarnej obwódki koła.

1. <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 200 200">
2.   <circle cx="100" cy="100" r="100" style="fill:red;stroke:black;stroke-width:4px"/>
3. </svg>

Prosty skrypt

Zadanie

Załóżmy, że potrzebna jest aplikacja, która po kliknięciu w określony kolor wyświetli jego nazwę. Jako wyjściowy plik graficzny posłuży paleta kolorów przedstawiona na górze strony. Dodatkowo zostanie utworzone specjalne pole, które będzie wyświetlać żądane wartości.

Skrypt

Zadanie jest możliwe do zrealizowania dzięki JavaScript, którego skrypty można umieszczać bezpośrednio w kodzie SVG. Bardzo ważne jest, aby prawidłowo dodać pole tekstowe - musi mieć ono unikalny identyfikator, aby łatwiej było je znaleźć z poziomu kodu. Przypuśćmy, że id to będzie poleTekstowe.

1.   <text x="-20" y="-10" fill="black" font-size="6" id="poleTekstowe">Wybierz kolor</text>

w skrypcie zostanie zadeklarowana funkcja pokazKolor( el ), która z podanego elementu el pobierze kolor wypełnienia fill i wyświetli tę wartość w utworzonym wcześniej polu tekstowym. Funkcja pokazKolor() wygląda następująco:

1.   <script>
2.     function pokazKolor(el){
3.       var obj = document.getElementById("poleTekstowe");
4.       obj.innerHTML = el.getAttribute("fill");
5.     }
6.   </script>

Kod ten należy wstawić najlepiej zaraz po nagłówku SVG, wewnątrz obiektu svg. Następnie do każdego obiektu należy dodać onclick="pokazKolor(this)", aby po kliknięciu w dany obiekt została wywołana funkcja pokazKolor().

Efekt

Jak widać po kliknięciu zaczynają się pojawiać angielskie nazwy użytych kolorów. Pełny kod programu wygląda wtedy następująco:

1. <svg xmlns="http://www.w3.org/2000/svg" width="480" height="240" viewBox="-20 -20 100 60">
2.   <script>
3.     function pokazKolor(el){
4.       var obj = document.getElementById("poleTekstowe");
5.       obj.innerHTML = el.getAttribute("fill");
6.     }
7.   </script>
8.   <text x="-20" y="-10" fill="black" font-size="6" id="poleTekstowe">Wybierz kolor</text>
9.   <rect x="30" y="30" width="10" height="40" transform="rotate(-100,30,30)" fill="yellow" onclick="pokazKolor(this)"/>
10.   <rect x="30" y="30" width="10" height="40" transform="rotate(-120,30,30)" fill="orange" onclick="pokazKolor(this)" />
11.   <rect x="30" y="30" width="10" height="40" transform="rotate(-140,30,30)" fill="pink" onclick="pokazKolor(this)" />
12.   <rect x="30" y="30" width="10" height="40" transform="rotate(-160,30,30)" fill="red" onclick="pokazKolor(this)" />
13.   <rect x="30" y="30" width="10" height="40" transform="rotate(-180,30,30)" fill="green" onclick="pokazKolor(this)" />
14.   <rect x="30" y="30" width="10" height="40" transform="rotate(-200,30,30)" fill="blue" onclick="pokazKolor(this)" />
15.   <rect x="30" y="30" width="10" height="40" transform="rotate(-220,30,30)" fill="brown" onclick="pokazKolor(this)" />
16.   <rect x="30" y="30" width="10" height="40" transform="rotate(-240,30,30)" fill="black" onclick="pokazKolor(this)" />
17. </svg>

Zadanie 1

Napisz plik SVG, który będzie miał pięć kółek o kolorze czerwonym. Po kliknięciu w dowolną lampkę kolor powinien zmienić się na zielony, ale po ponownym na żółty i dopiero po jeszcze jednym na czerwony.

Demo

Poniżej znajduje się przykładowe, gotowe rozwiązanie:

• Kod źródłowy Zadanie 1