¦ Menu sekce ¦ Kontakt ¦ Hledat image
image

SVG grafikastálý odkaz / permalink

22.12.2003

Pokud potřebuji na své stránce něco graficky vyjádřit, používám kreslící program Callisto, jehož výstupem je rastrová grafika. Občas mě napadne, jak by se něco dalo hezky popsat obrázkem, který by se hýbal. Protože žádný software, který by uměl vygenerovat pohyblivou grafiku nemám, začal je zkoumat co je možné použít. Až mi padl do oka článek o rodícím se standardu SVG.

 

Pro představu uvedu příklad:
<svg width="500" height="150">
  <rect x="31" y="38" width="89" height="56"
    style="fill:rgb(192,192,255);stroke:rgb(0,0,128);stroke-width:1"/>
</svg>

Tento kód vykreslí obdélník s modrou výplní:

 

Rozpohybování:
<svg width="500" height="150">
  <rect x="31" y="38" width="89" height="56"
    style="fill:rgb(192,192,255);
    stroke:rgb(0,0,128);
    stroke-width:1">
    <animate attributeName="x"
      begin="0s" dur="5s" fill="freeze"
      calcMode="linear"
      to="267">
    </animate>
    <animate attributeName="y"
      begin="0s" dur="5s"
      fill="freeze" calcMode="linear"
      to="38">
    </animate>
    <animate attributeName="width"
       begin="0s" dur="5s"
       fill="freeze" calcMode="linear"
       to="89">
    </animate>
    <animate attributeName="height"
      begin="0s" dur="5s"
      fill="freeze" calcMode="linear"
      to="56">
    </animate>
  </rect>
</svg>

Tento kód také vykreslí modrý obdélník, ale navíc ho rozpohybuje.

Vypadá to takto:

váš prohlížeč musí podporovat prohlížení SVG grafiky
Pokud nic nevidíte (měli byste vidět modrý obdélník pohybující se zleva doprava 5 sekund), nepodporuje váš prohlížeč zobrazení SVG grafiky. Pro řešení tohoto problému se prosím podívejte na stránku Nezobrazují se mi obrázky SVG.

Nejvíce přesných referenčních informací lze zjistit na stránkách W3C a firmy Zvon.

Dále -> Jak se grafika vytvoří?

Jiné zdroje

 

Viz také
dílna
plánky
DWG soubory

(zveřejněno na stránce image!href eror: has not title!image)

print tisk