MagyarmagyarSVG 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?
Szekció neve “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
Szekció neve “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 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
Szekció neve “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?
Szekció neve “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.
Készült: