18. Souborové formáty grafických dat - vektorové 1

Opakování

• bitmapová/vektorová grafika - obr.
  • porovnat stažené soubory ssp-reklama.pdf vs png (najít velikost pdf v cm)
• GIMP - bitmapový editor
• otevřít obrázek ssp-reklama.png
• otočit, oříznout, vybrat mag. hůlkou pozadí a odstranit, uložit jako ssp-reklama-final.png
• Excel - Kopírovat jako obrázek - Vzhled jako při tisku

Zápis:

---

18. Grafické souborové formáty - vektory
**vektorový grafický objekt**
- matematicky definovaný obrys s tloušťkou, výplní
- také font = sada písma
Formáty:
- **svg** = základ v XML - možnost vkládání do webové stránky, editor - Inkscape
- **pdf** = bitmapy i vektory - publikační formát pro propagační tisk (brožury, letáky, plakáty apod.)
**Profesionální editační software:** Adobe Illustrator, Corel Draw

---

Teorie

• Vektorová grafika -
  • definuje grafické objekty matematicky (např. souřadnicemi)
  • umožňuje změnu velikosti grafického objektu beze ztráty kvality
  • umožňuje pracovat s každým objektem v obrázku odděleně (např. animace)
  • je náročnější na výpočetní výkon
• formáty pro 2d vektorovou grafiku:
  • svg - formát vektorové grafiky založené na XML - příklad
    • kód je možno vkládat rovnou do webové stránky v HTML
    • podporuje kaskádové styly CSS
    • může obsahovat i bitmapy, text
  • pdf - formát pro publikování grafiky bez ohledu na používaný hw i sw
  • PostScript (*.eps)
  • proprietární formáty (firemní) - viz software níže
• editační software
  • desktop - Adobe Illustrator (*.ai), CorelDRAW (*.cdr), Inkscape (*.svg)
  • online - Canva, Vectr, figma
  • MS Office 202x/365 (obrazce ve Wordu, Excelu, Visio)
  • pdf editory - Adobe Acrobat, ABBYY FineReader

Font (Windows - Přizpůsobení - Písma)

• sada písma - patkové/bezpatkové, standard, tučné, skloněné
• velikost v bodech (pt)
• formáty OpenType (*.otf), TrueType (*.ttf)
• knihovna Google fonts, hledání fontu podle obrázku - např. www
• cvičení - najít font pro nápis Studuj na průmce v obrázku ssp-reklama.png
  • nejprve upravit v GIMPu - viz opakování

SVG v textovém editoru - viz tutorial

• teorie - definice bodu v ploše (2 rozměry), úsečky (2 body)
• úsečka - definovaná 2 body
• obdélník - souřadnice horního levého rohu, šířka, výška - Try it yourself - měnit parametry, průhlednost (opacity), styl také pomocí css
• kruh - souřadnice středu, poloměr
• cesta (path) - komplexní tvary včetně křivek - move to, line to, ...
• text
• test importu do Inkscapu - zkopírovat svg kód ze stránky do souboru test_importu.svg přes VSC a načíst v Inkscapu (viz dále)

Inkscape - freeware editor svg - www

• otevřít test_importu.svg
• pracovní plocha - souřadnicový systém x, y
• Soubor - Vlastnosti dokumentu
  • Display - formát
  • Mřížky - vytvořit nové
  • editace kódu XML přes Upravit - Editor XML
• Práce s objekty - otevřít Stavebnice.svg
  • výběr, přesun, kopie, velikost (Shift, Ctrl), otáčení
• Kreslení - geometrie objektů:
  • úsečka
    • Nástroj pero nebo tužka, sledovat parametry nahoře a nápovědu dole, s Ctrl skok po úhlu
    • Editace XML vybraného objektu - Upravit - Editor XML
  • obdélník
    • nahoře zaoblení rohů, s Ctrl čtverec, Shift symetrie k počátku
  • kruh
• styl (vzhled) objektů
  • tah (obrys, stroke) - tloušťka (dvojklik dole pod paletou), barva (pravé tl. na paletě)
  • výplň (fill) - barva (levé tl. na paletě), gradient, bitmapa, text
  • viditelnost - Vrstva - Layers and Objects
• Soubor - Uložit jako - Prosté svg
  • analyzovat v VSC
  • otevřít ve web. prohlížeči
• Publikování do formátu PDF - převést texty na cesty, spadávka, rozlišení bitmap
• Další funkce
  • Export do bitmapy - Soubor - Export
  • Rozšíření - Vykreslit - Čárový kód - QR kód

Cvičení - tangram.svg