Les icônes créées dans Inkscape et Photoshop ne changent pas de couleur via CSS

Dev
1

J’ai créé quelques icônes pour les mettre sur mon forum, je les ai faites dans Photoshop, mais quand je change leurs couleurs via CSS, elles ne changent pas, toutes les autres icônes que j’ai téléchargées sur le site Google changent, sauf les icônes que j’ai faites dans Photoshop.

image
image140×123 1.95 KB

l’icône svg téléchargée sur le site Google qui symbolise les actualités change de couleur par le CSS

l’icône TV que j’ai faite dans Photoshop ne change pas de couleur par CSS

svg actualités


<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 « J'aime »
2

Votre icône de télé est un PNG intégré (xlink:href=\"data:img/png...), pas un véritable SVG.

Vous avez besoin d’un SVG avec des tracés vectoriels appropriés pour que le navigateur puisse appliquer la couleur de remplissage.

6 « J'aime »
3

Photoshop ne fait pas de vecteurs normalement ? Quel programme puis-je utiliser pour créer des vecteurs et les enregistrer en SVG normal ?

1 « J'aime »
4

Inkscape est un logiciel de graphisme vectoriel gratuit et performant.

6 « J'aime »
5

J’utilise Affinity Designer. Ce n’est pas gratuit, mais ce n’est pas non plus le prix d’Adobe :sweat_smile:

4 « J'aime »
6

Si vous faites déjà partie de l’écosystème Adobe, Illustrator serait l’outil que vous recherchez.

5 « J'aime »
7

Lorsque vous utilisez Photoshop, vous pouvez facilement convertir le .png en .svg et supprimer les taches blanches à l’aide de la gomme magique.

1 « J'aime »
8

merci pour les réponses