Så här exporterar du SVG-mönster

Det brukade vara att du bara kunde whack ut en flikbar bild som en gif eller jpg på 72dpi och kakel den med CSS. Det är en vanlig praxis bland webbdesigners, och har varit i åratal; Det är ett snabbt och enkelt sätt att lägga till ett mönster eller en textur på ditt arbete. Då slumrade dessa irriterande bud över Apple på näthinnan och innan vi visste det a pixel var inte en pixel längre. Plötsligt blev dessa älskade mönster historia.

SVGs (Scaleable Vector Graphics) blir snabbt standard för skarp grafik på webben. De löser problemet med att skapa separata bildfiler för att rymma näthinnanordningar. De är jättekul och lätt att skapa, och de öppnar en värld av möjligheter ...

Steg 1: Skapa ett mönster

Det finns dussintals olika applikationer som gör att du kan designa ett SVG-mönster. Min favorit är Illustrator, så det är vad jag ska använda.

Öppna Adobe Illustrator och skapa ett nytt dokument som är 300px med 300px. Gå sedan till Objekt> Mönster> Gör och din duk kommer att ändras. Du märker att det kommer att finnas en blå torg mitt i din tavla. Alternativet Mönsteralternativ öppnas också.

Vi måste göra en liten justering innan vi börjar. Gå över till Mönsteralternativspanelen och avmarkera alternativet som säger Flytta kakel med konst. (Den här funktionen är irriterande eftersom du inte kan flytta eller placera ditt konstverk på mönsterfältet. Det kommer att flyttas om du inte avmarkerar det här alternativet.)

Därefter är himlen gränsen för vilken typ av mönster du kan skapa. Som standard är mönstertorget inställt på 100px x 100px. Du kan ringa i vilken storlek som helst du önskar. Jag lämnade min vid standard.

Därefter rita en torg, vid 50px med 50px. Justera den med torgets övre och högra kanter.

Klicka sedan och håll muspekaren över Penverktyget . Subverktygen kommer att visas, där du kan välja Add Anchor Point Tool . Härifrån lägger du till en ankarpunkt till mitten av torgets vänstra och högra sida.

Med hjälp av Direct Selection Tool markerar du ankarpunkterna (håll skift för att välja båda.) Välj sedan Objekt> Transformera> Flytta från huvudmenyn .

Flytta de två punkterna 20px till höger för att bilda en slags pil.

Därefter kopiera formen genom att dra den till en ny position samtidigt som du håller ner Alt- tangenten. (Eller kopiera och klistra om du föredrar.)

Välj den nya formen och dra den till det nedre vänstra hörnet på mönsterfältet.

Med den form som valts ut, ta ett hörn och rotera det 180 grader. (Håll ned skiftknappen för att snäppa till exakt 180 grader.)

Från den övre menyn väljer du Objekt> Transformera> Flytta och flytta den nya formen -20px.

Slutligen klickar du på Spara en kopia högst upp i fönstret, namnet mönstret och sparar det för att slutföra ditt mönster. Spara en kopia är viktig om du vill redigera den senare. Detta hindrar dig från att behöva återskapa det igen.

Steg 2: Exportera mönstret

Du märker att när du avslutar mönstret väljer mönstret automatiskt som fyllning. Allt du behöver göra är att dra en form på tavlan och det kommer att fyllas med mönstret. (Om du av någon anledning har ändrat fyllningen på formen kan du hitta ditt mönster i fönstret, använd det som någon annan fyllning.)

Ändra sedan om din form så att den täcker hela 300px med 300px tavla.

Välj Arkiv> Spara som. Spara filen som en .svg.

Därefter visas en dialogruta där du kan välja mellan olika SVG-format och alternativ. Var noga med att klicka på fler alternativ, i nedre vänstra hörnet, för att se alla tillgängliga alternativ för din SVG-fil.

Det typiska formatet är SVG 1.1 eftersom det är det mest använda och mest stödda SVG-formatet. I den här rutan kontrollerar du också huruvida du bevarar möjligheten att redigera SVG i Illustrator eller om du aktiverar text på en sökväg, vilket kan vara användbart. Du har möjlighet att använda SVG som en faktisk fil, eller du kan kopiera koden och klistra in den direkt i ditt HTML-dokument. När du är klar klickar du på OK.

Steg 3: Ändra SVG-mönstret

Öppna upp .svg-filen i en textredigerare. Jag använder sublim text, men du kan använda anteckningsblock, Dreamweaver eller vad du än kodar HTML in.

Öppna samma fil i en webbläsare så att du kan förhandsgranska alla ändringar du gör i koden.

Det finns några olika områden att fokusera på. Först måste vi redigera gränserna för SVG-filen, så att den fyller webbläsaren.

Du kommer se: på botten. Ändra båda värdena från 300 till 100% istället. Så kommer din kod att se ut:

Du bör inte märka en ändring än. Det borde fortfarande vara en torg. Varför? Eftersom visningslådan är inställd på 300 x 300, som är kvadratiska dimensioner. För att fylla bredden och höjden på webbläsaren, ändra koden på rad 4 från viewBox = "0 0 300 300" för att visaBox = "0 0 100% 100%" .

När vi uppdaterar webbläsaren fyller mönstret webbläsaren från slutet till slutet. Problemet är, vad händer om du vill ändra mönstrets storlek? Går du tillbaka till Illustrator och gör om allt igen? Nej. Det är skönheten att Illustrator genererar din SVG-kod. Du kan helt enkelt redigera koden. Tänk inte på det som enbart en grafikfil. Tänk på det som en kodfil som du kan manipulera och böja till din vilja.

För att ändra mönstret, leta efter på linje 5. Ändra bara värdena på bredden och höjden till allt du vill ha. Jag rekommenderar att du håller den i kvadratiska proportioner, om du inte vill förvränga ditt mönster. När jag ändrar värdena till 70 är mönstret mindre, men fyller fortfarande bredden och höjden till skärmen.

Om du tittar på koden ser du att mönstret består av polygoner. Den första polygonen har en fyllning av "none" (som producerar vit) och resten har hex-värden.

För att ändra färgerna på vårt mönster är allt vi behöver göra för att ändra fyllningsvärdena.

Om du är den typ av person som gillar att kopiera och klistra in, här är vår sista SVG-kod:

Det är helt giltigt, men det är lite rörigt (tack Illustrator). Så jag rekommenderar att du optimerar det innan du använder det. Det finns många optimeringsalternativ tillgängliga, men Peter Collingridge s är en av de bästa, det ger oss den här sista koden:

Slutsats

Att ha möjlighet att exportera dina Illustrator-korrigeringar och mönster som SVGs öppnar en mängd möjligheter. Du kan inte bara skapa ett SVG-mönster, du kan redigera filen på några minuter, styra färger, storlekar och hur själva filen görs i webbläsaren.