Hoe SVG-patronen te exporteren

Vroeger kon je een betegelbare afbeelding net als een gif of jpg met 72dpi vernietigen en tegelen met CSS. Het is een gebruikelijke praktijk bij webontwerpers en dat al jaren; het is een snelle en gemakkelijke manier om een ​​patroon of textuur aan uw werk toe te voegen. Toen hebben die vervelende billen bij Apple retina-displays vrijgegeven en voordat we het wisten pixel was geen pixel langer. Plots werden die geliefde patronen geschiedenis.

SVG's (Scaleable Vector Graphics) zijn hard op weg om de standaard te worden voor scherpe afbeeldingen op het web. Ze lossen het probleem op van het maken van afzonderlijke afbeeldingsbestanden voor retina-apparaten. Ze zijn echt leuk en gemakkelijk te maken en ze openen een wereld aan mogelijkheden ...

Stap 1: maak een patroon

Er zijn tientallen verschillende applicaties waarmee u een SVG-patroon kunt ontwerpen. Mijn favoriet is Illustrator, dus dat zal ik gaan gebruiken.

Open Adobe Illustrator en maak een nieuw document van 300px bij 300px. Ga vervolgens naar Object> Patroon> Maken en uw canvas zal veranderen. U zult merken dat er een blauw vierkant in het midden van uw tekengebied staat. Het paneel met patroonopties is ook geopend.

We moeten een kleine aanpassing aanbrengen voordat we kunnen beginnen. Ga naar het paneel met patroonopties en schakel de optie uit met de opdracht Tegel verplaatsen met art. (Deze functie is vervelend, omdat je je kunstwerk niet kunt verplaatsen of positioneren binnen het patroonvakje. Het beweegt mee als je deze optie niet uitschakelt.)

Vervolgens is de lucht de limiet voor welk type patroon u kunt maken. Standaard is het patroonvierkant ingesteld op 100 px x 100 px. U kunt inbellen naar elke gewenste grootte. Ik liet de mijne bij de standaard.

Teken vervolgens een vierkant, op 50px bij 50px. Lijn het uit met de boven- en rechterkant van het vierkant.

Klik vervolgens met uw muis over het Pen-hulpmiddel en houd hem ingedrukt. Subhulpmiddelen verschijnen, waar u het gereedschap Ankerpunt toevoegen kunt selecteren. Voeg vanaf hier een ankerpunt toe aan het midden van de linker- en rechterkant van het vierkant.

Gebruik het gereedschap Direct selecteren om de ankerpunten te selecteren (houd shift ingedrukt om beide te selecteren.) Selecteer vervolgens in het menu bovenaan Object> Transformeren> Verplaatsen.

Verplaats de twee punten 20px naar rechts om een ​​soort pijl te vormen.

Dupliceer vervolgens de vorm door deze naar een nieuwe positie te slepen terwijl u de alt- toets ingedrukt houdt. (Of kopieer en plak als je dat liever hebt.)

Selecteer de nieuwe vorm en sleep deze naar de linkeronderhoek van het patroonvakje.

Terwijl de vorm nog steeds is geselecteerd, pakt u een hoek en draait u deze 180 graden. (Houd de Shift- toets ingedrukt om precies 180 graden te knippen.)

Selecteer in het hoofdmenu Object> Transformeren> Verplaatsen en verplaats de nieuwe vorm -20px.

Klik ten slotte op de knop Een kopie opslaan bovenaan in het venster, geef een naam aan het patroon en sla het op om uw patroon te voltooien. Een kopie opslaan is belangrijk als u deze later wilt bewerken. Dit voorkomt dat je het helemaal opnieuw moet maken.

Stap 2: exporteer het patroon

U zult merken dat wanneer u de patroonmodus afsluit, het patroon automatisch wordt geselecteerd als uw vulling. Het enige wat u hoeft te doen is een vorm tekenen op het tekengebied en deze wordt gevuld met het patroon. (Als u om welke reden dan ook de vulling van de vorm hebt gewijzigd, kunt u uw patroon vinden in het deelvenster Stalen en toepassen zoals bij elke andere vulling.)

Formaat van vorm wijzigen zodat het het hele 300px bij 300px artboard beslaat.

Selecteer Bestand> Opslaan als. Sla uw bestand op als een .svg.

Vervolgens wordt een dialoogvenster weergegeven waarin u kunt kiezen uit verschillende SVG-indelingen en -opties. Zorg ervoor dat u op meer opties klikt in de linkerbenedenhoek om alle beschikbare opties voor uw SVG-bestand te bekijken.

Het standaardformaat is SVG 1.1 omdat dit het meest gebruikte en meest gebruikte SVG-formaat is. In dit vak bepaalt u ook of u de mogelijkheid behoudt om de SVG in Illustrator te bewerken of dat u tekst op een pad inschakelt, wat handig kan zijn. U hebt de mogelijkheid om de SVG te gebruiken als een echt bestand, of u kunt de code kopiëren en deze rechtstreeks in uw html-document plakken. Klik op OK als u klaar bent .

Stap 3: Bewerk het SVG-patroon

Open het .svg-bestand in een teksteditor. Ik gebruik Sublime-tekst, maar u kunt Kladblok, Dreamweaver of wat u ook codeert HTML gebruiken.

Open hetzelfde bestand in een browser, zodat u een voorbeeld van alle wijzigingen in de code kunt bekijken.

Er zijn een paar verschillende gebieden om op te focussen. Eerst moeten we de grenzen van het SVG-bestand bewerken, zodat het de browser zal vullen.

Je zult het zien: aan de onderkant. Wijzig in plaats daarvan beide waarden van 300 tot 100%. Uw code ziet er dus als volgt uit:

U zou nog geen verandering moeten merken. Het moet nog steeds een vierkant zijn. Waarom? Omdat de viewbox is ingesteld op 300 x 300, wat vierkante afmetingen zijn. Om de breedte en hoogte van de browser in te vullen, wijzigt u de code op regel 4 van viewBox = "0 0 300 300" in viewBox = "0 0 100% 100%" .

Wanneer we de browser vernieuwen, vult het patroon onze browser van begin tot eind. Het probleem is, wat als je de grootte van het patroon wilt veranderen? Ga je terug naar Illustrator en herhaal je alles opnieuw? Nee. Dat is het mooie van Illustrator uw SVG-code laten genereren. U kunt de code eenvoudig bewerken. Zie het niet als een zuiver grafisch bestand. Zie het als een codebestand dat u naar uw hand kunt manipuleren en buigen.

Ga naar voor het bewerken van de grootte van het patroon op regel 5. Verander gewoon de waarden van de breedte en de hoogte in alles wat u maar wilt. Ik zou aanraden om het in vierkante verhoudingen te houden, tenzij je je patroon wilt vervormen. Als ik de waarden verander in 70, is het patroon kleiner, maar de breedte en hoogte worden nog steeds op het scherm opgevuld.

Als u naar de code kijkt, ziet u dat het patroon uit veelhoeken bestaat. De eerste polygoon heeft een vulling van "none" (die wit produceert) en de rest heeft hex-waarden.

Om de kleuren van ons patroon te veranderen, hoeven we alleen de opvulwaarden te veranderen.

Als je het soort persoon bent dat graag kopieert en plakt, hier is onze laatste SVG-code:

Dat is perfect geldig, maar het is een beetje rommelig (bedankt Illustrator). Dus ik zou aanraden om het te optimaliseren voordat je het gebruikt. Er zijn veel optimalisatie-opties beschikbaar, maar Peter Collingridge's is een van de beste, het geeft ons deze definitieve code:

Conclusie

De mogelijkheid om uw Illustrator-stalen en -patronen als SVG's te exporteren, biedt een schat aan mogelijkheden. U kunt niet alleen een SVG-patroon maken, u kunt het bestand in enkele minuten bewerken, kleuren, grootten bepalen en bepalen hoe het bestand zelf wordt weergegeven in de browser.