SVG grafika

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:

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.

(zveřejněno na stránce Kreslení)