나는 도구를 사용하여 SVG 파일 거래를 다크 모드로 쉽게 변환할 수 있습니다.

안녕하세요 여러분,

오늘 저는 Web Designer 및 Webfront Engineer를 위한 매우 멋진 도구를 소개하고자 합니다. 2022년에는 Internet Explorer를 마침내 사용할 수 없게 됩니다. 이것은 모든 웹 프론트 엔지니어에게 매우 기쁜 소식이지만 디자이너와 엔지니어를 위한 다음 전투의 시작을 알리는 신호이기도 합니다. 그 전투 중 하나는 DARK MODE SUPPORT입니다.

하이브리드 SVG란 무엇입니까?

SVG 파일은 다음 CSS를 삽입하여 밝은 모드와 어두운 모드를 모두 지원할 수 있습니다(자세한 정보는 Here 클릭!).

@media (prefs-color-scheme: dark)

예를 들어 Faviconthis page을 확인하고 Dark 모드 또는 Light 모드를 변경해 보십시오(이 페이지는 일본어로만 되어 있습니다).
아주 멋져!!!!

그래서 저는 다중 모드를 지원할 수 있는 SVG 파일을 "하이브리드 SVG"라고 부릅니다.

두통 문제

Drawtools(예: Illustrator)에서 이 변환을 수행하는 기능은 제공되지 않습니다(적어도 내가 말할 수 있는 것에서는).
그렇다면 이러한 작업은 누가 담당하게 될까요? 프론트엔드 엔지니어? 디자이너?

색상이 한두 가지면 디자이너가 텍스트 편집기를 열고 처리할 수 있습니다.
하지만 다른 디자이너가 파일을 편집할 수 없다면 어떻게 될까요? 디자이너가 많은 색상을 정확하게 변경할 기술, 경험 또는 시간이 없다면 어떻게 될까요? 디자이너가 "이봐, 나는 프로그래머가 아니야!"라고 말한다면?
또한 엔지니어가 디자이너의 작은 호기심을 위해 "sed 명령"을 사용하는 것도 이상합니다.

해결하자

그것에 대해 불평하는 것은 아무 소용이 없습니다.
제 좌우명은 "아무것도 아닌 것보다 낫다"와 "불평하기보다 스스로 하라"입니다.

좋아, 방금 해냈어!

만들었습니다Hybrid SVG Maker .

바로 "Hybrid SVG Maker"가 유용합니다.
아직 세상에 나오지 않은 디자인을 다른 서버에 올리고 싶지 않으신가요? 이 사이트를 사용하면 SVG를 서버에 업로드하지 않고도 색상 대체 및 다크 모드를 지원하는 SVG 파일을 쉽게 만들 수 있습니다.

요약하면

아직 베타 버전이지만 시도해보십시오.