“Le icone che esporti fanno schifo”

Ovvero come esportare un’icona a prova di sviluppatore (Sketch + Atom)

Franceska Dalsaso
May 6, 2017 · 5 min read

Quante volte vi è capitato di esportare un’icona sulla quale avete lavorato per ore (un px più a destra, un px più a sinistra, opacità sì, opacità no) e sentire dall’altra parte del tavolo sempre la solita litania del “l’hai esportata male”? Beh, personalmente un paio, finché ho capito che il problema non ero io, né lo sviluppatore (ciao Dario!) dall’altra parte.

Il problema principale è il fatto di non sapere cosa effettivamente si esporta. Prendete Sketch ed esportate l’artboard che avete creato con all’interno, ad esempio, il logo di Medium creato con 4 poligoni in tutto, come medium-icon.svg. Semplice, no?

Bene, ora aprite l’svg con Atom (o qualunque altro editor) e guardate il codice prodotto perché, ebbene sì, è con quello che lavoreranno gli sviluppatori.

Eccola qui la vostra icona: bella come il sole e paradossalmente irriconoscibile. È con questi dati che il vostro svg prenderà vita ed è per questo che vi stanno maledicendo dall’altra parte del tavolo.

Che ci crediate o no, sono giunta alla conclusione che non esiste nessuno più minimalista di un developer appassionato. Se potesse, descriverebbe il mondo in una sola riga di codice. E basta. Fine. Se per una cavolata deve scrivere più di 100 righe, soffre. Sta male. Inizia a sudare freddo. Ti maledice. 15 righe per un svg che gli fa pure schifo (molto probabilmente) sono un insulto alla sua professionalità.

Il codice che viene prodotto da Sketch quando esportate usando “esporta artboard” in basso a destra non è uno dei migliori ed ecco perché:

  1. contiene codice non necessario:

2. Descrive l’svg in modo non corretto (what?). Esatto. Avete salvato la vostra icona come medium-icon.svg, giusto? Beh, all’interno del codice non compare da nessuna parte ma vengono utilizzati i nomi delle artboard, delle pagine e dei singoli elementi che avete utilizzato in Sketch. E, come in questo caso, se avete utilizzato dei comodissimi copia-incolla per agevolarvi nella creazione del svg, probabilmente vi troverete ad avere a livello di codice più parti con lo stesso ID (sì, nella maggior parte dei casi è male 🙊). Tutti quei numeri che vedete descrivono la geometria dell’oggetto che avete creato. In questo caso i 4 poligoni che avete utilizzato per creare il logo di Medium.

Ora, eccovi qualche trucco per esportare il tutto correttamente:

  1. Se volete che in futuro tutta l’icona cambi colore (senza doverla esportare nuovamente ma semplicemente chiedendo ai vostri colleghi di farlo lato codice), siate gentili e unite tutti i poligoni che avete utilizzato in una forma unica, in modo tale da non avere ID diversi a livello di codice. Come fare? Selezionate tutte le forme che avete creato e unitele utilizzando “unione”:

e.. da daaaan! Unione fatta:

Ora, rinominate la nuova forma che avete creato con qualcosa di capibile (qui è il caso di usare medium-icon 👏), cliccate con il tasto destro e..

.. esatto. C’è la possibilità di esportare solo l’svg creato, risparmiando così (lato codice) delle righe inutili. Bene, cliccate su “copia codice svg” e aprite un nuovo file in Atom. Tasto destro, incolla e salvate il tutto aggiungendo l’estensione .svg. Ecco quello che i vostri dev potranno avere:

Prima di riassumere quello che effettivamente rappresentano queste righe, ricordo che:

<desc>Created with Sketch.</desc>
<defs></defs>

rappresenta del codice inutile che Sketch si rifiuta di togliere. Dunque sentitevi liberi di cancellare dal file queste due righe.

Ora, capiamo come leggere le parti che più ci tornano utili:

  • “width” e “height” indicano esattamente la larghezza e l’altezza del vostro svg. Come potete vedere, i valori sono gli stessi che trovate anche in Sketch. È possibile che, esportando l’svg, questi vengano modificati di qualche px. Date un’occhiata al codice per essere sicuri di avere le dimensioni corrette.
  • “viewBox” rappresenta dove il vostro logo è collocato: “0 0 137 118” indica che è posizionato a 0 px sull’asse delle ordinate e a 0 px sull’asse delle ascisse ed ha una dimensione di 137x118 px (come indicando anche dalla sua larghezza e altezza).

L’ “id” che vedete a livello di codice rappresenta il vostro logo, con tutte le caratteristiche che lo identificano:

stroke = “none” indica che non è stato utilizzato nessun bordo mentre “fill” indica che è stato utilizzato un riempimento di colore nero (#000000).


Ecco come, con qualche attenzione in più, è possibile migliorare il “dietro le quinte” del proprio lavoro in modo da creare svg “puliti” e facilmente utilizzabili anche a livello di codice.

    User Experience designer @Fightbean, reader, photographer, traveler, mugs lover, list maker.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade