Cosa sono gli SVG?
Gli SVG, cioé "scalable vector graphics", al contrario delle immagini tradizionali che sono composte da pixels sono elementi creati usando la grafica vettoriale, che usa la matematica per rappresentare le immagini. Possiamo quindi andare a ridimensionare i files quante volte vogliamo e non perderanno mai la loro nitidezza e qualitá, ecco perché si prestano ottimamente ad essere usati sul web se consideriamo che il responsive design é un elemento chiave per rendere il vostro sito professionale.
La guida:
Ma ora andiamo al succo del discorso, e cioé come andare a cambiare il colore dei vostri file SVG all'interno di Webflow in modo facile e veloce. Questo è un trucco facile quanto utilissimo se volete personalizzare il vostro sito cambiando per esempio il colore del vostro logo.
Se invece preferite il formato video non preoccupatevi, ho creato un tutorial veloce tutto per voi: come modificare il colore degli SVG in modo dinamico
Prima di tutto andate sul vostro desktop, perché dobbiamo assicurarci che la proprietà del colore dell'SVG sia impostata su "currentColor". Per farlo, prendete il vostro file, cliccate con il tasto destro, e apritelo utilizzando un editor di testo, per esempio “Notepad” di Windows.
Cercate l'opzione fill
Non fatevi intimorire delle tutte quelle righe di codice che comprariranno davanti ai vostri occhi e cercate “fill=”. La funzione cerca cliccando CTRL+F vi renderá le cose facili.
Molto probabilmente vi ritroverete con un file con diverse proprietá uguali, quindi dovrete andare a capire quali delle opzioni vorrete modificare. Per esempio avete un file con diverse scritte di vario colore ma avete lo sfondo blu che volete modificare? Bene, cercate l'opzione “fill=” con all'interno quel determinato colore.
A questo punto procedete cambiandone la proprietá. Se quindi per esempio era impostata su “fill="white”, la cambierete con “fill="CurrentColor”. Copiate tutto il codice ed andate su Webflow. Invece di postare il vostro elemento come immagine, dovrete usare un’altra strada, cioé usare l’elemento “Embed”.
.png)
Inserite il codice che avete compiato dal file di testo copiandolo all’interno dell’elemento Embed e salvate.
Fatto, ora avrete il vostro file SVG pronto a scatenare una moltitudine di colori peggio di un Camaleonte, e per farlo vi basterá cambiare il colore del Font dell’Embed che avete creato dal pannello degli stili sulla destra. Niente di piú facile!
