# SVG elem (v4)

> SVG-grafika beillesztése a v4 szerkesztő SVG elemével: kép kiválasztása, link, azonosító és stílus.

Az **SVG** elem a v4 szerkesztőben önálló elemként illeszt SVG-grafikát az oldalra. Az SVG (Scalable Vector Graphics) XML-alapú vektorgrafikus képformátum: veszteség nélkül méretezhető, ezért ikonokhoz, illusztrációkhoz és weboldal-grafikákhoz kiváló. Tipikus felhasználás: infografikák, valamint egyszerű, könnyű képek, amelyek gyorsabbá teszik az oldal betöltését.

## Az elem hozzáadása és törlése

1. A szerkesztőben kattints a **+** gombra, hogy megjelenjenek az elemek.
2. Kattints az **SVG** elemre, vagy húzd a vászonra. Lásd: [Elemek hozzáadása az oldalhoz](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-elemek-hozzaadasa/).

Törléshez jelöld ki az elemet a vásznon, és nyomd meg a billentyűzeten a Delete gombot. Lásd: [Elemek törlése és mozgatása](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-elemek-torlese-es-mozgatasa/).

## Példa: kattintható ikonok egy cselekvésre ösztönző szekcióban

Három SVG-illusztrációt használunk ikonként, és mindegyiket kattinthatóvá tesszük.

1. Hozz létre a vásznon egy rácskonténert egy sorral és három oszloppal. Lásd: [Rácskonténer létrehozása](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-racs-letrehozasa/).
2. Tegyél egy **SVG** elemet a bal szélső oszlopba.
3. A panelen kattints az **SVG kiválasztása** mezőre, és add hozzá az SVG-képet (kiválaszthatsz egyet a médiatárból, vagy feltölthetsz újat).
4. Ismételd meg a többi elemnél is.
5. A kattinthatóvá tételhez jelöld ki például a borítékikont, a panelen a **Link** mellett kattints a plusz jelre, és írd be a `mailto:` linket a szövegmezőbe.
6. Ha új lapon szeretnéd megnyitni, kapcsold be a link beállításainál az új lapon való megnyitás kapcsolóját.

![Az SVG elem Általános füle: SVG-kép, Link, ID, Attribútumok és Megjelenítési feltételek](./kepek/widgetek-svg-tartalom.webp)

*Az SVG elem Általános füle: SVG-kép, Link, ID, Attribútumok és Megjelenítési feltételek* (https://minta-bolt.hu/wp-admin/post.php?post=73&action=elementor)

A képen az **SVG** kép helye, majd a **Beállítások** szekcióban a **Link**, az **ID**, az **Attribútumok** és a **Megjelenítési feltételek** látszik.

## Általános fül

| Beállítás | Mit csinál |
|---|---|
| **SVG** | SVG-fájl hozzáadása: **SVG kiválasztása** (médiatár) vagy **Feltöltés** |
| **Link** | A plusz jelre kattintva linket adhatsz meg; az SVG-re kattintva a látogatók ezt nyitják meg |
| **ID** | Egyedi azonosító, amellyel az elemre hivatkozhatsz vagy linkelhetsz |
| **Attribútumok** | Fejlesztőknek: egyedi attribútumok az elem testre szabásához |
| **Megjelenítési feltételek** | Az elem megjelenítése vagy elrejtése feltételek alapján |

## Stílus fül

A **Stílus** fülön az **Osztályok** alatt a helyi stílus szekciói állnak: **Elrendezés**, **Térközök**, **Méret**, **Pozíció**, **Tipográfia**, **Háttér**, **Szegély**, **Hatások** és **Egyedi CSS**. Ezekről lásd: [Méret](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-meret/), [Pozíció](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-pozicio/), [Tipográfia](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-tipografia/), [Háttér](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-hatter/), [Hatások](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-hatasok/) és [Szegély és lekerekítés](https://hub.hellowp.io/hu/plugins/elementor/stilus-szegely-es-lekerekites/).

Az SVG-fájlok színezhetők, de a fájlnak megfelelő formátumúnak kell lennie: a kitöltés színe legyen tiszta fekete (#000000), és a fájl a kitöltés tulajdonság nélkül legyen exportálva. Ekkor a saját kitöltőszínt a **Stílus** fül **Tipográfia** szekciójának színmezőjével adhatod meg.