SVG

Z Wikiverzity

Přejít na: navigace, hledání

SVG = Scalable Vector Graphics

Obsah

[editovat] Odkazy

[editovat] Předmluva

Na Internetu lze nalézt množství relevantních odkazů, tutoriálů a kurzů na téma SVG. Zde se pokusíme udělat si pokud možno kompaktní přehled o problematice SVG.

[editovat] Úvod

SVG je vektorový grafický formát (viz: Vektorová grafika), zapsaný v XML souboru. DOM (Document Object Model) lze ovládat i programově, takže např. "obrázky" jsou pak interaktivní, je možné vytvářet animace atd.

Základní kostra takového XML dokumentu (vytvoření pracovní plochy) může vypadat například následovně:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="200"
     viewBox="0 0 300 200"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- ZDE BUDE KÓD PRO VYKRESLENÍ VŠECH DALŠÍCH OBJEKTǓ -->
</svg>

V tomto případě základní plocha 300x200 vytváří jakýsi rastr, ve kterém můžeme adresovat jednotlivé body pomocí souřadnic x y:

  • souřadnice x je horizontální a běží zleva doprava od 0 do width=300.
  • souřadnice y je vertikální a běží odshora dolů od 0 do height=300.

viewBox udává jakési okénko, které pak "je vidět"; v tomto případě se posazení okénka 0 0 i jeho velikost 300 200 kryje s celou kreslící plochou.

[editovat] Objekty

  • <path> cesty jsou základním objektem pro tvorbu obrázků.
  • Basic shapes: základní geometrické tvary:
    • obdélník
    • kružnice
    • elipsa
    • úsečka
    • polyčára (lomená čára)
    • uzavřený polygon
  • Texty

[editovat] Path

<path d="data" <!-- definition, vlastní popis_cesty -->
      class="třída" <!-- např. selektor pro styl -->
      style="styl"
      id="identifikace" <!-- např. programově řízená animace, změna pomocí DOM atd. -->
      transform="lineární_transformace" <!-- aplikuje se  na všechny vrcholy -->
/>

Cesta je tvořena ze segmentů, popsaných popmocí příkazů v attributu d:

  • úsečka
  • Bézierova křivka:
    • kvadratická
    • kubická
  • eliptický oblouk

Příkazy jsou jednopísmennými zkratkami. Záleží na velikosti písmen:

  • velké písmeno: absolutní pohyb
  • malé písmeno: relativní pohyb (vzhledem k předchozímsouřadnicím grafického kursoru)

Argumenty v tabulce jsou pro názornost uvedeny jakožto regulární výrazy, tj. znaménko + znamená, že předcházející výraz (případně uzavřený do závorek) se může vyskytovat jednou či vícekrát. (Tj. závorky se tam ve skutečnosti nepíšou!) Ve skutečnosti se mohou vynechat i všechny mezery tam, kde tím nevznikne nejednoznačnost (např.. mezi písmeny a čísly anebo je-li číslo vybaveno znaménkem). A naopak namísto mezer se doporučuje argumenty pro přehlednost oddělovat čárkami, např. x,y.

Úsečky
mnemo abs. rel. arg význam
Lineto L m (x y)+ úsečka na souřadnice x y; příp. další souřadnice pokračují v kreslení lomené čáry
Moveto M m (x y)+ pohyb na souřadnice bez kreslení; případné další souřadnice už jsou ale už jakoby lineto
Horizontal H h x+ horizontální úsečka
Vertical V v y+ vertikální úsečka
(konec abecedy) Z uzavření cesty úsečkovým segmentem


Bézierovy křivky
mnemo abs. rel. args
Quadratic Q q (x1 y1 x y)+ kvadratická = trojice řídících bodů: 1. bod je dán z minula, uveden je 2. a 3. bod
quadraTic T t (x y)+ kvadratická; uveden je jen koncový bod, řídící je dopočítán tak, aby cesta plynule navazovala
Cubic C c (x1 y1 x2 y2 x y)+ kubická = čtveřice řídících bodů: 1. bod je dán z minula, uveden je 2., 3. a 4. bod
S-tvar S c kubická; uveden jen 3. a 4. bod (1. a 2. hladce navazuje)

Navazovat by měly jen kvadratické nebo kubické mezi sebou (tj. Q, T anebo C, S), kombinace nejsou definované.

Eliptické oblouky
abs. rel. arg význam
A a (rx ry rot large? sweep? x y)+ 7 argumentů:
rx první poloměr elipsy
ry druhý poloměr elipsy
rot rotace elipsy vzhledem k ose x
large? flag: bude oblouk > 180° ? 0=kratký, 1=dlouhý
sweep? flag: který ze dvou zbývajících možných oblouků? 0=proti směru, 1=po směru hodinových ručiček
x x-ová souřadnice koncového bodu
y y-ová souřadnice koncového bodu


[editovat] Basic shapes

Lépe a jednoduššeji se s nimi pracuje než s cestami.

Základní geometrické tvary:

  • úsečka (line)
  • obdélník (rectangle)
  • kružnice (circle)
  • elipsa (ellipse)
  • lomená čára (polyline)
  • mnohoúhelník (polygon), což je uzavřená lomená čára
<line x1="od_x" y1="od_y" x2="do_x" y2="do_y" />
<rect x="levý_horní_x" y="levý_horní_y" width="nezáporná_šířka" height="nezáporná_výška" />
<circle cx="střed_x" cy="střed_y" r="poloměr" />
<ellipse cx="střed_x" cy="střed_y" rx="poloosa_x" ry="poloosa_y" /> 
<polyline points="x1,y1 x2,y2 x3,y3" />  <!-- atd., čárky jen pro přehlednost -->
<polygon points="x1,y1 x2,y2 x3,y3" />  <!-- atd., čárky jen pro přehlednost -->


další atributy obdélníku
circle rx="" ry="" zakulacené rohy obdélníku = poloosy elipsy

[editovat] Styly

Objekty můžou mít různé atributy, které je dále specifikují:

Barva: specifikuje se podobně jako v CSS (Cascading Style Sheet):

  • hexadecimální tvar
  • rgb(,,)
Atributy
atributy význam
stroke-width="4" tloušťka stopy (implicitně v pixelech, ale možno i v %)
stroke-linejoin="" napojení: "miter" = ostré, "bevel"=tupé, "round"=zakulacené
stroke-linecap="" ukončení čáry: "butt"=ostré, "square"=čtvercové, "round"=zakulacené
stroke="red" barva stopy (červená)
fill="#ffffaa" výplň RGB (světle žlutá)

[editovat] group

Seskupování objektů do skupin, groups, v XML tvoří uzly, které mohou mít např. společné attributy, např:

<g stroke-width="4">
  <g stroke="red">
    <!-- NĚJAKÉ OBJEKTY -->
  </g>
  <g stroke="#ffaa00">
    <!-- NĚJAKÉ OBJEKTY -->
  </g>
</g>

[editovat] Text

  • Původní SVG podporovalo jen jednořádkový text, nyní i odstavcový text


[editovat] Návody, seriály

  1. 2007-08-02: Vektorový grafický formát SVG
  2. 2007-08-09: Cesty v souborech typu Scalable Vector Graphics
  3. 2007-08-16: Scalable Vector Graphics a základní geometrické tvary
  4. 2007-08-23: Vlastnosti cest a základních geometrických tvarů v SVG
  5. 2007-08-30: SVG - styly výplní a značky připojované ke křivkám
  6. 2007-09-06: Gradientní výplně a textové objekty v SVG
  7. 2007-09-20: Pokročilejší animace ve formátu SVG
  8. 2007-09-27: Podpora skriptování v grafickém formátu SVG
  9. 2007-10-04: Zpracování událostí při skriptování výkresů SVG
  10. 2007-09-13: Grafický formát SVG a animace

[editovat] SVG editory

[editovat] inkscape

[editovat] sodipodi

[editovat] editory s pouze částečnou podporou SVG

[editovat] OpenOffice.org Draw

[editovat] Adobe Illustrator

[editovat] webové editory

[editovat] Litha-Paint


[editovat] Utility a jiné programy pro SVG

[editovat] Konverze formátů

[editovat] Další utility

Debian

  • gimp-svg balík pro otevření SVG souborů v GIMPu
  • libsvg1 parser pro SVG soubory na disku či v bufferu
  • librsvg2-common
  • libsvg-dev parser pro SVG soubory na disku či v bufferu - development
  • librsvg2-ruby1.8 knihovna pro použití renderu RSVG v ruby
  • libsvg-ruby vytváření SVG grafiky v ruby
  • libsvg-perl balík pro generování samostatných i in-line SVG objektů
  • libsvg-graph-perl suita perlovských modulů pro ploting dat (v současné době podporuje plotting jedno-, dvoj- a trojrozměrných dat a grafy N-árních stromů)
  • ksvg prohlížení SVG v KDE, Konqueroru či samostatných aplikacích
  • librsvg2-dev rsvg je renderovací stroj pro SVG
  • librsvg2-2
  • libsvg-tt-graph-perl perlovská knihovna pro kreslení SVG grafů (koláčové, čárové, sloupcové, časové řady)
  • openclipart-svg free SVG obrázky
  • libimage-librsvg-perl rastrování SVG obrázků v perlu
  • pstoedit
  • xfig umí exportovat fig do různých formátů, mj. i SVG
  • sodipodi - byl v sarge (oldstable)

Ubuntu:

(Hledám balíky v Synapticu, řetězec "svg")

  • amaya – umí SVG, MathML aj.
  • pdf2svg – konvertuje PDF na SVG – možnost použití při uploadu na Commons nebo Wikisource
  • libsvg-tt-graph-perl – maluji SVG z perlu
  • libwxsvg-dev – C++ knihovna pro renderování a manipulaci SVG
  • libwxsvg0 – dtto
  • LilyPond – umí ukládat noty v SVG
  • pike – umí grafické formáty, i SVG
  • potrace – vektorizuje bitmapy, primárně do EPS, ale umí i SVG a jiné
  • python-uniconvertor – převádí pbrázky mezi různými formáty, používá sK1 engine (utilita: uniconvertor)
  • rplot – umí exportovat do SVG
  • ROOT http://root.cern.ch má plugin root-plugin-asimage, který ukládá výstupní grafiku v různých formátech, také v SVG
  • scribus – umí načítat i ukládat v SVG
  • skencil – interaktivní vektorový kreslící program, umí import a export do SVG
  • xaralx – umí importovat a exportovat množství grafických formátů, m.j. SVG
  • xaralx-svg – SVG plugin do xaralx

[editovat] Diskuse, fóra

[editovat] Související články

Citováno z „http://cs.wikiversity.org/wiki/SVG“