Scalable Vector Graphics

Statický obrázek generovaný pomocí SVG jako ukázka. Pro zobrazení originálního obrázku SVG soubor je třeba prohlížeč s přímou podporou SVG a nebo se zásuvným modulem který podporuje prohlížení SVG.

Stejný zmenšený obrázek který demonstruje jak může být u SVG snadno změněna velikost.

SVG (z anglického Scalable Vector Graphics škálovatelná vektorová grafika) je značkovací jazyk a formát souboru, který popisuje dvojrozměrnou vektorovou grafiku pomocí XML. Formát SVG by se měl v budoucnu stát základním otevřeným formátem pro vektorovou grafiku na Internetu. Zatímco pro rastrovou grafiku je na internetu formátů dostatek (např. GIF, PNG a JPEG), otevřený vektorový formát zatím na Internetu chyběl.

SVG definuje tři základní typy grafických objektů:

• vektorové tvary (vector graphic shapes – obdélník, kružnice, elipsa, úsečka, lomená čára, mnohoúhelník a křivka)
• rastrové obrazy (raster images)
• textové objekty

Tyto objekty mohou být různě seskupeny, formátovány pomocí atributů nebo stylů CSS a polohovány pomocí obecných prostorových transformací. SVG též podporuje ořezávání objektů, alpha masking, interaktivitu, filtrování obrazu (konvoluce, displacement mapping, atd…) a animaci. Ne všechny SVG prohlížeče však umí všechny tyto vlastnosti.

[editovat] Jak zobrazit SVG

Pro zobrazení vektorové grafiky na některých webových prohlížečích (např. Windows Internet Explorer) je třeba mít nainstalovaný zásuvný modul, například od firmy Adobe, který je zdarma. Prohlížeče jako Firefox (od verze 1.5) a Opera (od verze 8.0) umí bez dodatečných modulů interpretovat SVG grafiku.

[editovat] Příklady SVG

Příklad obrázku v SVG. Jazyk SVG je aplikací XML, kód je napsán jako normální textový soubor a může být snadno editován.

Příklad obrázku v SVG

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg"
 width="467" height="462">
  <rect x="80" y="60" width="250" height="250" rx="20"
      style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
 
  <rect x="140" y="120" width="250" height="250" rx="40"
      style="fill:#0000ff; stroke:#000000; stroke-width:2px;
      fill-opacity:0.7;" />
</svg>

[editovat] Související články

• Inkscape – open source vektorový grafický editor

[editovat] Externí odkazy

• Kurz SVG – tvorba SVG prakticky (česky)
• Průvodce SVG – teoretický popis SVG (česky)
• Informace o SVG na W3C (anglicky)
• Seznam software s podporou SVG (anglicky)
• Zásuvný modul pro prohlížení SVG od firmy Adobe
• SVG 1.1 Specifikace – technická specifikace formátu, anglicky
• Stránky SVG editoru Inkscape

Tento článek týkající se softwaru je příliš stručný nebo neobsahuje důležité informace. Pomozte Wikipedii tím, že jej vhodně rozšíříte.