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>
- 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.