Inkscape와 Photoshop에서 만든 아이콘은 CSS로 색상이 변경되지 않음

개발
1

포럼에 올릴 아이콘을 몇 개 만들었습니다. 이 아이콘들은 Photoshop으로 만들었는데, CSS를 통해 색상을 변경해도 색이 바뀌지 않습니다. 구글 사이트에서 다운로드한 다른 아이콘들은 모두 색이 변경되는데, Photoshop으로 만든 아이콘만 예외입니다.

image
image140×123 1.95 KB

구글 사이트에서 다운로드한 뉴스를 상징하는 svg 아이콘은 CSS에 의해 색상이 변경됩니다.

Photoshop으로 만든 TV 아이콘은 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 {
    
   
    /* chat 아이콘만 대상 */
    &.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);
    }
2

TV 아이콘은 실제로 SVG가 아니라 내장된 PNG(xlink:href="data:img/png...)입니다.

브라우저가 채우기 색상을 적용할 수 있도록 적절한 벡터 경로를 가진 SVG가 필요합니다.

3

포토샵은 보통 벡터 작업을 하지 않나요? 벡터를 만들어서 일반 SVG 파일로 저장할 수 있는 프로그램이 있을까요?

4

Inkscape는 훌륭하고 무료인 벡터 그래픽 소프트웨어입니다.

5

저는 Affinity Designer를 사용해요. 무료는 아니지만, Adobe 가격만큼도 안 하거든요 :sweat_smile:

6

이미 Adobe 생태계에 속해 있다면, Illustrator가 바로 찾고 있는 도구입니다.

7

포토샵을 사용하면 .png 파일을 .svg로 쉽게 변환한 후 마법 지우개로 흰색 부분을 지울 수 있습니다.

8

답변해 주셔서 감사합니다