Skripta OVI

Formát SVG

Zdroj (anglicky): https://www.w3schools.com/graphics/svg_intro.asp
Reference (anglicky): https://www.w3schools.com/graphics/svg_reference.asp

Scalable Vector Graphics, zkráceně SVG, je formát určený pro zápis 2D vektorové grafiky v jazyku XML (eXtensible Markup Language). SVG umožňuje vytvářet grafické objekty pomocí kódu, které můžeme dále upravovat pomocí Kaskádových stylů (CSS) a ovládat pomocí JavaScriptu. Je to formát používaný pro webové stránky a interaktivní aplikace.

Charakteristika:

  • Vektorová Grafika: SVG používá geometrické objekty a (matematické) vztahy mezi nimi, což umožňuje zachování kvality při libovolném zvětšení nebo zmenšení.
  • Elementy: Každý SVG element reprezentuje grafický objekt nebo jeho vlastnosti. Dokument může obsahovat základní tvary (čtverec, kruh, elipsa), cesty, text, bitmapové obrázky obrázky aj.
  • Webová Integrace: (Vkládání do webu.) SVG můžeme vložit do html stránky skrz element <img> nebo může být vložen přímo do HTML kódu do elementu <svg>.
  • Interaktivita: SVG elementy mají vlastnost id a class, přes které je můžeme pomocí JS nebo JQuery ovládat. SVG elementy zachytávají události myši.
  • Stylování: Grafika v SVG může být stylována pomocí kaskádových stylů (CSS).
  • Text: SVG umožňuje integrovat textové elementy.
  • Otevřený standard: SVG může kdokoliv zdarma využívat.

Vlastnosti SVG:

  • width: šířka celého svg v px
  • height: výška celého svg v px
  • x: horizontální souřadnice levého horního rohu (pokud je vložené do jiného svg nebo podobného objektu) v px
  • y: vertikální souřadnice levého horního rohu (pokud je vložené do jiného svg nebo podobného objektu) v px
  • viewBox: (min x, min y, width, height) čtyři hodnoty udávající rozměry plátna SVG v px
  • xml: verze jazyka xml

Elementy uvnitř SVG:

Vlastnosti elementů:

  • fill: výplň
  • stroke: tah
  • stroke-width: šířka tahu

Příklad SVG dokumentu:

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">   
<rect x="50" y="50" width="200" height="100" fill="blue" />   
<circle cx="150" cy="125" r="30" fill="red" />   
<text x="150" y="190" text-anchor="middle" fill="black">SVG</text> 
</svg>

Tvorba SVG grafiky:

Pomocí kódu ve Visual Studiu
V Adobe Illustratoru

  • Vytvoříme vektorovou grafiku
  • Uložit jako -> SVG Tiny 1.1

Závěr:
SVG je mocný formát pro zobrazení 2D vektorové grafiky na webu. Jeho jednoduchá editovatelnost a podpora interaktivity činí z SVG ideální nástroj pro vývoj webové grafiky a uživatelsky přívětivých aplikací.

admin

,