Grafika SVG

Ta strona ilustruje specjalny j臋zyk do tworzenia grafiki: SVG.

Stworzysz prost膮 demonstracj臋, kt贸ra dzia艂a w przegl膮darce Mozilli z obs艂ug膮 SVG.

Informacja: SVG

SVG (Skalowalna Grafika Wektorowa) jest bazuj膮cym na XML-u j臋zykiem do tworzenia grafiki.

Mo偶e by膰 u偶ywana do tworzenia statycznych obrazk贸w, ale tak偶e animacji i interfejs贸w u偶ytkownika.

Podobnie jak inne bazuj膮ce na XML-u j臋zyki, SVG obs艂uguje arkusze styl贸w CSS, dzi臋ki czemu mo偶esz oddzieli膰 styl grafiki od jej zawarto艣ci.

Ponadto, arkusz styl贸w, kt贸rego u偶ywasz w innych j臋zykach znacznik贸w dokumentu, mo偶e wskazywa膰 adres grafiki SVG tam, gdzie potrzebny jest obrazek. Na przyk艂ad, arkusz styl贸w, kt贸rego u偶ywasz w dokumencie HTML mo偶e wskazywa膰 na adres URL grafiki SVG jako warto艣膰 w艂asno艣ci background.

Wi臋cej szczeg贸艂贸w
W trakcie pisania tego kursu (po艂owa 2005) tylko najnowsze wydania przegl膮darek Mozilli posiadaj膮 wbudowan膮 obs艂ug臋 SVG.

Mo偶esz doda膰 wsparcie dla SVG do innych wersji instaluj膮c wtyczk臋 tak膮, jak ta wydana przez Adobe.

Aby dowiedzie膰 si臋 wi臋cej o SVG w Mozilli, zajrzyj na stron臋 SVG w tym wiki.

Zadanie: Demonstracja SVG

Stw贸rz nowy dokument SVG jako czysty plik tekstowy, doc8.svg. Skopiuj i wklej do niego poni偶szy kod, upewniaj膮c si臋, 偶e zaznaczy艂e艣(a艣) ca艂y:

<?xml version="1.0" standalone="no"?>

<?xml-stylesheet type="text/css" href="style8.css"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="600px" height="600px" viewBox="-300 -300 600 600"
  xmlns="http://www.w3.org/2000/svg" version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink">

<title>SVG demonstration</title>
<desc>Mozilla CSS Getting Started - SVG demonstration</desc>

<defs>
  <g id="segment" class="segment">
    <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
    <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
    </g>
  <g id="quadrant">
    <use xlink:href="#segment"/>
    <use xlink:href="#segment" transform="rotate(18)"/>
    <use xlink:href="#segment" transform="rotate(36)"/>
    <use xlink:href="#segment" transform="rotate(54)"/>
    <use xlink:href="#segment" transform="rotate(72)"/>
    </g>
  <g id="petals">
    <use xlink:href="#quadrant"/>
    <use xlink:href="#quadrant" transform="rotate(90)"/>
    <use xlink:href="#quadrant" transform="rotate(180)"/>
    <use xlink:href="#quadrant" transform="rotate(270)"/>
    </g>
  <radialGradient id="fade" cx="0" cy="0" r="200"
      gradientUnits="userSpaceOnUse">
    <stop id="fade-stop-1" offset="33%"/>
    <stop id="fade-stop-2" offset="95%"/>
    </radialGradient>
  </defs>

<text id="heading" x="-280" y="-270">
  SVG demonstration</text>
<text  id="caption" x="-280" y="-250">
  Move your mouse pointer over the flower.</text>

<g id="flower">
  <circle id="overlay" cx="0" cy="0" r="200"
    stroke="none" fill="url(#fade)"/>
  <use id="outer-petals" xlink:href="#petals"/>
  <use id="inner-petals" xlink:href="#petals"
    transform="rotate(9) scale(0.33)"/>
  </g>

</svg>

Stw贸rz nowy plik CSS, style8.css. Skopiuj i wklej do niego poni偶szy kod, upewniaj膮c si臋, 偶e zaznaczy艂e艣(a艣) ca艂y:

/*** SVG demonstration ***/

/* page */
svg {
  background-color: beige;
  }

#heading {
  font-size: 24px;
  font-weight: bold;
  }

#caption {
  font-size: 12px;
  }

/* flower */
#flower:hover {
  cursor: crosshair;
  }

/* gradient */
#fade-stop-1 {
  stop-color: blue;
  }

#fade-stop-2 {
  stop-color: white;
  }

/* outer petals */
#outer-petals {
  opacity: .75;
  }

#outer-petals .segment-fill {
  fill: azure;
  stroke: lightsteelblue;
  stroke-width: 1;
  }

#outer-petals .segment-edge {
  fill: none;
  stroke: deepskyblue;
  stroke-width: 3;
  }

#outer-petals .segment:hover > .segment-fill {
  fill: plum;
  stroke: none;
  }

#outer-petals .segment:hover > .segment-edge {
  stroke: slateblue;
  }

/* inner petals */
#inner-petals .segment-fill {
  fill: yellow;
  stroke: yellowgreen;
  stroke-width: 1;
  }

#inner-petals .segment-edge {
  fill: none;
  stroke: yellowgreen;
  stroke-width: 9;
  }

#inner-petals .segment:hover > .segment-fill {
  fill: darkseagreen;
  stroke: none;
  }

#inner-petals .segment:hover > .segment-edge {
  stroke: green;
  }

Otw贸rz ten dokument w swojej przegl膮darce z obs艂ug膮 SVG. Przesuwaj kursor myszy nad grafik膮.

To wiki nie obs艂uguj臋 SVG na stronach, wi臋c nie jest mo偶liwe pokazanie demonstracji. Grafika wygl膮da mniej wi臋cej tak:

Demonstracja SVG

Uwagi dotycz膮ce tej demonstracji:

  • Dokument SVG posiada odno艣niki do arkusza styl贸w.
  • SVG posiada w艂asne w艂asno艣ci i warto艣ci CSS. Niekt贸re z nich s膮 podobne do w艂asno艣ci CSS dla HTML-a.


Wyzwanie
Zmie艅 ten arkusz styl贸w, aby wewn臋trzne p艂atki zmienia艂y si臋 wszystkie na r贸偶owy, kiedy wska藕nik myszy znajduje si臋 nad jednym z nich, bez zmiany dzia艂ania zewn臋trznych p艂atk贸w.


Co dalej?

Je偶eli masz problemy ze zrozumieniem tej strony, lub je偶eli masz jakie艣 komentarze na jej temat, pom贸偶 nam dopisuj膮c si臋 na stronie Dyskusji.

W tej demonstracji Twoja przegl膮darka, obs艂uguj膮ca SVG, umie ju偶 wy艣wietli膰 elementy SVG. Arkusz styl贸w modyfikuje tylko spos贸b wy艣wietlania element贸w. Tak samo dzieje si臋 z dokumentami HTML i XUL. Mo偶esz te偶 u偶ywa膰 CSS-a w dokumentach XML og贸lnego przeznaczenia, gdzie nie istnieje domy艣lny spos贸b wy艣wietlania element贸w. Nast臋pna strona omawia ten temat: Dane XML