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

  <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>
  • Egy <i> vagy <em> vagy <div> tag-et lehet használni a megfelelő ikon megjelenítésére

Szintaktika:

  • <i class="fas fa-user></i> - Kitöltött ikon jelenik meg
  • <i class="fas fa-user></i> - normál ikon jelenik meg
  • <i class="fas fa-user></i> - 'light' stílusú ikon jelenik meg.

Ha egy céges "brand"-et akarunk megjeleníteni, akkor az alábbit használjuk

  • <i class="fab fa-github-square></i> - Egy céges brand-et jelenít meg, négyszögletes keretben.