Icons made in Inkscape and Photoshop do not have colors changed via CSS

Dev
1

I made some icons to put on my forum, I made these icons in Photoshop, but when I change their colors via CSS they don’t change, all the other icons that I downloaded from the google site change, except the icons that I I did it in photoshop

image

the svg icon downloaded from the google site that symbolizes the news has its color changed by the css

the TV icon that I made in photoshop does not change the color by 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+6VLYaDJspiWVA1e6koGr1QMXqkYvFIxeKVi8ErF4JWKwSsVg1cqBq9UDF6pGLxSMXilYvBKxeCVisErFYNXKgavVAxeqRi8UjF4pWLwSsXglYrBKxWDVyoGr1QMXqkYvFIxeKVi8ErF4JWKwSsVg1cqBq9UDF6pGLxSMXilYvBKxeCVisErFYNXKgavVAxeqRi8UjF4pWLwSsXglYrBKxWDVyoGr1QMXqkYvFIxeKVi8ErF4JWKwSsVg1cqBq9UDF6pGLxSMXilYvBKxeCVisErFYNXKgavVAxeqRi8UjF4pWLwSsXglYrBKxWDVyoGr1QMXqkYvFIxeKVi8ErF4JWKwSsVg1cqBq9UqgbfAGZMRStkJhpsW9Xg+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 Like
2

Your TV icon is an embedded PNG (xlink:href="data:img/png...), not actually a SVG.

You need a SVG with proper vector paths so the browser can apply the fill color.

6 Likes
3

Does Photoshop not make vector normally? What program can I make vector and save as normal svg?

1 Like
4

Inkscape is a good and free vector graphics software.

6 Likes
5

I use Affinity Designer. It’s not free but it’s not Adobe price either :sweat_smile:

4 Likes
6

If you’re already in the Adobe ecosystem, Illustrator would be the tool you’re looking for.

5 Likes
7

When using photoshop, you can easily convert the .png into a .svg and delete the white spots using magic eraser.

1 Like
8

thanks for answers