Nástroj sestaví vzor jako čisté SVG markup, takže výsledek zůstává ostrý při jakémkoli přiblížení nebo hustotě obrazovky a obvykle váží jen pár stovek bajtů, mnohem méně než odpovídající PNG dlaždice. Zkopírujte CSS a vložte opakující se background-image přímo do stylopisu, nebo si stáhněte samostatný SVG soubor a použijte ho jako grafický zdroj. Nic z toho, co vytvoříte, nikam neodchází - vzor se kreslí čistě ve vašem zařízení, takže funguje i offline, jakmile se stránka jednou načte.
Bezplatný SVG Generátor Vzorů
Běží celé ve vašem prohlížeči - nic se nenahrává, žádná registrace.
Vzor
Styl
Popředí
Pozadí
Co je SVG generátor vzorů?
Je to nástroj, který vytvoří bezešvé, opakující se pozadí z geometrických tvarů - teček, čar, mřížek, cikcaků. Vyberete tvar, barvy, velikost dlaždice a tloušťku čar, a nástroj vygeneruje drobný SVG soubor nezávislý na rozlišení plus hotové CSS ke vložení. Vše se generuje přímo ve vašem prohlížeči, nic se nikam neposílá.
Jak na to
- 1Vyberte vzor. Zvolte tvar - tečky, kruhy, mřížku, diagonálu, šrafování, plus, cikcak a další - ze vzorníku.
- 2Nastavte barvy a tvar. Vyberte barvu popředí a pozadí (nebo nastavte pozadí jako průhledné), pak upravte velikost, tloušťku a průhlednost, zatímco se náhled aktualizuje živě.
- 3Zkopírujte nebo stáhněte. Přepněte mezi záložkami CSS a SVG, zkopírujte kód, nebo si stáhněte samostatný soubor .svg pro použití kdekoli.
Pro koho je nástroj
- Weboví vývojáři, kteří chtějí nenápadnou, lehkou texturu pozadí pro hero sekci, kartu nebo blok, bez nutnosti nahrávat obrázek.
- UI a brandoví designéři prototypující bezešvé textury v barvách značky a exportující je jako ostré SVG.
- Tvůrci e-mailů a prezentací, kteří potřebují malý, opakující se vzor, který zůstane ostrý na jakékoli obrazovce.
- Studenti a nadšenci zjišťující, jak funguje SVG prvek
<pattern>a dlaždicování pozadí v CSS, tím, že si zkouší hodnoty a sledují výsledek. - Tvůrci obsahu generující rychlá dekorativní pozadí pro náhledy, bannery a mockupy.
Časté dotazy
Je SVG generátor vzorů zdarma?
Ano, je zcela zdarma, bez registrace a bez omezení. Každý vzor se generuje přímo ve vašem prohlížeči, takže jich můžete vytvořit a zkopírovat kolik chcete, klidně i offline, jakmile se stránka jednou načte.
Jsou vzory opravdu bezešvé?
Ano. Každý tvar je nakreslený tak, aby jeho okraje přesně navazovaly na sousední dlaždici, a vzor se opakuje na pevné mřížce. Jak background-image v CSS, tak prvek <pattern> v SVG dlaždicují stejnou buňku okraj k okraji bez viditelných švů.
Mám použít CSS, nebo SVG?
Použijte CSS, pokud chcete vložit opakující se pozadí přímo do stylopisu - je to nejrychlejší cesta pro weby. SVG ke stažení použijte, když potřebujete samostatný soubor, například jako obrazový zdroj, v návrhovém nástroji, nebo přímo vložený do HTML.
Proč použít SVG vzor místo PNG?
SVG je vektorové, takže zůstává dokonale ostré při jakémkoli přiblížení nebo hustotě obrazovky a nikdy se nerozpixeluje. Geometrická SVG dlaždice obvykle váží jen pár stovek bajtů, mnohem méně než odpovídající PNG, a barvy si můžete kdykoli přebarvit bez nového exportu.
Můžu udělat pozadí průhledné?
Ano. Zaškrtněte volbu Průhledné a výplň pozadí zmizí, takže zůstanou vidět jen tvary v popředí. Díky tomu můžete vzor vrstvit na existující barvu, obrázek nebo přechod.
Odesílá se můj návrh někam?
Ne. Celý vzor se skládá lokálně ve vašem prohlížeči z čistého SVG markupu a nic se neposílá na server, takže vaše barvy a nastavení zůstávají soukromé ve vašem zařízení.