4.08a. SVG, Canvas, FontAwesome

Az SVG vektor grafikát jelent (Scalable Vector Graphics)

<svg> -konténer, amely tartalmazza a vektorgrafika utasításait

Rajz lehet

circle - kör
ellipse - ellipszis
rect - téglalap alakú terület
polygon - töröttvonal
text - szöveget is lehet írni a területre
Az svg paramétereit lehet akár javascriptből is módosítani

Canvas használata és tulajdonságai

A Canvas a weboldal négyzet alakú területe, amelyre csak javascripttel lehet írni.
A Canvas eredménye pixelgrafikus. A canvas tartalmát menteni lehet png vagy jpg formátumban.
A canvas szöveg megjelenítése gyenge
A canvas nem támogatja az eseményvezérlőket

Font Awesome

Ez egy érdekes library, amely előregyártott vektorgrafikus ikonokat képes megjeleníteni egyszerű szintaktikával. A szolgáltatás weboldala: https://fontawesome.com

Használata

Készíts egy szabadon felhasználható csomagot, amely javascript, css fájlokból áll itt: https://fontawesome.com/start vagy töltsd le innen a kezdő csomagot.
A /css/all.css vagy a /js/all.js fájlt be kell illeszteni az oldal fejlécébe

  <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">

vagy

  <script defer src="/your-path-to-fontawesome/js/brands.js"></script>
  <script defer src="/your-path-to-fontawesome/js/solid.js"></script>
  <script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script>