Le icone realizzate in Inkscape e Photoshop non cambiano colore tramite CSS

Sviluppatore
1

Ho creato alcune icone da mettere sul mio forum, le ho create in Photoshop, ma quando cambio i loro colori tramite CSS non cambiano, tutte le altre icone che ho scaricato dal sito Google cambiano, tranne le icone che ho creato io in Photoshop.

image
image140×123 1.95 KB

l’icona svg scaricata dal sito Google che simboleggia le notizie cambia colore tramite il css

l’icona della TV che ho creato in Photoshop non cambia colore tramite CSS

svg news

<symbol id="news">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M7.75 41.8q-1.5 0-2.525-1.025T4.2 38.25V8.95q0-1.05.525-1.25.525-.2 1.275.5l1.35 1.4 2.1-2.1q.2-.25.55-.4.35-.15.65-.15.35 0 .675.15.325.15.625.35L14 9.6l2.1-2.15q.25-.2.575-.35.325-.15.675-.15.35 0 .675.15.325.15.575.4l2.05 2.1 2.15-2.15q.2-.2.525-.375T24 6.9q.35 0 .65.175.3.175.6.375l2.1 2.15 2.1-2.1q.2-.25.55-.4.35-.15.65-.15.35 0 .675.15.325.15.625.35L34 9.6l2.1-2.15q.25-.2.575-.35.325-.15.675-.15.35 0 .675.15.325.15.575.4l2.05 2.1 1.4-1.4q.7-.7 1.25-.5.55.2.55 1.25v29.3q0 1.5-1.05 2.525T40.3 41.8Zm0-2.9h14.8V25.05H7.1v13.2q0 .3.175.475t.475.175Zm17.75 0h14.8q.3 0 .475-.175t.175-.475v-4.8H25.5Zm0-8.4h15.45v-5.45H25.5ZM7.1 22.15h33.85V15.6H7.1Z" />
</svg>

</symbol>

svg TV

<symbol id="tv">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
  <image id="Camada_1" data-name="Camada 1" x="6" y="36" width="188" height="128" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAACACAYAAACx8QN9AAAFGElEQVR4nO3bzWtcVRiA8WcySWobG23Uav2maGnV1q+dtYi6iKCVItKFuPMP6MKVC5ci6kJE3OlGXIoIRbCbaqkiuCmCrRVEsUpjQy21VUlSk5FT38QQJnHm2kwy8z4/GMiUzsyde58czr33pEbrhoCNwO3ADuBm4ApgKzDTxvtIVfUBx4HfgBPAUeA74CTwRyvv2UrwVwM7gUeAXcC1wBpgAKjHzw0PoTqg9DoJTAMX4ufTwKfAQeDzeL6opYIfBJ4DRoE7Y3Qf9qhqFToHjMeIfwB4B5hqtpmLBX8XsA94DLjRI6wu8jPwMfAG8PXCza43eV4ifxHY64iuLlSavQ/YDJwBfpg/5Z4ffDkheAp4CXjAI60udxtwN3AqTnQvRj8/+IeB12K+LvWCct65HTgWI/3cHH49sB94yMOsHnQI2A2cnx3hy5z9CWCtR1s9aDiuOn5S5u0jwJPABo+0etSGaHykP66zb2rxJlQzv8bZsDeftJxqMThfVeEzatH4aAl+S9w1bVe5vfse8D4w4aFWB1wGPA08G8ta2lEa31KC76+4nYfjEuaYR1od9C1wS5xztqu/L9YltDsdKWsYjhi7VsBYtDfZ5keXxqf7Km7vRCzekVbCharT6KrB1yvO+6VLYaDJspiWVA1e6koGr1QMXqkYvFIxeKVi8ErF4JWKwSsVg1cqBq9UDF6pGLxSMXilYvBKxeCVisErFYNXKgavVAxeqRi8UjF4pWLwSsXglYrBKxWDVyoGr1QMXqkYvFIxeKVi8ErF4JWKwSsVg1cqBq9UDF6pGLxSMXilYvBKxeCVisErFYNXKgavVAxeqRi8UjF4pWLwSsXglYrBKxWDVyoGr1QMXqkYvFIxeKVi8ErF4JWKwSsVg1cqBq9UqgbfAGZMRStkJhpsW9Xg+6p+oHQJNKq2W15Uq/C6NcANwDqPnjpsXbS3psLH1vpnf2jzheV1jwJ7gQ+Bvxzxtcxq0d2eaK+/zY+72Hh50VlgusK2bgbeAp4BvgF+N3otkxLr5cA2YGfFmUVp/Gx5o3uAj4DrK27rhXgYu5ZTaXUgHlWcBB4vI/yxeGyqOJ//PxshdUJjtvN6DPUngFFgvbtfPWgM2Ad8X4/v9mPMke6vePYrrVbngDeBd8v21edtZBnyh4DtwKCHTz2gXEh5G3gd+JMFwZd/+ApYC9zq9EZdbixG9VeB8dmvUl/wncpvxEFgEtgRI3271zullTQBnAJeAV6OKc2chcET6xS+BL4ArgSuifBrFa/iSMttJi6NnwYOAM8DHzS7v7RUwPU4kX0Q2A3sigv/Rq/VpBE3Pg8D+4HPYqbS9GZqK/GW0X0YuAnYCtwL3BHPN1a8S9tpjZiajcQ9A39p/9GIkfFMLA/phv1Sjzn5T3Gh5QhwPJ6X6cvUUi9u9wsOxjRnOE5q13XJHdZyUK+LOd02/w5gzkyMji8Av3TJDcRaXGA5H4Gf/a/I52v3hHQqfrvGW/i/q81w7ByXQPyrEfvk0MKTu16VaaQbcmRvqi/2TQoGoFQMXqkYvFIxeKVi8ErF4JWKwSsVg1cqBq9UsgVfX2RJdFbp9kemP+5oxMrOCaOfMx2PNOuLMgVfVkwejRWC/S4iu7jqsCwJLqsly77pfcDfp0O4OSV6wzgAAAAASUVORK5CYII=" />
</svg>


</symbol>

css

#my-gradient-1 {
    --color-stop-1: #01cafb;
    --color-stop-2: #87fc9d;
}

#my-gradient-2 {
    --color-stop-1: #01cafb;
    --color-stop-2: #87fc9d;
    --color-stop-3: #01cafb;
}

.svg-icon, .svg-icon-title {
    

    /* targets only chat icon */
    
    &.d-icon-news {
        fill: url(#my-gradient-2) var(--header_primary-low-mid);
    }
    &.d-icon-tv {
        fill: url(#my-gradient-2) var(--header_primary-low-mid);
    }
1 Mi Piace
2

L’icona della tua TV è un PNG incorporato (xlink:href=\"data:img/png...), non un vero SVG.

Hai bisogno di un SVG con percorsi vettoriali corretti in modo che il browser possa applicare il colore di riempimento.

6 Mi Piace
3

Photoshop non crea vettori normalmente? Quale programma posso usare per creare vettori e salvarli come SVG normali?

1 Mi Piace
4

Inkscape è un software di grafica vettoriale gratuito e valido.

6 Mi Piace
5

Uso Affinity Designer. Non è gratuito ma non ha nemmeno il prezzo di Adobe :sweat_smile:

4 Mi Piace
6

Se sei già nell’ecosistema Adobe, Illustrator sarebbe lo strumento che stai cercando.

5 Mi Piace
7

Quando si utilizza Photoshop, è possibile convertire facilmente il .png in un .svg ed eliminare le macchie bianche utilizzando la gomma magica.

1 Mi Piace
8

grazie per le risposte