Designers Få gratis SVG-bakgrundsmönster från hjälmmönster

Alla moderna webbläsare stödja SVG och det är det det mest flexibla bildformatet du kan använda. Men designa egna SVGs från början Det är ingen lätt uppgift.

Det är därför ett verktyg som Hero Patterns kan vara så värdefull för designers. Det är ett gratis bibliotek av repeterbara SVG-mönster att du kan skräddarsy med olika stilar, färger och opacitet.

Hero Patterns har det bra över 40 + olika mönster att välja från och de är alla listade direkt på hemsidan. När du rullar ner ser du lev demos för var och en och du kan klicka på någon av dem för att se hur de ser ut.

Överst på sidan hittar du en fast bar med inställningar till ändra förgrunds- och bakgrundsfärgerna. Bakgrundsfärgen gäller för plan yta och förgrundsfärgen gäller för mönster i SVGs.

Tack vare naturlig blandning stil, Det är svårt att komma med en dålig färgkombination (även om det fortfarande är möjligt). Mönster varierar från dam till detaljerade upprepande ikoner som ankare.

När du hittar ett mönster du bara gillar klicka på det blocket för ett modalt fönster med mer information. Härifrån kan du justera förgrunds- / bakgrundsfärger, tillsammans med förgrundsopacitet för ikoner.

Men den verkliga magiken händer i kodfältet där du kan kopiera CSS att bädda in SVG rent genom kod. I CSS finns det a base64 () metod till konvertera strängdata till SVG-data. Detta är ganska vanlig och det fungerar också med andra bilder som PNGs.

Så om du inte vill att SVG-filen sparas lokalt kan du helt enkelt kopiera / klistra in CSS-koden rakt in i ditt stilark. Det här kommer att bädda in den upprepande bakgrunden med rätt färger direkt in på din webbplats. Hur coolt!

Eller, om du hellre vill redigera SVG själv du kan ladda ner en kopia av den oförsedda SVG-bilden. På så sätt kan du gör alla ändringar manuellt i designprogram som Illustrator.

Hero Patterns är ett av de få verktygen som låter designers ta full kontroll över SVGs direkt från webbläsaren. Upprepande bakgrunder används för att förlita sig endast på PNGs men webbstandarder har avancerade tillräckligt långt det SVG kan ta sin plats.

Till komma igång, bara besöka hemsidan för Hero Patterns och bläddra igenom deras mönsterbibliotek. Nya mönster läggas till ofta, så var noga med att kolla tillbaka så ofta.