# Logó és SVG elem

> A Logó elem (főlogó, fejléces és sötét módú változat) és az SVG elem (fájl, dinamikus adat, kód, ikonkészlet) beállításai.

Ez a fejezet két médiaelemet mutat be: a **Logó** elemet az oldal logójához, és az **SVG** elemet vektorgrafikákhoz.

## Logó elem

A **Logó** elem az oldal logóját jeleníti meg. Képes másik logóra váltani a ragadós (görgetéskor rögzülő) fejlécben és sötét módban is.

![A Logó elem beállításai a szerkesztő bal oldali paneljén](./kepek/elemek-6-logo.webp)

*A Logó elem beállításai a szerkesztő bal oldali paneljén* (https://minta-bolt.hu/elemek/?bricks=run)

A képen a **Tartalom** fül látszik: a **Kép kiválasztása** mező, a dinamikus adat és az egyéni URL, a **Szöveg**, a **Betöltés** és a **Link célja** beállítás.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Logó** (kép) | A fő logókép a médiatárból. Hogy retina kijelzőn is éles legyen, a kép mérete legalább kétszerese legyen a logó megjelenített magasságának vagy szélességének. SVG logónál add meg a magasságot és a szélességet pixelben. | Nincs |
| Logó inverz | Másik kép a ragadós, görgetéskor rögzülő fejléchez. Csak akkor jelenik meg, ha a fő logó be van állítva. | Nincs |
| Logó sötét módhoz | Másik kép sötét módhoz. Csak akkor jelenik meg, ha a fő logó be van állítva. | Nincs |
| Magasság | A logó magassága, legfeljebb 400. Csak beállított logónál látszik. | `auto` |
| Szélesség | A logó szélessége, legfeljebb 999. Csak beállított logónál látszik. | `auto` |
| **Szöveg** | Tartalék szöveg arra az esetre, ha nincs logókép, vagy nem érhető el. | A WordPress-beállításokban megadott oldalnév |
| **Betöltés** | A kép betöltése: `eager` (azonnal) vagy `lazy` (késleltetett). | `eager` |
| **Link célja** | Hová mutat a logó. | Az oldal kezdőlapja |

### Logóváltozatok

A logóváltozatok a Bricks 2.4-től érhetők el. A Logó elem beállításaiban adhatod meg őket, miután a fő logó be van állítva.

- **Sötét mód:** ha a sötét mód aktív, és be van állítva a sötét módú logó, a Bricks a fő logót ezzel cseréli le. Ha nincs sötét módú logó, a fő logó marad.
- **Ragadós fejléc:** ha a Logó elem ragadós fejlécben van, és van beállított inverz logó, a fejléc görgetése közben az inverz logó látszik. Ez erősebb a sötét módú logónál: görgetés közben az inverz logó nyer.

## SVG elem

Az **SVG** elem SVG-grafikát jelenít meg fájlból, dinamikus adatból, beillesztett kódból vagy ikonkészletből.

![Az SVG elem beállításai a szerkesztő bal oldali paneljén](./kepek/elemek-6-svg.webp)

*Az SVG elem beállításai a szerkesztő bal oldali paneljén* (https://minta-bolt.hu/elemek/?bricks=run)

A képen a **Forrás** választó, a **Fájl kiválasztása** mező, valamint a méret-, vonal- és kitöltésbeállítások látszanak. A kék üzenet jelzi, hogy a helyi példányon az SVG-fájlok feltöltése nincs engedélyezve.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Forrás** | Honnan jön az SVG: `Fájl`, `Dinamikus adat`, `Kód` vagy `Ikonkészlet`. | `Fájl` |
| Fájl | Az SVG feltöltése a számítógépedről. Csak `Fájl` forrásnál. | Nincs |
| Ikonkészlet | Egy SVG kiválasztása a saját ikonkönyvtáraidból. Csak `Ikonkészlet` forrásnál. | Nincs |
| Dinamikus adat | Az SVG dinamikus adatból. Támogatott mezőtípusok: fájl, kép, SVG-kód, URL. Csak `Dinamikus adat` forrásnál. | Nincs |
| Kód | Az SVG-kód közvetlen beillesztése. Csak a kódfuttatási jogosultsággal rendelkező felhasználóknak érhető el. | Nincs |
| **Magasság** | Az SVG magassága. | Nincs |
| **Szélesség** | Az SVG szélessége. | Nincs |
| **Vonalszélesség** | A vonalak vastagsága, legalább 1. | Nincs |
| **Vonal színe** | Az SVG vonalainak színe. Azokra az elemekre nem hat, amelyeknek `stroke="none"` az értéke. | Nincs |
| **Kitöltés** | Az alakzatok kitöltőszíne. Azokra az elemekre nem hat, amelyeknek `fill="none"` az értéke. | Nincs |
| **Link** | Kattinthatóvá teszi az SVG-t. | Nincs |

A **Kód** forrásnál csak megbízható SVG-kódot illessz be, mert a kód rosszindulatú részeket is tartalmazhat. Érdemes előtte SVG-tisztítóval (például az svgomg.net oldallal) átfuttatni.