SVG graf - vektorový obrázok priamo v html kóde

 Chcel som nahradiť komerčnú knižnicu kresliacu grafy v PHP a napadlo ma skúsiť to najskôr vlastnými silami. Ako možnosti mi vyskočili "canvas" zo štandardu HTML5 a SVG. Kým prvé generuje klasické bitmapové "obrázky", to druhé je zaujímavé pre svoju kompatibilitu.

SVG je vektorový formát obrázkov, vyvíjaný W3C (XML zápis), ktorý je tu už cez 20 rokov, webové prehliadače ho preto dobre poznajú. Bol vyvíjaný aj pre web, prehľadným XML zápisom umožňuje vkladanie aj priamo do HTML kódu stránky.

Pre vkladanie do kódu použijeme "svg" tag, rovnako ako prípadného externého do .svg súboru:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="640">
</svg> 

Parameter viewBox nastaví aké súradnice chceme zobraziť. Vieme tak spraviť výsek z obrázku, zoom, alebo upraviť jeho okraje. 

Až po nastavení tohto parametra vie pre width a height parameter prepočítať rozmery.

Táto minimalistická hlavička sa mi osvedčila, plnohodnotnú hlavičku nájdeme napr. tu https://www.w3.org/TR/SVG11/struct.html#NewDocument

Spravme si funkciu pre koláčový graf..

Off topic - špeciálne znaky a diakritika v HTML

Pri výpise textov na web stránkach napríklad cez PHP, prípadne pri písaní blogu občas potrebujem napísať špeciálne znaky, ako tie s diakritikou, či grécke symboly.

Zoznam si budem aktualizovať ak mi nejaké pribudnú (w3c slovníček, zoznam UTF):

(Á) dĺžeň  "acute"  Á  Á
(Č) mäkčeň  "caron"  Č  Č
(ô) vôkáň  "circumflex"  ô
(ä) dvojbodka  "diaeresis"  ä
(Ω) Ω
(μ) μ
(π) π
(€) €
(°) stupeň °