Nástroj skladá vzor ako čistý SVG kód, takže výsledok je ostrý pri akomkoľvek priblížení či hustote pixelov a zvyčajne zaberie len pár stoviek bajtov, oveľa menej než dlaždica vo formáte PNG. Skopírujte CSS a vložte opakujúce sa background-image priamo do štýlu, alebo si stiahnite samostatný SVG súbor a použite ho ako grafický prvok. Nič, čo vytvoríte, sa nikam neposiela: vzor sa kreslí výhradne vo vašom zariadení, takže funguje aj offline, hneď ako sa stránka raz načíta.
Bezplatný generátor SVG vzorov
Beží celý vo vašom prehliadači - bez nahrávania, bez registrácie.
Vzor
Štýl
Popredie
Pozadie
Čo je generátor SVG vzorov?
Generátor SVG vzorov vytvára bezšvové, opakujúce sa pozadie z geometrických tvarov, ako sú bodky, čiary, mriežky a cikcaky. Vyberiete si tvar, farby, veľkosť dlaždice a hrúbku čiary a nástroj vygeneruje malé, rozlíšenie nezávislé SVG spolu s hotovým CSS na vloženie. Všetko sa deje priamo v prehliadači, takže sa nič neodosiela nikam.
Ako na to
- 1Vyberte vzor. Vyberte tvar - bodky, kruhy, mriežku, diagonálu, krížové šrafovanie, plus, cikcak a ďalšie - zo vzoriek.
- 2Nastavte farby a tvar. Vyberte farbu popredia a pozadia (alebo nastavte pozadie ako priehľadné), potom upravte posuvníky veľkosti, hrúbky a priehľadnosti, kým sa náhľad aktualizuje naživo.
- 3Skopírujte alebo stiahnite. Prepnite medzi kartami CSS a SVG, skopírujte kód alebo si stiahnite samostatný .svg súbor na použitie kdekoľvek.
Pre koho je nástroj určený
- Webový vývojári, ktorí chcú pridať jemnú, odľahčenú textúru pozadia do hero sekcie, karty alebo bloku bez pridávania obrázkového súboru.
- UI a brand dizajnéri, ktorí skúšajú bezšvové textúry v značkových farbách a exportujú ich ako ostré SVG grafiky.
- Tvorcovia e-mailov a prezentácií, ktorí potrebujú malý, dlaždicový vzor zobrazujúci sa ostro na akomkoľvek displeji.
- Študenti a nadšenci, ktorí sa učia, ako funguje SVG prvok
<pattern>a dlaždicovanie pozadia v CSS, úpravou hodnôt a čítaním výstupu. - Tvorcovia obsahu, ktorí rýchlo generujú dekoratívne pozadia pre náhľadové obrázky, bannery a makety.
Časté otázky
Je generátor SVG vzorov zadarmo?
Áno, je úplne zadarmo bez registrácie a bez obmedzení. Každý vzor sa vytvára priamo vo vašom prehliadači, takže si ich môžete vytvoriť a skopírovať koľko chcete, aj offline, keď sa stránka raz načíta.
Sú vzory naozaj bezšvové?
Áno. Každý tvar je nakreslený tak, aby jeho okraje presne nadväzovali na susednú dlaždicu, a vzor sa opakuje na pevnej mriežke. Ako CSS background-image, tak aj SVG prvok <pattern> vydláždia rovnakú bunku okraj na okraj bez viditeľných švov.
Mám použiť CSS alebo SVG výstup?
Použite CSS na vloženie opakujúceho sa pozadia priamo do štýlu - je to najrýchlejšie pre weby. Použite stiahnutie SVG, keď potrebujete samostatný súbor, napríklad ako grafický prvok, v dizajnérskom nástroji alebo vložený priamo do HTML.
Prečo použiť SVG vzor namiesto PNG?
SVG je vektorové, takže zostáva dokonale ostré pri akomkoľvek priblížení či hustote pixelov a nikdy sa nerozostrí. Geometrická SVG dlaždica zvyčajne zaberie len pár stoviek bajtov, oveľa menej než rovnaké PNG, a farby môžete kedykoľvek zmeniť bez opätovného exportu.
Môžem urobiť pozadie priehľadné?
Áno. Zaškrtnite možnosť Priehľadné a výplň pozadia sa odstráni, takže vzor zobrazí iba tvary popredia. Vďaka tomu môžete vzor umiestniť nad existujúcu farbu, obrázok alebo prechod.
Odosiela sa môj návrh niekam?
Nie. Celý vzor sa vytvára lokálne vo vašom prehliadači ako čistý SVG kód a na server sa nič neodosiela, takže vaše farby a nastavenia zostávajú súkromné na vašom zariadení.