Beszélgetés a Geminivel hogyan csinálok svg-ből htmlt? Behúzom szövegszerkesztőbe? Pontosan! Az SVG (Scalable Vector Graphics) alapvetően egy XML-alapú szöveges fájl, így a legegyszerűbb módszer valóban az, ha megnyitod egy szövegszerkesztőben (például Jegyzettömb, VS Code vagy Notepad++), és kimásolod a tartalmát. Íme a három leggyakoribb módja annak, hogyan illesztheted be az SVG-t a HTML-kódodba: 1. Az "Inline" módszer (A legrugalmasabb) Ha megnyitod az SVG fájlt egy szövegszerkesztőben, valami ilyesmit fogsz látni: ... . Teendő: Másold ki a teljes taget a tartalmával együtt, és illeszd be közvetlenül a HTML-kódodba oda, ahol látni szeretnéd. Előnye: CSS-sel tudod módosítani a színeit (például fill: red;), és JavaScripttel is könnyen manipulálható. Hátránya: Ha nagyon bonyolult az ábra, a sok kód "összekoszolhatja" a HTML fájlodat. 2. Beillesztés képként Ha nem akarod módosítani az SVG színeit kódból, kezeld úgy, mint egy sima képet: HTML Leírás az ábráról Előnye: Tiszta marad a HTML kódod. Hátránya: Nem tudod CSS-sel átszínezni az egyes részeit. 3. Beillesztés háttérképként (CSS) Ha az SVG-t dekorációs elemként használnád: CSS .ikon { background-image: url('valami.svg'); width: 50px; height: 50px; } Pro tipp: Takarítás előtt! Az olyan grafikai szoftverek, mint az Adobe Illustrator vagy az Inkscape, gyakran rengeteg felesleges metaadatot (szemetet) tesznek az SVG fájlba. Mielőtt behúznád a HTML-be, érdemes átfuttatni az SVGOMG nevű weboldalon. Ez jelentősen csökkenti a fájlméretet és eltávolítja a felesleges kódrészleteket anélkül, hogy a kép változna. Összegezve: Igen, nyisd meg szövegszerkesztővel, keresd meg az elemet, és már mehet is a HTML-be! és akkor ezt hogyan illesztem be elementor-kadence-be háttérképként? Az Elementor és a Kadence esetében kicsit más a megközelítés, mivel ezek vizuális szerkesztők, de mindkettő támogatja az SVG-ket. Itt a trükk az, hogy a WordPress alapértelmezés szerint biztonsági okokból (mivel az SVG kód alapú) tiltja a feltöltést, így ezt először engedélyezni kell. Így csináld lépésről lépésre: 0. Előkészítés: SVG engedélyezése Mielőtt bármit tennél, győződj meg róla, hogy fel tudod tölteni a fájlt: Elementornál: Menj a Beállítások -> Speciális fülre, és keresd az "Enable Unfiltered File Uploads" (Szűretlen fájlfeltöltések engedélyezése) opciót. Vagy használj plugint: Telepítsd a Safe SVG nevű bővítményt. Ez a legbiztosabb módszer. 1. Elementor: Háttérképként beállítás Az Elementorban az SVG-t pont úgy kell kezelned, mint egy JPG vagy PNG képet. Nyisd meg az oldalt az Elementorral. Kattints a Szekció (Section) vagy Oszlop (Column) hat pöttyére a szerkesztéshez. A bal oldali panelen menj a Stílus (Style) fülre. A Háttér (Background) résznél válaszd a "Klasszikus" (ecset ikon) típust. Kattints a kép kiválasztására, és húzd be az SVG fájlt a médiatárba. Fontos: Ha az SVG nem jelenik meg, adj a szekciónak némi "Padding"-et (Belső margót) vagy magasságot az Elrendezés fülön, hogy legyen felülete a háttérnek. 2. Kadence (Gutenberg): Háttérképként beállítás Ha a Kadence blokkokat (Row Layout) használod: Válaszd ki a Row Layout blokkot. A jobb oldali blokk-beállításoknál kattints a Background Settings fülre. Kattints a Select Image gombra, és töltsd fel az SVG fájlt. Itt is érdemes figyelni a Background Image Size beállításra: válaszd a "Cover" vagy "Contain" opciót attól függően, hogyan szeretnéd, hogy kitöltse a teret. Melyiket érdemes választani? (Kód vs. Kép) Módszer Mikor használd? Miért? Fájl feltöltése (képként) Általános háttérnek Egyszerű kezelni, nem kell kóddal bajlódni. Kód beillesztése (HTML blokk) Animált vagy interaktív SVG-nél Ha azt akarod, hogy a háttér színe változzon görgetésre vagy lebegtetésre (hover). Ha a kódot akarod használni háttérként (Pro trükk) Ha nem fájlként akarod feltölteni, hanem a szövegszerkesztőben látott kódot használnád háttérnek (hogy ne kelljen fájlt kezelni), akkor a Szekció Custom CSS részébe (Elementor Pro szükséges hozzá) ezt írhatod: CSS selector { background-image: url("data:image/svg+xml;utf8, "); } Megjegyzés: A kódban az idézőjeleket és a speciális karaktereket néha át kell alakítani (URL encode), ezért kezdőknek a sima fájlfeltöltés sokkal barátságosabb! nem engedi, szóval html-ként kell beraknom Ha nem engedi feltölteni fájlként (vagy nem akarsz plugint telepíteni hozzá), akkor a legtisztább megoldás, ha HTML blokkot használsz. Ekkor az SVG-t nem háttérként definiálod a beállításokban, hanem "belekényszeríted" a szekcióba. Így csináld Elementorban és Kadence-ben: 1. Elementor megoldás (HTML widgettel) Mivel a hátteret nem tudod a megszokott helyen beállítani, trükközni kell: Húzz be egy HTML widgetet a szekcióba (vagy oszlopba). Nyisd meg az SVG fájlt a szövegszerkesztőben, és másold ki a teljes kódot ( ... ). Illeszd be a HTML widgetbe. Hogy háttér legyen: Menj a HTML widget Advanced (Haladó) fülére -> Layout (Elrendezés) -> Position (Pozicionálás). Állítsd Absolute-ra. Állítsd a szélességet (Width) 100%-ra. A Z-indexet állítsd -1-re (így a többi tartalom mögé kerül). A widget Custom CSS részében (ha Pro-d van) vagy az SVG kódján belül állítsd be a magasságot és a színeket. 2. Kadence / Gutenberg megoldás (Custom HTML blokk) Adj hozzá egy Custom HTML (Egyedi HTML) blokkot. Másold bele az SVG kódot. Az SVG tag-en belül (a kód elején) érdemes megadni egy osztályt vagy fix méretet, például: . Ahhoz, hogy ez háttérként viselkedjen, a Kadence sor (Row Layout) beállításaiban a tartalomnak "fölötte" kell lennie. Ez kicsit bonyolultabb CSS nélkül, de a legegyszerűbb, ha az SVG-t egy olyan konténerbe teszed, aminek position: absolute; a stílusa. Miért "nem engedi"? (Gyors hibaelhárítás) Ha a kód beillesztésekor is hibaüzenetet kapsz, vagy eltűnik a kód mentéskor: Biztonsági szűrő: A WordPress néha a HTML blokkból is kivágja az SVG-t biztonsági okokból. Ekkor mindenképp kell egy plugin (pl. Safe SVG), ami "tisztázza" az SVG-t a rendszer előtt. Hiányzó Viewbox: Ha az SVG megjelenik, de csak egy pici pont vagy óriási fekete folt, ellenőrizd a kódban, hogy van-e benne viewBox="0 0 X Y" rész. Ha nincs, nem fog tudni igazodni a képernyőhöz. A leggyorsabb "B-terv" (Ha mégis háttérként kell) Ha nem akarsz kódolni, de a feltöltést nem engedi: Menj az SVGOMG oldalra. Húzd be az SVG-t. Kapcsold be a "Prefer viewBox to width/height" opciót. Töltsd le az új fájlt, és próbáld meg átnevezni .xml-re vagy próbáld újra feltölteni. (Néha a sima fájlnév-probléma akadályozza a feltöltést). Melyik felületen akadsz el pontosan? Ha bemásolod ide az SVG kód elejét, meg tudom mondani, kell-e rajta módosítani, hogy működjön HTML-ként. most meg nem találom a html widget gombot Semmi pánik, az Elementorban néha a nagy választékban elbújik az ember elől, a Kadence-nél (Gutenberg) pedig kicsit más a neve. Így találod meg őket: 1. Ha Elementort használsz: A bal oldali widget-keresőbe ne csak azt írd, hogy "html", hanem figyelj a következőkre: A keresőmezőbe írd be: HTML. Egy szürke ikont kell látnod, amin két kacsacsőr látható: < >. Ha nem találod: Görgess le egészen az "Általános" (General) kategóriáig, ott szokott lenni az ikonok között. Tipp: Ha még mindig nincs meg, próbáld meg frissíteni az oldalt, néha az Elementor hajlamos "elfelejteni" betölteni a widget listát. 2. Ha Kadence / Gutenberg (alapértelmezett szerkesztő): Itt nem "widget"-nek hívják, hanem blokknak. Kattints a bal felső sarokban a kék [+] gombra (Blokk hozzáadása). Írd be a keresőbe: Egyedi HTML (vagy angolul Custom HTML). Ennek is egy < > ikonja van. Hogyan rakd bele a kódot, ha megvan a blokk? Húzd be a HTML blokkot az oldalra. Kattints bele, és látni fogsz egy üres szöveges területet. Másold be az SVG kódot, amit a szövegszerkesztőben látsz (az elejétől az végéig). Kattints az "Előnézet" (Preview) gombra a blokk tetején, hogy lásd, megjelent-e a grafika. Ha háttérnek szánod, de "eltolja" a többi dolgot: Mivel ez most egy külön elem (blokk) és nem valódi háttérbeállítás, a többi tartalom (szöveg, gombok) alá vagy fölé fog kerülni. A legegyszerűbb trükk, hogy ne kelljen CSS-ezni: Ha Elementort használsz, tedd a HTML widgetet közvetlenül a szekció tetejére, majd a Margó (Margin) beállításnál adj neki negatív értéket (pl. -200px alul), így a következő elem "rácsúszik" az SVG-re. Sikerült megtalálnod az ikont? ott van háttérképként, de ki kéne húznom teljes szélességre, és nem úgy viselkedik mint egy sima kép Azért nem viselkedik úgy, mint egy sima kép, mert az SVG-nek nincs fix pixelmérete, és a HTML blokk alapértelmezés szerint csak akkora helyet foglal, amekkora a tartalom. Ahhoz, hogy "kifeszítsd" teljes szélességre és háttérként viselkedjen, bele kell nyúlnunk egy kicsit a kódba. Itt a megoldás, amit a HTML widgetbe/blokkba kell tenned: 1. A kód módosítása Keresd meg az SVG kódod elejét (az 2. A "Kifeszítő" keret Csomagold be az SVG kódodat egy div konténerbe, ami megmondja neki, hogy viselkedjen háttérként. Másold ezt a HTML widgetbe: HTML
...
3. Beállítások az Elementorban / Kadence-ben Ahhoz, hogy ez valóban teljes szélességű legyen: Szekció beállítása: A Szekció (vagy Row Layout) szélességét állítsd Teljes szélességre (Full Width). Oszlopközök: Az oszlopközöket (Column Gap) állítsd Nincs (No Gap) értékre, különben marad egy kis fehér margó a széleken. Pozicionálás: Győződj meg róla, hogy a szekció, amibe a HTML blokkot tetted, "Position: Relative" (ez az alapértelmezett, de ha elcsúszik, érdemes ellenőrizni a Haladó/Advanced fülön). Miért a preserveAspectRatio="none"? Ha ez nincs benne: Az SVG megőrzi az arányait (pl. ha egy négyzet, nem fogja kitölteni a téglalap alakú képernyőt). Ha benne van: Az SVG "nyúlni" fog, hogy pontosan kitöltse a rendelkezésére álló helyet, pont úgy, mint egy háttérkép. Ha a tartalom eltűnt az SVG mögött: Mivel a fenti kódban position: absolute szerepel, az SVG "lebegni" fog. Ha a szövegeid az SVG alá kerültek, kattints a többi widgetre (szöveg, gomb stb.) az Elementorban, és a Haladó (Advanced) -> Z-index mezőbe írj be egy magasabb számot (pl. 10). Így a szöveg "felúszik" az SVG fölé. írd át nekem, hogy teljes szélesség legyen, és használja a teljes magasságot is: Itt a módosított kód. Ahhoz, hogy az SVG valódi háttérként viselkedjen (kifeszüljön és ne maradjanak körülötte üres helyek), három dolgot változtattam meg rajta: Kivettem a fix width="210mm" és height="397mm" értékeket. Hozzáadtam a preserveAspectRatio="none" paramétert, hogy ne tartsa az arányait, hanem kényszerítve töltse ki a HTML tárolót. Becsomagoltam egy olyan CSS-keretbe, ami rögzíti a háttérben. Másold be ezt a teljes kódot a HTML widgetbe / blokkba: HTML

Nem csak nézni jössz.

Itt maradsz.

Galéria.

Analóg fotóbolt.

Kávézó.

 

A fotó itt nem díszlet, hanem gondolkodásmód. Galéria, amit nem feedben érdemes nézni. Egy bolt, ahol tudnak segíteni. Kávézó, ahonnan nem sietsz el. Főfoto. Magyar klasszikusok, kortárs fotó, 30 év fotós tudással. Egy hely, ahol maradni akarsz.

Nem háttérzaj, hanem tér. Beszélgetni, nézni, lapozni, lassulni.
Ha kell, lehalkítjuk a zenét.

Galériánk programja havonta változik: nem távoli művészeti élményt kínálunk, hanem felfedezést, megmutatva, hogy a fotográfia élő, szerethető és mindenkié. A Főfoto Galéria saját képkollekcióval várja az érdeklődőket.

Fotóboltunkban a hagyományos fotográfia kellékei – filmek, instant anyagok, könyvek, kamerák – szakértő segítséggel érhetők el, webshopunkban is. Budapest egyik legnagyobb analóg kamera készletével rendelkezünk.

Nálunk mindent megtudhatsz a fotózásról, amit mindig is szerettél volna megkérdezni.