# SVG alapok: viewbox és útvonal-számok

> Mi az SVG viewbox, hogyan állítod be az SVG-widgetekben, és hogyan épül fel az útvonal (path) számsora.

A bővítmény SVG-widgetei (SVG-alakváltás, SVG-képmaszk, SVG-szűrőeffektusok, SVG torzítás, SVG Blob, SVG-szövegútvonal) mind ugyanazokra az alapokra épülnek: egy rajzterületre (viewbox) és számokkal leírt útvonalakra (path).

## Mi az SVG?

Az SVG vektoros kép. Nem képpontokból áll, hanem számokból és számított adatokból, amelyeket a böngésző valós időben rajzol ki. A szélességet, az átmérőt, a méretarányt mind számok adják meg, ezért az SVG minőségvesztés nélkül nagyítható és kicsinyíthető. Ha a számok változnak, az alakzat is változik: erre épülnek az alakváltó animációk.

## A viewbox

A viewbox az SVG megjelenítési területe, vagyis az a rész, amelyen az elemek látszanak. Úgy képzeld el, mint egy JPG vagy PNG kép szélességét és magasságát, csak itt számokkal adod meg. Az alapértelmezett érték **600 × 600**.

A viewbox beállításai minden SVG-típusú widget **Viewbox** szakaszában megtalálhatók.

![A Viewbox szakasz az SVG-képmaszk widgetben](./kepek/animaciok-es-effektek-svg-viewbox.webp)

*A Viewbox szakasz az SVG-képmaszk widgetben* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

A képen a **Viewbox** szakasz látszik: a **Szélesség** és a **Magasság** alapértéke 600, a **Maximális szélesség** üres.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Szélesség** | A rajzterület szélessége. Együtt a magassággal ez adja a kép szélesség/magasság arányát. | 600 |
| **Magasság** | A rajzterület magassága. | 600 |
| **Maximális szélesség** | A megjelenített SVG legnagyobb szélessége (mint a Kép widgetnél a tartalom szélessége). Eszközönként külön is megadható. | üres |

A szélesség és a magasság összefügg: ha csak az egyiket módosítod, az arány megváltozik. Ha a kész SVG méretét akarod állítani, a **Maximális szélességet** használd.

## Az útvonal (path) számai

Az SVG-alakváltás, az SVG-képmaszk és az SVG-szövegútvonal widget számsorokat használ adatbázisként: a számok az alakzat minden pontjának koordinátáit adják meg.

A **path** az SVG egyik alapelemtípusa (a többi: line, polyline, polygon, circle, ellipse, rectangle, text, image). Az útvonalat számsorként írják le, amely egy zárt vonal pozitív és negatív koordinátáit tartalmazza. Összetettebb útvonal több, külön alakzatot is tartalmazhat, például egy pozitív alakzatot (szív) és egy negatív alakzatot (a közepén lévő kör).

### Hogyan szerezz különböző alakzatokat?

- **Adobe Illustrator**: másold ki az alakzat útvonal-adatát, és illeszd be egy szövegszerkesztőbe.
- **Inkscape**: a projektet exportálhatod SVG formátumban.
- Bármelyik SVG fájlt megnyithatod szövegszerkesztőben, és a benne lévő útvonal-adat szerkeszthető.

A kapott számsort a widget útvonal-mezőjébe (az SVG-alakváltásnál a **Számok**, a képmaszknál az **Egyéni útvonal (számok)**, a szövegútvonalnál az **Egyéni útvonal (d)** mezőbe) másold be.