Wstawianie wektorowej grafiki SVG w HTML-5

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 17620 razy

Wstęp

Format zapisu danych w grafikach SVG (Scalable Vector Graphics) gwarantuje uzyskanie grafiki o dostosowującej się do rozmiaru strony rozdzielczości. Taką grafikę (jak sama nazwa wskazuje) można skalować w zasadzie do woli, bez utraty danych. Co najważniejsze dane te są zapisywane w formacie XML Extensible Markup Language co oznacza, że format ten odpowiada formatowi zapisu treści stron internetowych w plikach HTML. Dzięki temu, pliki SVG mogą być w HTML-5 zamieszczane na stronie. Możliwość tworzenia grafiki wektorowej daje niekomercyjne i dostępne na wolnej licencji oprogramowanie jakim jest Inkscap-e.

Znacznik <svg> - definiowanie obszaru rysowania SVG

Ten znacznik umożliwia określenie obszaru rysowania grafiki wektorowej na stronie. Oto prosty przykład użycia tego znacznika z podstawowymi jego atrybutami:

<svg width="100px" height="50px" style="margin:auto;display:block; background: yellow;"> <circle cx="25" cy="25" r="20" style="stroke: black; stroke-width: 5; fill: green" /> </svg>

W powyższym kodzie dodałem jeden obiekt graficzny, żeby było wiadomo, że coś się dzieje. Oto efekt działania:

Znacznik <line /> - rysowanie pojedynczej linii w SVG

Znacznik ten wykorzystywany jest do rysowania pojedynczej linii. Oto przykład jego użycia:

<svg width="100px" height="50px" style="margin:auto;display:block"> <line x1="0" y1="2" x2="100" y2="50" style="stroke: rgb(0, 0, 0); stroke-width: 5px" /> </svg>

Rezultat działania:

Znacznik <polyline /> - rysowanie linii łamanej w SVG

Znacznik ten wykorzystywany jest do rysowania linii łamanej. Oto przykład jego użycia:

<svg width="100px" height="50px" style="margin:auto;display:block"> <polyline points="0,0 25,50 50,0 75,50 100,0" style="stroke: #000000; fill: none; stroke-width: 5px" /> </svg>

Rezultat działania:

W powyższym kodzie wyłączone zostało wypełnienie poprzez ustawienie stylu fill na wartość none. Oto co się dzieje, gdy ta wartość zostanie ustawiona na jakiś kolor:

Znacznik <rect /> - rysowanie prostokąta w SVG

Znacznik ten posiada nieco więcej atrybutów określających jego kształt, wszystkie te atrybuty wykorzystane zostały w przykładzie poniżej:

<svg width="100px" height="50px" style="margin:auto;display:block"> <rect width="50" height="50" style="stroke: none; fill: green;" /> <rect x="55" y="5" width="40" height="40" rx="10" ry="10" style="stroke: #000000; fill: none; stroke-width: 5px" /> <rect x="5" y="10" width="90" height="30" rx="10" ry="10" style="stroke: none; fill: blue; opacity: 0.5;" /> </svg>

Rezultat działania kodu:

Znacznik <circle /> - rysowanie koła w SVG

Znacznik ten rysuje koło w następujący sposób:

<svg width="100px" height="50px" style="margin:auto;display:block"> <circle cx="50" cy="25" r="20" style="stroke: black; stroke-width: 5; fill: green" /> </svg>

W powyższym kodzie dodałem jeden obiekt graficzny, żeby było wiadomo, że coś się dzieje. Oto efekt działania:

Atrybuty cx i cy określają położenie środka koła.

Znacznik <ellipse /> - rysowanie elipsy w SVG

Oto przykład kodu rysującego elipsę:

<svg width="100px" height="50px" style="margin:auto;display:block"> <ellipse cx="50" cy="25" rx="90" ry="20" style="stroke: black; stroke-width: 5; fill: green" /> </svg>

Efekt działania:

Znacznik <polygon /> - rysowanie wielokątów w SVG

Składnią znacznik ten przypomina do złudzenia znacznik <polyline>, jednak znacząca różnica jest w działaniu, ponieważ ten znacznik automatycznie zamyka kształt łącząc końce figury geometrycznej, na którą ten się składa. Oto przykład:

<svg width="100px" height="50px" style="margin:auto;display:block"> <polygon points="0,0 25,50 50,0 75,50 100,0" style="stroke: #000000; fill: blue; stroke-width: 5px" /> </svg>

Rezultat działania:

Znacznik <path /> - rysowanie ścieżki w SVG

Ten znacznik to bardziej zaawansowane narzędzie do rysowania nie tylko prostoliniowych obszarów, ale również krzywych Bezier-a. Oto przykład:

<svg width="100px" height="50px" style="margin:auto;display:block"> <path d="M10,10 q50 50 80,10 L90,45 Z" style="stroke: red; fill: blue; stroke-width: 2px" /> </svg>

Wynik działania powyższego kodu:

W kodzie zostały wykorzystane specjalne oznaczenia, które należy interpretować w następujący sposób:

Wyżej wymienione oznaczenia pisane dużą literą określają współrzędne bezwzględne punktu, pisane małą opisują współrzędne względem ostatniego punktu ścieżki.

Znaczniki <text> i <tspan> - wyświetlanie i pozycjonowanie tekstu w SVG

Oto przykład wykorzystania tego znacznika do wstawiania elementów tekstowych:

<svg width="200px" height="100px" style="margin:auto;display:block"> <text x="100" y="25" style="stroke: red; fill: blue; stroke-width: 1px; text-anchor: middle;font-size: 20px;">SVG<tspan dy="-10px">2</tspan> <tspan dy="10px">rządzi!!!</tspan></text> <text style="stroke: none; fill: blue; text-anchor: middle;font-size: 20px;"> <tspan x="100" y="50">Pierwsza linia tekstu</tspan> <tspan x="100" y="75">Druga linia tekstu</tspan> </text> </svg>

Rezultat działania kodu:

SVG2 rządzi!!! Pierwsza linia tekstu Druga linia tekstu

W powyższym kodzie warto zwrócić uwagę na styl text-anchor, który określa położenie punktu zaczepienia (kotwicy) wyświetlanego tekstu. Styl ten może przyjmować następujące wartości:

Znacznik <tpsan> umożliwia pozycjonowanie tekstu w sposób bezwzględny za pomocą atrybutów x i y lub w sposób względny (względem położenia końca ostatniego znaku tekstu) z wykorzystaniem atrybutów dx i dy.

Znacznik <g> - grupowanie elementów SVG

SVG oferuje również możliwość grupowania elementów, dzięki czemu można wykonywać różne operacje np. transformacji grupy elementów znajdujących się w takim znaczniku. Oto prosty przykład zastosowania:

<svg width="100px" height="50px" style="margin:auto;display:block"> <g transform="rotate(30 50,25)"> <rect width="50" height="50" style="stroke: none; fill: green;" /> <rect x="55" y="5" width="40" height="40" rx="10" ry="10" style="stroke: #000000; fill: none; stroke-width: 5px" /> <rect x="5" y="10" width="90" height="30" rx="10" ry="10" style="stroke: none; fill: blue; opacity: 0.5;" /> </g> </svg>

Rezultat działania powyższego kodu:

Znacznik <g> został wykorzystany do zgrupowania i obrócenia grupy obiektów o zadany kąt przy użyciu atrybutu transform ustawionego na wartość rotate(30 50,25), gdzie pierwsza liczba określa kąt obrotu, a dwie ostatnie punkt obrotu zgrupowanych elementów.

Znacznik <defs> - definicje formatowania obiektów w SVG

Znacznik ten przechowuje elementy, których zadaniem jest opisywanie pewnych właściwości elementów, którym dany znacznik został przypisany. Umieszczane są tutaj znaczniki filtrów graficznych, gradientów, kształtów znaczników kończących linie.

Znacznik definicji gradientu liniowego <linearGradient> w SVG

Definicję gradientu należy umieścić wewnątrz znacznika <defs>, oto przykład:

<svg width="100px" height="50px" style="margin: auto; display: block"> <defs> <linearGradient id="linearGradient1" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color: red;stop-opacity:1" /> <stop offset="50%" style="stop-color: blue;stop-opacity:0.5" /> <stop offset="100%" style="stop-color: yellow;stop-opacity:1" /> </linearGradient> </defs> <rect width="100px" height="50px" style="fill: url(#linearGradient1)"> </svg>

Rezultat działania:

W powyższym przykładzie wykorzystane zostały atrybuty x1, y1, x2 i y2 w celu określenia położenia początkowego i końcowego punktu gradientów. Użycie jednostek procentowych sprawia, że odwołuje się do wymiarów obiektu lub grupy obiektów, które tym gradientem zostaną wypełnione. Dużo lepszym sposobem definiowania gradientów jest:

<svg width="100px" height="50px" style="margin: auto; display: block"> <defs> <linearGradient id="linearGradient2"> <stop offset="0%" style="stop-color: red;stop-opacity:1" /> <stop offset="50%" style="stop-color: blue;stop-opacity:0.5" /> <stop offset="100%" style="stop-color: yellow;stop-opacity:1" /> </linearGradient> <linearGradient id="linearGradient3" xlink:href="#linearGradient2" x1="0" y1="0" x2="100" y2="50" gradientUnits="userSpaceOnUse"/> </defs> <rect width="100px" height="50px" style="fill: url(#linearGradient3)"> </svg>

Rezultatem czego jest taki efekt:

Znacznik definicji gradientu promieniowego <radialGradient> w SVG

Gradient ten definiuje się w podobny sposób jak linearGradient:

<svg width="100px" height="50px" style="margin: auto; display: block"> <defs> <radialGradient id="radialGradient1"> <stop offset="0%" style="stop-color: red;stop-opacity:1" /> <stop offset="50%" style="stop-color: blue;stop-opacity:0.5" /> <stop offset="100%" style="stop-color: yellow;stop-opacity:1" /> </radialGradient> <radialGradient id="radialGradient2" xlink:href="#radialGradient1" cx="50%" cy="50%" fx="50%" fy="50%" r="50%"/> </defs> <rect width="100px" height="50px" style="fill: url(#radialGradient2)"> </svg>

Rezultatem czego jest taki efekt:

Znacznik definicji obszaru przycinania <clipPath> w SVG

Znacznik ten umożliwia przycinanie elementów grafiki SVG w następujący przykładowy sposób:

<svg width="100px" height="50px" style="margin:auto;display:block"> <defs> <clipPath id="clipPath1"> <rect x="25px" y="0px" width="50px" height="50px" /> </clipPath> </defs> <g style="clip-path: url(#clipPath1);"> <rect width="50" height="50" style="stroke: none; fill: green;" /> <rect x="55" y="5" width="40" height="40" rx="10" ry="10" style="stroke: #000000; fill: none; stroke-width: 5px" /> <rect x="5" y="10" width="90" height="30" rx="10" ry="10" style="stroke: none; fill: blue; opacity: 0.5;" /> </g> </svg>

Rezultat działania powyższego kodu:

Znacznik definicji filtrów <filter> oraz znaczniki filtrów w SVG

W znaczniku <defs> można również umieścić definicje filtrów graficznych. Oto ich lista:

Oto przykład zastosowania definicji filtru <feGaussianBlur>:

<svg width="100px" height="50px" style="margin:auto;display:block"> <defs> <filter id="blur1"> <feGaussianBlur in="SourceGraphic" stdDeviation="2"> </filter> </defs> <rect x="10" y="10" width="80" height="30" style="stroke: none; fill: green;" filter="url(#blur1)" /> </svg>

Wynik działania powyższego kodu:

Style obramowania elementów SVG

Format SVG umożliwia zaawansowane formatowanie stylu obramowania rysowanych elementów, z tego też względu warto przyjrzeć się stylom, które wpływają na wygląd obramowania elementów graficznych:

Propozycje książek