Blog afbeelding SVG tutorial
SVG Patronen
maken en exporteren

Tutorial: SVG Patronen maken en exporteren

Weet je nog dat je in de goede oude tijd ‘gewoon’ een .jpg of .gif image in 72ppi kon inladen in CSS (Cascading Style Sheet) om deze vervolgens oneindig horizontaal en verticaal te laten inladen in je website en het er ook nog eens prima uitzag? Voor veel programmeurs en front-end webdevelopers was deze manier van werken standaard, dit was immers een snelle en efficiënte manier om patronen en texturen toe te voegen aan een website. Totdat Apple met Retina displays uit de boeken kwam en een pixel niet langer simpelweg een pixel was. Dit danken we vooral aan het feit dat deze schermen een hogere PPI tonen tot (bij sommige apparaten) wel boven de 200. Patronen werden al snel een onderdeel van het verleden..

SVG Patronen (Scaleable Vector Graphics) zijn de nieuwste trend en worden langzaam maar zeker de standaard voor super scherpe graphics op het internet. Ze lossen het probleem op dat je verschillende plaatjes moet aanmaken voor apparaten met retina displays en dat graphics onscherp getoond worden op deze displays. Ze zijn erg leuk en makkelijk om te maken en je kunt er werkelijk van alles mee.

STAP 1: HET MAKEN VAN JE SVG PATROON

Er zijn veel verschillende programma’s waarmee je een SVG patroon kan maken, ik zelf vind Adobe Illustrator CC 2015 het fijnst. Dit programma zal dan ook worden gebruikt in het voorbeeld.

New document aanmaken

Open Illustrator CC 2015 en maak een nieuw bestand aan met de afmetingen 300px bij 300px. Ga vervolgens in het menu naar Object > Pattern > Make en jouw canvas wordt automatisch aangepast naar een canvas geoptimaliseerd voor het maken van patronen. Tevens zal het paneel Pattern Options automatisch openen, mocht dit niet gebeuren dan kun je het menu aanroepen via Window > Pattern Options.

New SVG Patroon aanmaken

Voordat we verder gaan. Moeten we even een irritante functie uitzetten (vinkje uitzetten), namelijk: Move Tile with Art. Deze vind je in het Pattern Options Paneel. Als je dit niet doet dan beweegt het vierkant constant mee en kun je de graphics niet positioneren of verplaatsen binnen het vierkant.

Move tile uitschakelen

Vervolgens kun je eigenlijk alle kanten op met het SVG ontwerp. Standaard creëert het bestand een werkgebied van 100px bij 100px. Dit formaat zal in dit voorbeeld ook worden aangehouden.

Vierkantje aanmaken

Teken een vierkant van 50px bij 50px met de Rectangle Tool  en positioneer deze rechts bovenin je patrooncanvas (het blauwe vierkantje). Geef het vierkant de kleur zwart (#000000) mee, later in dit voorbeeld kunnen we dit aanpassen. Je ziet dat er nog meer vierkantjes buiten je vierkant verschijnen en meebewegen als je het vierkant verplaatst. Dit is het patroon en een voorbeeld van hoe jouw patroon er horizontaal en verticaal uitziet als het door gekopieerd wordt.

Vierkantje op de juiste plek zetten

Ga vervolgens met je muis naar de Pen Tool en selecteer, met de muis ingedrukt, de Pen Tool. Er komt een menu uit als je dit doet, de Add Anchor Tool. Met deze tool geselecteerd maak je een nieuw Anchor Point aan, aan de boven- en onderkant van het vierkant, in het midden. Je kunt ze voor het gemak eerst even plaatsen en dan vervolgens positioneren met je pijltjes-toetsen door het Anchor point te selecteren met de Direct Selection Tool (het witte pijltje). Zorg dat ze precies in het midden staan.

Anchor points aanmaken

Selecteer met de Direct Selection Tool beide aangemaakte Anchor Points en ga via het hoofdmenu ga naar Object > Transform > Move.

Anchor points verplaatsen

Het Move Paneel is nu geopend. In dit menu typen we bij Vertical -20px. Klik vervolgens op Ok. We krijgen nu iets wat op een pijl lijkt die rechtop staat.

Pijl

We gaan nu nog een extra vorm toevoegen aan ons SVG patroon. We gaan er een cirkel bij plaatsen. Ga in je Tool Bar met de muis naar de Rectangle Tool, houdt de muis ingedrukt en selecteer de Elipse Tool. Teken in het canvas een cirkel (houdt Shift ingedrukt om een perfecte cirkel te tekenen) van tussen de 20/30px en plaats deze, op onderstaande manier, onder de pijl op 25px van de negatieve punt aan de onderkant van de pijl. Je kunt uiteraard ook andere vormen gebruiken of een andere vector shape importeren vanuit een ander bestand.

Cirkel toevoegen

Vervolgens gaan we de pijl en de cirkel herpositioneren zodat deze binnen het blauwe vlak vallen. Selecteer zowel de pijl als de cirkel door met de Selection Tool schuinboven beide vormen te klikken in het canvas. Vervolgens ga je, door de muis ingedrukt te houden, een selectievlak maken over zowel de pijl als de cirkel. Ga vervolgens naar Object > Transform > Move en voer bij Vertical 20px in. Je zult zien dat de geselecteerde onderdelen 20px naar onder geplaatst worden. Alternatief kun je na het selecteren ook Shift + Pijltje naar beneden (2x) gebruiken om je shapes te verplaatsen.

Verplaats pijl

Selecteer beide shapes en dupliceer de shapes. (Cmd + C en vervolgens Cmd + V / Ctrl + C en vervolgens Ctrl + V)of ga naar Edit > Copy en vervolgens Edit > Paste en ga vervolgens naar Object > Transform > Reflect om de gekopieerde shapes aan te passen. Je kunt het beste de shapes alvast een beetje opschuiven anders kun je het resultaat niet zo goed zien.

Reflect menu Illustrator CC 2015

In het Reflect paneel kies je onder Axis , Horizontal en als je Preview aanvinkt kun je zien of het op de juiste manier gebeurt. Klik vervolgens op Ok. Positioneer daarna beide shapes op onderstaande manier.

Reflecten in Illustrator CC 2015

Een erg handige manier om later eventueel je shape weer te kunnen aanpassen is Save a Copy. Hiermee kun je een back-up opslaan van het SVG patroon in het Swatches Paneel. Je kunt het Swatches Paneel via Window > Swatches aanroepen. Als je vervolgens door de swatches scrollt zul je zien dat het door jou toegevoegde patroon daar terug te vinden is.

Save a Copy

STAP 2: JE SVG PATROON EXPORTEREN

Je zult zien dat als je de patroon modus verlaat dat jou gemaakte SVG patroon als Fill is geselecteerd. Je zult zien dat, als je nu een shape aanmaakt, dat jouw SVG patroon hierin gevuld wordt.

SVG patroon in Swatches

Om je patroon op de juiste manier te exporteren is het belangrijk dat je de hele canvas van 300px bij 300px vult met jouw SVG patroon. Teken op de canvas een Rectangle met jouw SVG patroon als Fill geselecteerd en maak hem 300px bij 300px en positioneer hem zo dat hij precies op het canvas past.

SVG Fill

Selecteer Save > Save as. Sla je bestand op als .svg.

Opslaan als SVG bestand

Vervolgens verschijnt er een Popup. Je kunt kiezen uit een aantal manieren van opslaan. Selecteer hier SVG 1.1. Dit is het meest voorkomende formaat en het makkelijkste te bewerken. Klik vervolgens op Ok.

SVG 1.1

STAP 3: HET SVG PATROON AANPASSEN

Open het .svg bestand in een TXT/HTML verwerker. Ik heb in het voorbeeld gekozen voor Edge CC 2015, maar je kunt ook Notepad, Dreamweaver CC 2015 of een vergelijkbare tool gebruiken. Een handige tip: Open het .svg bestand ook even in een internetbrowser. Zo kun je zien wat de impact is van eventuele aanpassingen.

SVG code in Edge CC 2015

Er zijn een paar verschillende dingen die we als eerst moeten aanpassen. Als eerst gaan we de SVG bounds aanpassen, zodat het SVG patroon de browser vult.

Je ziet: <rect fill=“url(#Unnamed_Pattern)” width=“300” height=“300” /> onderaan staan. Verander beide waardes van 300 naar 100%.

Je code komt er zo uit te zien: <rect fill=“url(#Unnamed_Pattern)” width=“100%” height=“100%” />. Sla het bestand vervolgens op.

SVG Patroon op 30% gescaled

Je ziet in de browser dat als je refreshed (F5) er nog niets is veranderd, het is nog steeds een vierkant. Dit komt omdat de viewBox nog op 300 bij 300 staat. Om de volledige browser te vullen voeren we op regel 4 van onze code bij viewBox=“0 0 300 300” dit in: viewBox=“0 0 100% 100%”

Voorbeeld eindresultaat SVG Patroon

Als we ons bestand nu opslaan en onze browser refreshen zien we dat het patroon nu over de volledige breedte en hoogte wordt getoond. Maar wat als ik het nou de grootte wil aanpassen van mijn patroon of de kleur? Moet ik dan weer helemaal opnieuw beginnen? Nee! Gelukkig niet. Het mooie hiervan is dat Illustrator CC 2015 de SVG code heeft gegenereerd. Je kunt de code nu naar wens aanpassen. Zie het niet als pure graphic maar als een code die je hier en daar nog kunt aanpassen.

Om de grootte van je patroon aan te passen ga je op zoek naar: <pattern width=“100” height=“100” in regel 5. Je kunt deze waardes bijvoorbeeld aanpassen naar 30. Zo krijg je: <pattern width=“30” height=“30”. Sla je bestand maar eens op en refresh in je browser. Je zult zien dat je patroon nu kleiner wordt weergegeven.

Als je de code bekijkt zie je dat het bestaat uit Polygons. De bovenste polygon heeft een fill=“none”, wat wit produceert. Je kunt in de andere polygons met deze waarde de kleuren aanpassen van de vlakken die je hebt getekend. Het kan zijn dat er nog geen fill element is aangemaakt bij de andere polygons maar in dat geval kun je deze zelf toevoegen. Het mooie van de fill optie is dat het werkt met hex code en je dus gewoon de waardes kunt aanhouden die je wilt vanuit Photoshop CC 2015. Zo gebruiken wij in ons voorbeeld fill=“#ff8400” en nog wat varianten van oranje om het onderstaande te creëren.

Wil je onze code gebruiken om daarmee verder te experimenteren? Dan vind je deze hieronder:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 100% 100%" enable-background="new 0 0 300 300" xml:space="preserve">
<pattern  width="30" height="30" patternUnits="userSpaceOnUse" id="Patroon__x23_1" viewBox="0 -100 100 100" overflow="visible">
	<g>
		<polygon fill="none" points="0,-100 100,-100 100,0 0,0 		"/>
		<polygon fill="#ff8400" points="50,-30 75,-50 100,-30 100,-80 75,-100 50,-80 		"/>
		<path fill="#fcd881" d="M87.5-19c0,6.9-5.6,12.5-12.5,12.5S62.5-12.1,62.5-19S68.1-31.5,75-31.5S87.5-25.9,87.5-19z"/>
		<polygon fill="#ffb400" points="0,-70 25,-50 50,-70 50,-20 25,0 0,-20 		"/>
		<path fill="#fcd881" d="M37.5-81c0-6.9-5.6-12.5-12.5-12.5S12.5-87.9,12.5-81c0,6.9,5.6,12.5,12.5,12.5S37.5-74.1,37.5-81z"/>
	</g>
</pattern>
<rect x="0" y="0" fill="url(#Patroon__x23_1)" width="100%" height="100%"/>
</svg>

Je kunt deze code aanhouden maar je kunt hem ook nog wat netter maken omdat Illustrator generated code nou eenmaal wat rommelig is. Gebruik deze tool om je code te optimaliseren. Dit geeft ons de uiteindelijke code:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100% 100%" enable-background="new 0 0 300 300" xml:space="preserve">
  <pattern width="30" height="30" patternUnits="userSpaceOnUse" id="Patroon__x23_1" viewBox="0 -100 100 100" overflow="visible">
    <polygon fill="none" points="0 -100 100 -100 100 0 0 0 "/>
    <polygon fill="#ff8400" points="50 -30 75 -50 100 -30 100 -80 75 -100 50 -80 "/>
    <path fill="#fcd881" d="M87.5-19c0 6.9-5.6 12.5-12.5 12.5S62.5-12.1 62.5-19 68.1-31.5 75-31.5 87.5-25.9 87.5-19z"/>
    <polygon fill="#ffb400" points="0 -70 25 -50 50 -70 50 -20 25 0 0 -20 "/>
    <path fill="#fcd881" d="M37.5-81c0-6.9-5.6-12.5-12.5-12.5S12.5-87.9 12.5-81c0 6.9 5.6 12.5 12.5 12.5S37.5-74.1 37.5-81z"/>
  </pattern>
  <rect x="0" y="0" fill="url(#Patroon__x23_1)" width="100%" height="100%"/>
</svg>

CONCLUSIE

Je Illustrator swatches/patronen exporteren als SVG geeft erg veel mogelijkheden. Je kunt op deze manier zeer scherpe en originele svg’s maken voor je brand die goed displayen op een retina scherm. Je kunt nu niet alleen een patroon maken, maar hem ook aanpassen en kleur geven in een aantal minuten. Ik ben erg benieuwd naar de resultaten die jullie creëren aan de hand van deze tutorial. Laat daarom in het reactie veld hieronder je resultaten zien door een linkje toe te voegen. En zoals altijd uiteraard, heb je er wat aan gehad? Deel dan dit bericht via een van je social media kanalen om een ander ook deze kennis te geven.

Invest Online
Tommy Wagelaar
Auteur: Tommy Wagelaar, Creatie Ik werk inmiddels al 4,5 jaar als designer voor Invest Online. Samen met de andere afdelingen maak ik voor onze klanten de online/offline design uitingen die onze klanten van ons vragen. Een aantal van mijn werkzaamheden vind je dan ook onder de cases pagina van Invest Online.

Plaats een reactie