Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

SVG

Autor: Piotr Karpiuk o czwartek 2. Grudzień 2010

Przydatne odnośniki
SVG 1.1 Spec
SVG Tutorial
SVG Examples

Grafika wektorowa 2D w przeglądarce WWW to stary motyw. Podejść mniej lub bardziej udanych było w historii co najmniej kilka:

  • Adobe Flash (od połowy lat 90tych),
  • VML (ang. Vector Markup Language, Microsoft, 1998) – używane w Internet Explorerze,
  • PGML (ang. Precision Graphics Markup Language, Adobe/Sun, 1998),
  • SVG (ang. Scalable Vector Graphics, standard W3C, 2001) – standard W3C implementowany we wszystkich nowoczesnych przeglądarkach z wyjątkiem MSIE (chyba że użyjemy wtyczki takiej jak Google Chrome Frame).

MSIE 9 który pojawi się w 2011 roku będzie już implementował standard SVG.

Prosty przykład pliku SVG (rysunek obok zawiera rezultat):

<?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 xmlns="http://www.w3.org/2000/svg"
 width="467" height="462">
  <rect x="80" y="60" width="250" height="450" rx="20"
      style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
  
  <rect x="140" y="120" width="250" height="250" rx="40"
      style="fill:#0000ff; stroke:#000000; stroke-width:2px;
      fill-opacity:0.7;" />
</svg>

Możliwości SVG:

  • podstawowe figury geometryczne,
  • przekształcenia (obracanie, przekrzywianie, skalowanie),
  • grupowanie (pozwala traktować grupę jak pojedynczy obiekt, np. w przekształceniach),
  • osadzanie obrazów rastrowych,
  • krzywe Beziera,
  • tekst (renderowany wektorowo, a nie jako bitmapa), w tym ułożony wzdłuż dowolnej ścieżki,
  • przezroczystość,
  • gradienty i wzorce tła,
  • animacje,
  • dostęp do drzewa obiektów za pomocą JavaScriptu (ang. DOM scripting), np. w celu obsługi zdarzeń użytkownika takich jak kliknięcie,
  • clipping, maskowanie,
  • filtry,
  • dokument SVG może zawierać metadane czyniące go bardziej dostępnym osobom niepełnosprawnym.

Typowe zastosowania SVG obejmują rysowanie na mapach, wykresy i wizualizację danych.

Sposoby osadzania SVG w HTMLu:

  • Jako znacznik object:
          <object type="image/svg+xml" data="../images/image.svg" width="500px" height="500px">
    	Tutaj tekst wyświetlany gdy przeglądarka nie umie wyświetlić SVG.
          </object >
  • Jako obrazek img (nowszy pomysł, a jego wadą jest to że taki obrazek nie jest osadzany w drzewie DOM dokumentu, co uniemożliwia zastosowanie skryptów):
    <img src="../images/image.svg" alt="opis obrazu"/>
  • Bezpośrednio na stronie:
    <svg xmlns="http://www.w3.org/2000/svg">...</svg>

    Osadzanie kodu SVG bezpośrednio na stronie jest możliwe tylko wtedy gdy strona jest napisana w XHTMLu, a nie HTMLu. Wymaga się zatem aby:

    • serwer udostępniał stronę z typem MIME application/xml lub application/xml+xhtml (UWAGA: MSIE nie wyświetli takiej strony),
    • strona posiadała DOCTYPE wskazujący na XHTML,
    • znacznik svg zawierał atrybut xmlns ze stosowną wartością.

Niektóre biblioteki JS pozwalają na użycie grafiki wektorowej korzystając pod spodem z SVG w przeglądarkach zgodnych ze standardami lub VML pod MSIE (Raphael, SVG Web).

Uwaga: większość przeglądarek obsługujących format SVG nie będzie renderować plików SVG serwowanych z jakimkolwiek innym typem MIME niż image/svg+xml. Najczęściej spotykaną przyczyną niepowodzenia operacji renderowania plików SVG jest to, że są one udostępniane z niewłaściwym typem (np. jako tekst).

Share and Enjoy:
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Śledzik
  • Blip
  • Blogger.com
  • Gadu-Gadu Live
  • LinkedIn
  • MySpace
  • Wykop

Zostaw komentarz

XHTML: Możesz użyć następujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>