SVG

Přidat odkazy
Z Wikiverzity

SVG = Scalable Vector Graphics

Odkazy[editovat]

Podstránky[editovat]

Předmluva[editovat]

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.

Bylo dobré na tomto místě zdůraznit, že vektorová grafika SVG je standardem skupiny W3C a měla by být tudíž preferovaným vektorovým formátem na webu. SVG obrázky se zobrazují bez jakýchkoliv pluginů! V současné době to platí pro všechny významnější www prohlížeče Mozilla Firefox, Google Chrome, Internet Explorer (od verze 9 výše), Opera i Safari.

Úvod[editovat]

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=200.

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.

Objekty[editovat]

  • <path> cesty jsou základním objektem pro tvorbu obrázků.
  • Basic shapes: základní geometrické tvary:
    • úsečka (line)
    • obdélník (rectangle)
    • kružnice (circle)
    • elipsa (ellipse)
    • lomená čára (polyline)
    • mnohoúhelník (polygon)
  • Texty

Path[editovat]

<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 pomocí 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 l (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 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 s (x2 y2 x y)+ 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

Základní tvary[editovat]

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

Styly[editovat]

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á)

group[editovat]

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>

Text[editovat]

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

Návody, seriály[editovat]

  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

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]

PS to SVG[editovat]

Taková utilita dosud, pokud vím, neexistuje. Pracuje se na tom, že to bude umět ghostscript. Takže do té doby se to musí řešit oklikou:

  • PS -> PDF ->SVG
  • PS -> EPS -> SVG

PS to PDF[editovat]

  • balík ghostscript obsahuje utility:
    • ps2pdf12 – PS do PDF 1.2
    • ps2pdf13 – PS do PDF 1.3
    • ps2pdf14 – PS do PDF 1.4
    • ps2pdf – link na ps2pdf* nejvyšší verse

PDF to SVG[editovat]

PS to SVG přes skencil[editovat]

Jako jiná možná posloupnost se používá: 

eps2eps -dNOCACHE file.ps file2.ps
ps2epsi  file2.ps  file3.ps        # problém s boundingboxem
pstoedit -f sk  file3.ps  file.sk  # konverse na Sketch
skconvert  file.sk  file .svg      # z balíku skencil

SVG to PDF[editovat]

PDF to PS[editovat]

Další utility[editovat]

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

Diskuse, fóra[editovat]

Související články[editovat]

Citováno z „https://cs.wikiversity.org/w/index.php?title=SVG&oldid=126961“