Työkalu kokoaa kuvion tavallisena SVG-merkintänä, joten lopputulos pysyy terävänä millä tahansa zoomaus- tai näyttötiheydellä ja vie yleensä vain muutaman sata tavua, huomattavasti vähemmän kuin PNG-toistokuva. Kopioi CSS liittääksesi toistuvan background-image-määrityksen suoraan tyylitiedostoon, tai lataa erillinen SVG-tiedosto käytettäväksi sellaisenaan. Mitään tekemääsi ei lähetetä palvelimelle: kuvio piirretään kokonaan laitteellasi, joten se toimii myös offline-tilassa, kun sivu on kerran latautunut.
Ilmainen SVG-kuvion generaattori
Toimii kokonaan selaimessasi - ei lähetyksiä, ei rekisteröitymistä.
Kuvio
Tyyli
Etuväri
Taustaväri
Mikä on SVG-kuvion generaattori?
SVG-kuvion generaattori rakentaa saumattoman, toistuvan taustan geometrisista muodoista, kuten pisteistä, viivoista, ruudukoista ja siksakeista. Valitset muodon, värit, toistokoon ja viivan paksuuden, ja työkalu tuottaa pienen, tarkkuudesta riippumattoman SVG:n sekä valmiin CSS-koodin. Kaikki tapahtuu selaimessasi, joten mitään ei lähetetä minnekään.
Näin se toimii
- 1Valitse kuvio. Valitse muoto - pisteet, renkaat, ruudukko, viisto, ristiviivoitus, plus, siksak ja muita - näytteistä.
- 2Aseta värit ja muoto. Valitse etu- ja taustaväri (tai tee taustasta läpinäkyvä), ja säädä sitten koko-, paksuus- ja läpinäkyvyysliukusäätimiä esikatselun päivittyessä reaaliajassa.
- 3Kopioi tai lataa. Vaihda CSS- ja SVG-välilehtien välillä, kopioi koodi tai lataa erillinen .svg-tiedosto käytettäväksi missä tahansa.
Kenelle
- Web-kehittäjät, jotka lisäävät hienovaraisen, kevyen taustatekstuurin heroon, korttiin tai osioon ilman erillistä kuvatiedostoa.
- UI- ja brändisuunnittelijat, jotka kokeilevat saumattomia tekstuureja brändin väreissä ja vievät ne teräväpiirtoisina SVG-tiedostoina.
- Sähköpostien ja diojen tekijät, jotka tarvitsevat pienen, toistuvan kuvion, joka näkyy terävänä millä tahansa näytöllä.
- Opiskelijat ja harrastajat, jotka opettelevat SVG:n
<pattern>-elementin ja CSS-taustan toiston toimintaa muuttamalla arvoja ja lukemalla tulostetta. - Sisällöntuottajat, jotka luovat nopeasti koristeellisia taustoja pienoiskuviin, bannereihin ja mallikappaleisiin.
Usein kysyttyä
Onko SVG-kuvion generaattori ilmainen?
Kyllä, se on täysin ilmainen ilman rekisteröitymistä ja ilman rajoituksia. Jokainen kuvio luodaan selaimessasi, joten voit tehdä ja kopioida niitä niin paljon kuin haluat, myös offline-tilassa sivun kerran latauduttua.
Ovatko kuviot todella saumattomia?
Kyllä. Jokainen muoto piirretään niin, että sen reunat kohtaavat täsmälleen viereisen toistokuvan kanssa, ja kuvio toistuu kiinteällä ruudukolla. Sekä CSS:n background-image että SVG:n <pattern>-elementti toistavat saman solun reunasta reunaan ilman näkyviä saumoja.
Kannattaako käyttää CSS- vai SVG-tulostetta?
Käytä CSS:ää liittääksesi toistuvan taustan suoraan tyylitiedostoon - se on nopein tapa verkkosivuille. Käytä SVG-latausta, kun tarvitset erillisen tiedoston, esimerkiksi kuva-aineistona, suunnittelutyökalussa tai suoraan HTML:ään upotettuna.
Miksi käyttää SVG-kuviota PNG:n sijaan?
SVG on vektorimuotoinen, joten se pysyy täysin terävänä millä tahansa zoomaus- tai näyttötiheydellä eikä koskaan pikselöidy. Geometrinen SVG-toistokuva vie yleensä vain muutaman sata tavua, huomattavasti vähemmän kuin vastaava PNG, ja voit muuttaa sen värejä milloin tahansa ilman uudelleenvientiä.
Voinko tehdä taustasta läpinäkyvän?
Kyllä. Valitse Läpinäkyvä-asetus, jolloin taustaväri poistuu ja kuvio näyttää vain etualan muodot. Näin voit asettaa kuvion olemassa olevan värin, kuvan tai liukuvärin päälle.
Lähetetäänkö suunnitelmani jonnekin?
Ei. Koko kuvio rakennetaan paikallisesti selaimessasi tavallisena SVG-merkintänä eikä mitään lähetetä palvelimelle, joten värisi ja asetuksesi pysyvät yksityisinä laitteellasi.