Kurz SVG – vyplňování 2.

3. srpna 2004

•

V předchozím článku jsme si probrali základy vyplňování vektorových objektů ve Scalable Vektor Graphics. Tentokrát se budeme věnovat té zajímavější části tématu – přechodům barev, používání textur a nastavování průhlednosti objektů.

Dědičnost atributů

Dědičnost probíhá obdobně jako například u stylů v HTML. Jen si musíte dobře uvědomit, že vyplňování samotné se aplikuje na každý synovský objekt individuálně – nikdy ne na celou skupinu (na nadřazený rodičovský objekt)!

Konstantní barva

Hodnoty barev lze zapisovat v prostoru sRGB – shodně s HTML nebo CSS – například stroke="blue" nebo fill="#FF8080". Norma podporuje i správu barev pomocí ICC profilů.

Přechody barev

Teoreticky definovat přechod barev můžeme třeba následovně: „Mějme dva prostorově oddělené body se dvěma různými barvami. Přechod pak vznikne tím, jak se po spojnici těchto dvou bodů mění (přechází) barva prvního bodu v barvu druhého bodu.“

SVG umožňuje ovšem daleko lepší triky – krom toho, že přechody mohou být lineární nebo kruhové, lze na úsečce mezi krajními definičními body SVG přechodu rozmístit libovolnou posloupnost zlomových (přechodových) barevných bodů a vyrobit si tak třeba duhu. Navíc jsou možné různé způsoby zrcadlení či opakování definované základní posloupnosti.

Přechodový (zlomový) bod – element `stop`

Elementy stop určují barvu ve zlomových bodech a musí být proto v přechodu minimálně dva! Mohou nést následující atributy:

stop-color – barva
stop-opacity – průhlednost (může se libovolně měnit podél přechodu, stejně jako jakýkoli jiný z RGB kanálů!)
offset – definuje umístění bodu na úsečce mezi dvěma hraničními body přechodu, proto bude většinou v rozsahu 0 až 1, respektive 0 až 100 % (pokud nebyl změněn výchozí souřadnicový systém – viz níže)

Lineární přechod – element `linearGradient`

Element linearGradient je používán pro definici lineárního přechodu. Jeho obsahem je sada elementů stop. Může nést následující atributy:

id – jméno pro pozdější odkazování
gradientUnits – (nepovinný) vybere jeden ze dvou možných souřadnicových systémů pro udávání hodnot atributů („x1“, „y1“, „x2“, „y2“) definujících vektor přechodu:
- „userSpaceOnUse“ – použije se aktuální systém souřadnic právě vyplňovaného objektu
- „objectBoundingBox“ – tato výchozí hodnota definuje souřadnicový systém orientovaný uvnitř rámečku ohraničujícího konkrétní objekt, na který se přechod aplikuje – souřadnice (0,0), respektive (0%,0%), jsou v levém horním rohu a (1,1), respektive (100%,100%), v pravém spodním rohu ohraničení vyplňovaného objektu
Podobná konvence se v udávání rozměrů, vztažených k nějakému objektu, opakuje na mnoha místech, dobře si ji zapamatujte!
x1, y1, x2, y2 – (nepovinné) dva páry souřadnic určují úsečku, podél které se přechod vykresluje; výchozí hodnoty: (0,0) a (1,1) – ve většině aplikací je proto ani nebudete muset nastavovat
gradientTransform – (nepovinný) seznam dodatečných souřadnicových transformací, jež se aplikují na přechod
spreadMethod – (nepovinný) určuje opakování nadefinovaného přechodu – 1x, zrcadlení nebo nekonečné opakování – hodnoty: pad (výchozí), reflect, repeat
xlink:href – (nepovinný) odkaz na jiný přechod (můžete tak složit komplexní sekvenci barev z několika jednodušších přechodů)

<?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=“320px“ height=“160px“ viewBox=“0 0 800 400″
     xmlns=“http://www.w3.org/2000/svg“ version=“1.1″>
  <title>5.9.2 Linear gradient paint server</title>
  <g>
    <defs>
      <linearGradient id=“MyGradient“>
        <stop offset=“5%“ stop-color=“#F60″ />
        <stop offset=“95%“ stop-color=“#FF6″ />
      </linearGradient>
    </defs>
    <!– zde je vykreslen prechod –>
    <rect fill=“url(#MyGradient)“ stroke=“black“ stroke-width=“5″
    x=“100″ y=“100″ width=“600″ height=“200″/>
    <!– obrys platna –>
    <rect fill=“none“ stroke=“blue“
          x=“1″ y=“1″ width=“798″ height=“398″/>
  </g>
</svg>

Zobrazení lineárního přechodu (originální SVG, cca 1 kB)

Kruhový přechod – element `radialGradient`

Element radialGradient je používán pro definici kruhového přechodu. Jeho obsahem je sada elementů stop. Může nést následující atributy:

id – jméno pro pozdější odkazování
gradientUnits – (nepovinný) vybere jeden ze dvou možných souřadnicových systémů pro udávání atributů („cx“, „cy“, „r“, „fx“, „fy“) definujících kružnice přechodu:
- „userSpaceOnUse“ – použije se aktuální systém souřadnic právě vyplňovaného objektu
- „objectBoundingBox“ – tato výchozí hodnota definuje souřadnicový systém orientovaný uvnitř rámečku ohraničujícího konkrétní objekt, na který se přechod aplikuje – souřadnice (0,0), respektive (0%,0%), jsou v levém horním rohu a (1,1), respektive (100%,100%), v pravém spodním rohu ohraničení vyplňovaného objektu
cx, cy, r – (nepovinné) definují vnější, největší kružnici v přechodu; výchozí hodnoty: 50%
fx, fy – (nepovinný) středový bod přechodu, kterému odpovídá přechodový bod na 0%; výchozí hodnota = „cx“, „cy“
gradientTransform – (nepovinný) seznam dodatečných souřadnicových transformací, jež se aplikují na přechod
spreadMethod – (nepovinný) určuje opakování nadefinovaného přechodu – 1x, zrcadlení nebo nekonečné opakování – hodnoty: pad (výchozí), reflect, repeat
xlink:href – (nepovinný) odkaz na jiný přechod (můžete tak složit komplexní sekvenci barev z několika jednodušších přechodů)

<?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=“320px“ height=“160px“ viewBox=“0 0 800 400″
     xmlns=“http://www.w3.org/2000/svg“ version=“1.1″>
  <title>5.9.3 Radial gradient paint server</title>
  <g>
    <defs>
      <radialGradient id=“MyGradient“
          gradientUnits=“userSpaceOnUse“
          cx=“400″ cy=“200″ r=“300″ fx=“400″ fy=“200″>
        <stop offset=“0%“ stop-color=“red“ />
        <stop offset=“50%“ stop-color=“blue“ />
        <stop offset=“100%“ stop-color=“red“ />
      </radialGradient>
    </defs>
    <!– vykresleni prechodu zde –>
    <rect fill=“url(#MyGradient)“ stroke=“black“ stroke-width=“5″
          x=“100″ y=“100″ width=“600″ height=“200″/>
    <!– obrys platna –>
    <rect fill=“none“ stroke=“blue“
          x=“1″ y=“1″ width=“798″ height=“398″/>
  </g>
</svg>

Zobrazení kruhového přechodu (originální SVG, cca 2 kB)

Vzorky alias textury

Element pattern slouží k vyplnění dané plochy předdefinovaným grafickým prvkem, který je pravidelně rozmnožen (replikován) s konstantním opakováním podél obou os (X, Y) tolikráte, aby vyplnil celou definovanou plochu. Může nést následující atributy:

patternUnits – (nepovinný) vybere jeden ze dvou možných souřadnicových systémů pro atributy („x“, „y“, „width“, „height“) definující replikovaný vzorek:
- „userSpaceOnUse“ – použije se aktuální systém souřadnic právě vyplňovaného objektu
- „objectBoundingBox“ – tato výchozí hodnota definuje souřadnicový systém orientovaný uvnitř rámečku ohraničujícího konkrétní objekt, na který se přechod aplikuje – souřadnice (0,0), respektive (0%,0%), jsou v levém horním rohu a (1,1), respektive (100%,100%), v pravém spodním rohu ohraničení vyplňovaného objektu
patternContentUnits – (nepovinný) definuje souřadnicový systém pro obsah vzorku (pokud byste současně nadefinovali i viewBox, bude patternContentUnits ignorován), význam hodnot viz atribut patternUnits
patternTransform – (nepovinný) seznam dodatečných souřadnicových transformací, jež se aplikují na texturu
xlink:href – (nepovinný) odkaz na jinou texturu (můžete tak složit komplexní texturu z několika jednodušších)

<?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=“320px“ height=“160px“ viewBox=“0 0 800 400″
     xmlns=“http://www.w3.org/2000/svg“ version=“1.1″>
  <title>5.10 Ukazka vzorku</title>
  <defs>
    <pattern id=“TrianglePattern“ patternUnits=“userSpaceOnUse“
             x=“0″ y=“0″ width=“100″ height=“100″
             viewBox=“0 0 10 10″ >
      <path d=“M 1 1 L 9 1 L 5 9 z“ fill=“red“ stroke=“blue“ />
    </pattern>
  </defs>
  <!– elipsa vyplnena vzorkem –>
  <ellipse fill=“url(#TrianglePattern)“
           stroke=“violet“ stroke-width=“5″
           cx=“400″ cy=“200″ rx=“350″ ry=“150″ />
  <!– obrys platna –>
  <rect fill=“none“ stroke=“blue“
        x=“1″ y=“1″ width=“798″ height=“398″/>
</svg>

Zobrazení SVG textury (originální SVG, cca 1 kB)

Průhlednost objektu a skupiny

Atribut „opacity“ určuje celkovou průhlednost jednoho prvku nebo celé skupiny – lze jej přidat například i do elementu g. Existuje ovšem zásadní rozdíl mezi průhlednostmi popsanými v předchozích článcích a touto, určenou v atributu „opacity“. Zatímco totiž ty předcházející se projevily ihned v místě zápisu v bezprostřední akci vykreslení, tuto můžeme chápat jako jakýsi postprocessing (následné zpracování). Teprve až poté, co je vykreslen celý objekt nebo skupina, je pomocná grafická paměť sloučena s pozadím s přihlédnutím k hodnotě „opacity“. Pro lepší pochopení doporučuji znovu prostudovat zobrazovací a vykreslovací model SVG.

<?xml version=“1.0″ standalone=“no“?>
<!DOCTYPE svg PUBLIC „-//W3C//DTD SVG 20010904//EN“
  „http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd“>
<svg width=“320px“ viewBox=“0 0 1200 350″
     xmlns=“http://www.w3.org/2000/svg“>
  <title>5.11 Vliv atributu ‚opacity‘ na skupinu</title>
  <rect x=“100″ y=“100″ width=“1000″ height=“150″ fill=“blue“ />
  <!– cervene kruhy se zvetsujici se pruhlednosti –>
  <circle cx=“200″ cy=“100″ r=“50″ fill=“red“ opacity=“1″ />
  <circle cx=“400″ cy=“100″ r=“50″ fill=“red“ opacity=“.8″ />
  <circle cx=“600″ cy=“100″ r=“50″ fill=“red“ opacity=“.6″ />
  <circle cx=“800″ cy=“100″ r=“50″ fill=“red“ opacity=“.4″ />
  <circle cx=“1000″ cy=“100″ r=“50″ fill=“red“ opacity=“.2″ />
  <!– nasleduje demonstrace ‚opacity‘ na prvku ‚g‘ –>
  <g opacity=“1″ >
    <circle cx=“182.5″ cy=“250″ r=“50″ fill=“red“ opacity=“1″ />
    <circle cx=“217.5″ cy=“250″ r=“50″ fill=“green“ opacity=“1″ />
  </g>
  <!– zde SPRAVNE MUSI zeleny kruh zcela vyriznout cerveny –>
  <g opacity=“.5″ >
    <circle cx=“382.5″ cy=“250″ r=“50″ fill=“red“ opacity=“1″ />
    <circle cx=“417.5″ cy=“250″ r=“50″ fill=“green“ opacity=“1″ />
  </g>
  <!– zeleny kruh umisten NAD cervenym –>
  <g opacity=“1″ >
    <circle cx=“582.5″ cy=“250″ r=“50″ fill=“red“ opacity=“.5″ />
    <circle cx=“617.5″ cy=“250″ r=“50″ fill=“green“ opacity=“.5″ />
  </g>
  <!– zeleny kruh umisten POD cervenym –>
  <g opacity=“1″ >
    <circle cx=“817.5″ cy=“250″ r=“50″ fill=“green“ opacity=“.5″ />
    <circle cx=“782.5″ cy=“250″ r=“50″ fill=“red“ opacity=“.5″ />
  </g>
  <!– zde SPRAVNE MUSI zeleny kruh zcela vyriznout cerveny –>
  <g opacity=“.5″ >
    <circle cx=“982.5″ cy=“250″ r=“50″ fill=“red“ opacity=“.5″ />
    <circle cx=“1017.5″ cy=“250″ r=“50″ fill=“green“ opacity=“1″ />
  </g>
  <!– obrys platna –>
  <rect x=“2″ y=“2″ width=“1196″ height=“346″
        fill=“none“ stroke=“blue“ />
</svg>