Az eszköz a mintát tiszta SVG kódként állítja össze, ezért az eredmény bármilyen nagyításnál vagy képernyő-felbontásnál éles marad, és általában csak néhány száz bájtot nyom, jóval kevesebbet, mint egy hasonló PNG csempe. Másold ki a CSS-t, hogy egy ismétlődő background-image-t illessz be közvetlenül egy stíluslapba, vagy töltsd le az önálló SVG fájlt, hogy grafikai elemként használd. Semmi, amit létrehozol, nem kerül máshova: a minta teljes egészében a saját eszközödön rajzolódik ki, így az oldal betöltése után offline is működik tovább.
Ingyenes SVG Mintagenerátor
Teljesen a böngésződben fut - feltöltés és regisztráció nélkül.
Minta
Stílus
Előtér
Háttér
Mi az az SVG mintagenerátor?
Egy eszköz, amely geometriai formákból - pöttyök, vonalak, rácsok, cikcakkok - épít fel egy varrat nélküli, ismétlődő háttérmintát. Kiválasztod a formát, a színeket, a csempe méretét és a vonalvastagságot, az eszköz pedig egy apró, bármilyen felbontásnál éles SVG-t ad, mellé kész CSS kódot. Minden a böngésződben készül, semmi nem kerül fel szerverre.
Így működik
- 1Válassz mintát. Válassz formát - pöttyök, gyűrűk, rács, átló, keresztvonalazás, plusz, cikcakk és mások - a mintakészletből.
- 2Állítsd be a színeket és a formát. Válassz előtér- és háttérszínt (vagy tedd a hátteret átlátszóvá), majd állítsd be a méretet, a vastagságot és az átlátszóságot, miközben az előnézet élőben frissül.
- 3Másold ki vagy töltsd le. Válts a CSS és az SVG fül között, másold ki a kódot, vagy töltsd le az önálló .svg fájlt, hogy bárhol felhasználhasd.
Kinek hasznos
- Webfejlesztők, akik egy visszafogott, könnyű háttértextúrát szeretnének egy hero szekcióba, kártyába vagy blokkba, kép feltöltése nélkül.
- UI- és márkatervezők, akik márkaszínekben prototípusoznak varrat nélküli textúrákat, és éles SVG-ként exportálják őket.
- E-mail- és prezentációkészítők, akiknek kis méretű, ismétlődő mintára van szükségük, ami bármilyen kijelzőn éles marad.
- Diákok és hobbisták, akik az SVG
<pattern>elem és a CSS háttércsempézés működését próbálják megérteni az értékek variálásával és az eredmény megfigyelésével. - Tartalomkészítők, akik gyors dekoratív hátteret generálnak indexképekhez, bannerekhez és makettekhez.
Gyakori kérdések
Ingyenes az SVG mintagenerátor?
Igen, teljesen ingyenes, regisztráció és korlátozás nélkül. Minden minta a böngésződben készül, így akár offline is annyit hozhatsz létre és másolhatsz ki, amennyit csak szeretnél, miután az oldal betöltődött.
Tényleg varrat nélküliek a minták?
Igen. Minden forma úgy készül, hogy a szélei pontosan illeszkedjenek a szomszédos csempéhez, és a minta egy fix rácson ismétlődik. Mind a CSS background-image, mind az SVG <pattern> eleme szélétől széléig lefedi ugyanazt a cellát, látható varratok nélkül.
A CSS-t vagy az SVG-t használjam?
Használd a CSS-t, ha egy ismétlődő hátteret közvetlenül egy stíluslapba szeretnél illeszteni - ez a leggyorsabb megoldás weboldalakhoz. Az SVG letöltést akkor válaszd, ha önálló fájlra van szükséged, például képi elemként, egy tervezőprogramban, vagy közvetlenül a HTML-be ágyazva.
Miért érdemes SVG mintát használni PNG helyett?
Az SVG vektoros, ezért bármilyen nagyításnál vagy képernyő-felbontásnál tökéletesen éles marad, és soha nem pixelesedik. Egy geometriai SVG csempe általában csak néhány száz bájt, jóval kevesebb, mint egy hasonló PNG, és a színeit bármikor átalakíthatod újraexportálás nélkül.
Átlátszóvá tehetem a hátteret?
Igen. Jelöld be az Átlátszó opciót, és a háttérkitöltés eltűnik, csak az előtérformák maradnak láthatók. Így a mintát egy meglévő szín, kép vagy színátmenet fölé rétegezheted.
Felkerül valahova a tervem?
Nem. A teljes minta helyben, a böngésződben készül egyszerű SVG kódból, és semmi nem kerül szerverre, így a színeid és a beállításaid magánjellegűek maradnak az eszközödön.