Artykuł
11/16/2011

Kurs HTML5 – SVG – Stosowanie na stronach WWW

Autor: Marcin Dembowski

Opublikowano: 2011-11-15

Używając SVG na stronie WWW wzbogacisz jej zawartość poprzez wykorzystanie funkcjonalności, kryjących się w samej składni SVG. Eksperymentując i wykorzystując ten typ danych, warto wiedzieć, w jaki sposób można umieszczać go na stronach.

Przed wykonaniem zadań powinieneś wiedzieć:

czym jest SVG,
jak tworzyć pliki stron HTML i pliki tekstowe w dowolnym edytorze.

Po wykonaniu zadań:

nauczysz się wykorzystywać SVG wewnątrz strony HTML5,
dowiesz się, jak wygląda struktura zewnętrznego pliku SVG,
będziesz potrafił dołączać SVG do strony z zewnętrznego pliku.

Implementacja

Twoim zadaniem będzie utworzenie strony HTML, która za pomocą kilku różnych sposobów pozwoli wyświetlić w przeglądarce rezultat widoczny na Rys. 1*.*

Rys. 1. Rezultat naszego przykładu, wyświetlany na stronie.

Wykorzystanie SVG wewnątrz strony HTML5

W tej części zadania użyjesz kodu SVG wewnątrz strony HTML5.

Utwórz stronę HTML5.

W dowolnym edytorze utwórz nowy dokument HTML i wpisz:

<!DOCTYPE html/>
<html>
    <head>
        <title>SVG na stronie WWW</title>
    </head>
    <body>
        <!-- DALSZY KOD -->
    </body>
</html>

Wstaw kod umożliwiający umieszczenie elementu SVG na stronie.

Zamień linię z komentarzem DALSZY KOD za pomocą następującego kodu:

<svg width="150px" height="150px">
        <!-- SVG -->
</svg>

Wstaw poszczególne elementy.

Zamień linię z komentarzem SVG z powyższego wiersza za pomocą następującego kodu:

<rect x="0" y="0" width="73" height="73" fill="red" stroke="black" />
<rect x="78" y="0" width="73" height="73" fill="green" stroke="black" />
<rect x="0" y="78" width="73" height="73" fill="blue" stroke="black"/>
<rect x="78" y="78" width="73" height="73" fill="yellow" stroke="black" />
<circle cx="75" cy="75" r="40" fill="white" stroke="black" />

Zapisz plik strony pod nazwą svg_wewnatrz.html. Sprawdź, czy źródło strony wygląda tak, jak na Rys. 2.

Rys. 2. SVG wewnątrz strony HTML – kod źródłowy strony, widoczny w Visual Studio.

Otwórz plik w dowolnej przeglądarce, wspierającej osadzanie elementów SVG na stronie (np. Internet Explorer 9). Sprawdź, czy otrzymałeś taki sam rezultat, jak na wzorcowym Rys. 1.

Informacja

Jest to najprostszy przykład dodawania SVG do strony z HTML5. Jest on użyteczny w przypadku, gdy chcesz coś przetestować, ponieważ posiada on wady:

gdy ten sam obrazek jest wyświetlany w kilku miejscach, kod jest powielany, strona przez to może ładować się dłużej,
element ten nie zostanie zapisany w cache przeglądarki, ponieważ za każdym razem będzie ładowany razem ze stroną.

Dołączanie SVG z zewnętrznego pliku

W poprzednim zadaniu dodałeś SVG wewnątrz strony. W tym zadaniu dowiesz się, w jaki sposób przenieść zawartość SVG do osobnego pliku i dołączyć go do strony HTML.

Utwórz strukturę zewnętrznego pliku SVG.

Utwórz nowy plik tekstowy i umieść w nim poniższy fragment kodu:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <!-- SVG -->
</svg>

W miejsce komentarza SVG, wklej następujący kod:

<rect x="0" y="0" width="73" height="73" fill="red" stroke="black" />
<rect x="78" y="0" width="73" height="73" fill="green" stroke="black" />
<rect x="0" y="78" width="73" height="73" fill="blue" stroke="black"/>
<rect x="78" y="78" width="73" height="73" fill="yellow" stroke="black" />
<circle cx="75" cy="75" r="40" fill="white" stroke="black" />

Zapisz plik pod nazwą obrazek.svg. Sprawdź, czy źródło pliku SVG wygląda tak, jak na Rys. 3.

Rys. 3. Kod źródłowy SVG w oddzielnym pliku.

Utwórz stronę, umożliwiającą wyświetlenie pliku SVG na trzy sposoby: jako obrazek, obiekt i element osadzony.

Utwórz teraz kolejną stronę HTML, wykorzystując szablon strony HTML5:

<!DOCTYPE html/>
<html>
    <head>
        <title>SVG na stronie WWW</title>
    </head>
    <body>
        <!-- DALSZY KOD -->
    </body>
</html>

Zamień linię z komentarzem DALSZY KOD za pomocą poniższego kodu. Zawiera on trzy sposoby dołączania zewnętrznego pliku SVG do strony, jako obrazek, obiekt i element osadzony.

<img src="obrazek.svg" width="152" height="152" />
<object data="obrazek.svg" type="image/svg+xml" width="152" height="152">
    TU POWINIEN BYĆ OBRAZEK
</object>
<embed src="obrazek.svg" width="152" height="152" />

Zapisz plik strony pod nazwą svg_dolaczony.html. Sprawdź, czy źródło strony wygląda tak, jak na Rys. 4.

Rys. 4. Źródło strony HTML z dołączonymi plikami SVG.

Otwórz ten plik w przeglądarce Internet Explorer 9. Powinieneś zobaczyć trzy obrazki SVG.

Informacja

Jeżeli Twoja strona ma być wyświetlana w wielu przeglądarkach, w których SVG może nie być obsługiwane, zaleca się, aby dołączać SVG za pomocą elementu object. W jego zawartości, możesz wyświetlić tekst lub inny element HTML, który będzie wstawiony zamiast SVG. W tym przypadku wyświetlony zostanie tekst TU POWINIEN BYĆ OBRAZEK.

Podsumowanie

W tym samouczku nauczyłeś się, jak korzystać z SVG, wykorzystując go wewnątrz strony WWW, utworzyłeś także zewnętrzny plik SVG, który dołączyłeś na trzy sposoby do strony HTML.

W kolejnym samouczku nauczysz się osadzać podstawowe kształty SVG.

Share via