Zamknij komunikat

Nowy Office 2013
Do góry Skomentuj

05. Jak dodać grafikę SVG na stronę

05. Jak dodać grafikę SVG na stronę

Autor: Adam Stępień Opublikowano: 27 lipca 2011 Odsłon: 16 934

Znając już podstawy SVG, przyjrzyjmy się różnym sposobom dodawania grafiki w tym formacie na stronę internetową. Pierwszy sposób, polegający na bezpośrednim dodaniu SVG do dokumentu, używaliśmy w poprzednim artykule.

Bezpośrednie dodanie SVG do strony HTML5

<!DOCTYPE html>
<html>
<head>   <script>
    function rysujOkrag(evt)
    {
      var okrag= evt.target;
      var promien= okrag.getAttribute("r");

      if (promien== 50)
      {
        promien= 75;
      }
      else
      {
        promien= 50;
      }
    
      okrag.setAttribute("r",promien);
    }

  </script>
</head>

<body>
  <svg width="300px" height="300px">
    <text x="25" y="50" font-size="24">SVG Okrąg</text>
    <text x="25" y="275">Kliknij, aby zmienić rozmiar.</text>
    <circle cx="125" cy="150" r="50"
            fill="green" stroke="yellow" stroke-width="3"
            onclick="rysujOkrag(evt)" />
  </svg>
</body>
</html>

Kod będzie działał w przeglądarce, która obsługuje HTML5 i inline SVG (np. Internet Explorer 9). Metoda pozwala na pełne wykorzystanie mocy drzemiącej w HTML5, ale trzeba liczyć się z tym, że nie wszyscy Internauci korzystają z nowoczesnych przeglądarek. O zapobieganiu i rozwiązywaniu takich problemów powiemy w dalszej części kursu.

Bezpośrednie dodanie SVG do strony XHTML

Gdyby nie HTML5, to pewnie ten sposób podalibyśmy jako zalecany. Wystarczy użyć odpowiedniej przestrzeni nazw i zapisać jako .xhtml. Rozwiązanie będzie działało na przeglądarkach, które obsługują grafikę w formacie SVG. Przede wszystkim jest ich dość sporo, a poza tym obsługa samej grafiki w formacie SVG to nie taka nowość. Przykładowo przeglądarka Opera radzi sobie z tym nieźle już od 4 lat! Tak czy inaczej, ogromna strata to niestety potencjał HTML5, który pozostanie niewykorzystany.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Dodawanie SVG - metoda inline</title>
  <script language="javascript" type="text/javascript">
  <![CDATA[ 
    var mojOkrag;
    var r;
    
    window.onload = function() {
      mojOkrag = document.getElementById('okrag');
      r = mojOkrag.getAttribute("r");
    }
   
    function powieksz() {
      r = 2*r;
      mojOkrag.setAttribute("r",r);
    }
   
    function pomniejsz() {
      r = r/2;
      mojOkrag.setAttribute("r",r);
    }
  ]]>
  </script>
</head>

<body>
  <svg width="200px" height="200px" version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle id="okrag" cx="100" cy="100" r="50"
            style="stroke: black; fill: green;"
            onmouseover="powieksz()" onmouseout="pomniejsz()"/>
    <rect x="0" y="0" width="100%" height="100%" style="fill: none; stroke: green;"/>
  </svg>
</body>
</html>

Grafika SVG w pliku zewnętrznym

Pierwotnym zamysłem format SVG było stworzenie formatu plików grafiki wektorowej z rozszerzeniem .svg. Nic dziwnego, że SVG możemy także wyodrębnić i zapisać jako osobny plik, do którego później można się odwołać.

<?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 width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     onclick="akcja(evt)">

 
  <script language="javascript" type="text/javascript">
  <![CDATA[

    function akcja(evt)
    {
      var mojProst= evt.target;
 
      if (mojProst.id != "zielonyProst")
      {
        alert("Kliknij na prostokącie");
        document.location.reload();
      }
 
      var szer= mojProst.getAttribute("width");
     
      if (szer== 50)
        mojProst.setAttribute("width", 100);
      else
        mojProst.setAttribute("width", 50);
    }
  
  ]]>
  </script>

  <rect x="0" y="0" width="100%" height="100%"
        style="fill: none; stroke: black; stroke-width: 3px;" />
 
  <rect id="zielonyProst" x="100" y="100" width="50" height="50"
        fill="red" stroke="black" />
   
</svg>

Osadzenie pliku SVG na stronie

Metoda prosta w implementacja, choć niosąca ryzyko, że niektóre przeglądarki nie będą obsługiwały danego rodzaju osadzania (jako iframe, embed, object, img i background-image w CSS). Ponadto utrudnione jest oskryptowanie SVG.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head> 
  <title>Osadzanie pliku SVG</title>
</head>

<body>
    <img src="standAlone.png" alt="Alternatywa dla pliku SVG" />
  </object>
</body>
</html>

Wtyczka Adobe SVG

Dla formalności dodamy, że można nie baczyć na obsługę formatu SVG przez przeglądarki i wymusić skorzystanie z wtyczki SVG, takiej jak wydanej przez firmę Adobe. Sposób niezalecany z kilku powodów. Po pierwsze wtyczka może powodować nieprzewidywalne zachowania w przeglądarce. Niektórzy są do tego stopnia ostrożni, że żadnych wtyczek nie instaluję w ogóle. Po drugie, nie mamy pewności jak długo dostawca wtyczki będzie aktualizował i dostosowywał swoje narzędzie do specyfikacji, która jest uaktualniana przez W3C. Wspomniana przed chwilą wtyczka szybko doczekała się swojego końca. Adobe ogłosiło zakończenie wspierania wtyczki, uzasadniając że wiele przeglądarek dobrze radzi sobie z grafiką w formacie SVG i nie ma potrzeby dalej rozwijać wtyczki.

Zobacz również

Komentarze

Nie napisano jeszcze ani jednego komentarza. Twój może być pierwszy.

Dodaj swój komentarz

Zasady publikacji komentarzyZasady publikacji komentarzy

Redakcja CentrumXP.pl nie odpowiada za treść komentarzy publikowanych na stronach Portalu
i zastrzega sobie prawo do usuwania wypowiedzi, które:

  • zawierają słowa wulgarne, obraźliwe, prowokujące i inne naruszające dobre obyczaje;
  • są jedynie próbami reklamowania stron internetowych (spamowanie poprzez umieszczanie linków);
  • przyczyniają się do złamania prawa bądź warunków licencyjnych oprogramowania (cracki, seriale, torrenty itp.);
  • zawierają dane osobowe, teleadresowe, adresy mailowe lub numery GG;
  • merytorycznie nie wnoszą nic do dyskusji lub nie mają związku z tematem komentowanego newsa, artykułu bądź pliku.