Come esportare i modelli SVG

Un tempo si poteva semplicemente creare un'immagine piastrellabile come una gif o un jpg a 72 dpi e affiancarla ai CSS. È una pratica comune tra i web designer, ed è stata per anni; è un modo semplice e veloce per aggiungere un motivo o una trama al tuo lavoro. Poi quei fastidiosi corpi di Apple hanno rilasciato i display retina e prima che ce ne accorgessimo il pixel non era un pixel non piu. Improvvisamente quegli schemi amati sono diventati storia.

Gli SVG (Scaleable Vector Graphics) stanno rapidamente diventando lo standard per la grafica nitida sul Web. Risolvono il problema di dover creare file immagine separati per ospitare dispositivi retina. Sono davvero divertenti e facili da creare e aprono un mondo di possibilità ...

Passaggio 1: creare un modello

Esistono dozzine di applicazioni diverse che ti permetteranno di progettare un pattern SVG. Il mio preferito è Illustrator, quindi è quello che userò.

Apri Adobe Illustrator e crea un nuovo documento di 300 px per 300 px. Quindi, vai su Oggetto> Motivo> Crea e la tua tela cambierà. Noterai che ci sarà un quadrato blu nel mezzo della tua tavola da disegno. Inoltre, il pannello Opzioni modello sarà aperto.

Dovremo effettuare una leggera regolazione prima di iniziare. Vai al pannello Opzioni modello e deseleziona l'opzione Sposta tessera con l'arte. (Questa funzione è fastidiosa, perché non sarai in grado di spostare o posizionare la tua opera d'arte all'interno del quadrato del modello. Si muoverà con esso se non deselezionerai questa opzione.)

Successivamente, il cielo è il limite al tipo di motivo che è possibile creare. Per impostazione predefinita, il quadrato del motivo è impostato su 100 x 100 px. Puoi comporre qualsiasi dimensione desideri. Ho lasciato il mio al default.

Successivamente, disegna un quadrato, a 50 px per 50 px. Allinearlo con i bordi superiore e destro del quadrato.

Quindi, fai clic e tieni premuto il mouse sullo strumento Penna . Verranno visualizzati strumenti secondari in cui è possibile selezionare lo strumento Aggiungi punto di ancoraggio . Da qui, aggiungi un punto di ancoraggio al centro dei lati sinistro e destro del quadrato.

Usando lo Strumento selezione diretta , seleziona i punti di ancoraggio (tieni premuto Maiusc per selezionare entrambi). Quindi, dal menu in alto seleziona Oggetto> Trasforma> Sposta.

Sposta i due punti 20 px a destra per formare un tipo di freccia.

Quindi, duplica la forma trascinandola in una nuova posizione tenendo premuto il tasto alt . (Oppure copia e incolla se preferisci).

Seleziona la nuova forma e trascinala nell'angolo in basso a sinistra del quadrato del modello.

Con la forma ancora selezionata, prendi un angolo e ruotalo di 180 gradi. (Tenere premuto il tasto Maiusc per eseguire lo snap a esattamente 180 gradi.)

Dal menu in alto seleziona Oggetto> Trasforma> Sposta e sposta la nuova forma -20px.

Infine, fai clic sul pulsante Salva una copia nella parte superiore della finestra, assegna un nome al modello e salvalo per completare il modello. Salvare una copia è importante se si desidera modificarlo in seguito. Questo ti impedisce di doverlo ricreare tutto da capo.

Passaggio 2: Esportare il modello

Noterai che una volta che si esce dalla modalità pattern, il pattern viene automaticamente selezionato come riempimento. Tutto ciò che devi fare è disegnare una forma sulla tavola da disegno e sarà riempita con il modello. (Se per qualsiasi motivo hai modificato il riempimento sulla forma, puoi trovare il tuo modello nel pannello Campioni, applicarlo come qualsiasi altro riempimento.)

Quindi ridimensiona la forma in modo che copra l'intera tavola da 300 px per 300 px.

Seleziona File> Salva come. Salva il tuo file come .svg.

Successivamente, verrà visualizzata una finestra di dialogo in cui è possibile scegliere tra diversi formati e opzioni SVG. Assicurati di fare clic su altre opzioni, nell'angolo in basso a sinistra, per visualizzare tutte le opzioni disponibili per il tuo file SVG.

Il formato tipico è SVG 1.1 perché è il formato SVG più comunemente usato e più ampiamente supportato. In questa finestra, potrai anche decidere se conservare o meno la possibilità di modificare l'SVG in Illustrator o se abiliti il ​​testo su un percorso, che può essere utile. Hai la possibilità di usare SVG come un vero file, oppure puoi copiare il codice e incollarlo direttamente nel tuo documento html. Al termine, fai clic su OK.

Passaggio 3: modificare il modello SVG

Apri il file .svg in un editor di testo. Sto usando il Sublime Text, ma puoi usare Blocco note, Dreamweaver o qualsiasi altro codice HTML in uso.

Apri lo stesso file in un browser in modo da poter visualizzare in anteprima tutte le modifiche apportate al codice.

Ci sono alcune aree differenti su cui concentrarsi. Per prima cosa, dobbiamo modificare i limiti del file SVG, in modo che riempia il browser.

Vedrai: in basso. Cambia invece entrambi i valori da 300 a 100%. Quindi, il tuo codice sarà simile a:

Non dovresti ancora notare un cambiamento. Dovrebbe essere ancora un quadrato. Perché? Perché la viewbox è impostata su 300 x 300, che sono dimensioni quadrate. Per riempire la larghezza e l'altezza del browser, modificare il codice sulla riga 4 da viewBox = "0 0 300 300" per viewBox = "0 0 100% 100%" .

Quando aggiorniamo il browser, il pattern riempie il nostro browser da un capo all'altro. Il problema è, cosa succede se vuoi cambiare la dimensione del pattern? Torna ad Illustrator e rifai tutto da capo? No. Questa è la bellezza di avere Illustrator generare il tuo codice SVG. Puoi semplicemente modificare il codice. Non pensarlo come puramente un file grafico. Pensala come un file di codice che puoi manipolare e piegare alla tua volontà.

Per modificare la dimensione del motivo, cercare sulla linea 5. Cambia semplicemente i valori della larghezza e dell'altezza in qualsiasi cosa desideri. Consiglierei di mantenerlo a proporzioni quadrate, a meno che non vogliate distorcere il vostro schema. Quando cambio i valori a 70, il motivo è più piccolo, ma continua a riempire la larghezza e l'altezza dello schermo.

Se guardi il codice vedrai che il pattern è composto da poligoni. Il primo poligono ha un riempimento di "nessuno" (che produce bianco) e il resto ha valori esadecimali.

Per cambiare i colori del nostro modello tutto ciò che dobbiamo fare è cambiare i valori di riempimento.

Se sei il tipo di persona a cui piace copiare e incollare, ecco il nostro ultimo codice SVG:

Questo è perfettamente valido, ma è un po 'disordinato (grazie a Illustrator). Quindi consiglierei di ottimizzarlo prima di usarlo. Ci sono molte opzioni di ottimizzazione disponibili, ma Peter Collingridge's è uno dei migliori, ci dà questo codice finale:

Conclusione

Avere la possibilità di esportare i campioni e i pattern di Illustrator come SVG apre molte possibilità. Non solo puoi creare un pattern SVG, puoi modificare il file in pochi minuti, controllare colori, dimensioni e come il file stesso viene reso nel browser.