Symbole in Inkscape und Photoshop geändert Farben über CSS nicht

Entwickler
1

Ich habe einige Icons für mein Forum erstellt. Ich habe diese Icons in Photoshop erstellt, aber wenn ich ihre Farben über CSS ändere, ändern sie sich nicht. Alle anderen Icons, die ich von der Google-Website heruntergeladen habe, ändern sich, außer den Icons, die ich in Photoshop erstellt habe.

image
image140×123 1.95 KB

Das SVG-Icon, das von der Google-Website heruntergeladen wurde und die Nachrichten symbolisiert, ändert seine Farbe durch CSS.

Das TV-Icon, das ich in Photoshop erstellt habe, ändert seine Farbe nicht durch CSS.

SVG Nachrichten


<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 „Gefällt mir“
2

Ihr TV-Symbol ist ein eingebettetes PNG (xlink:href="data:img/png...), nicht tatsächlich eine SVG.

Sie benötigen eine SVG mit ordnungsgemäßen Vektorpfaden, damit der Browser die Füllfarbe anwenden kann.

6 „Gefällt mir“
3

Erstellt Photoshop nicht normalerweise Vektorgrafiken? Welches Programm kann ich verwenden, um Vektorgrafiken zu erstellen und als normale SVG zu speichern?

1 „Gefällt mir“
4

Inkscape ist eine gute und kostenlose Vektorgrafiksoftware.

6 „Gefällt mir“
5

Ich benutze Affinity Designer. Es ist nicht kostenlos, aber auch nicht zu Adobe-Preisen :sweat_smile:

4 „Gefällt mir“
6

Wenn Sie bereits im Adobe-Ökosystem sind, ist Illustrator das Werkzeug, nach dem Sie suchen.

5 „Gefällt mir“
7

Wenn Sie Photoshop verwenden, können Sie die .png-Datei einfach in eine .svg konvertieren und die weißen Flecken mit dem Radiergummi löschen.

1 „Gefällt mir“
8

Danke für die Antworten