Wikiverzita

SVG

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“