상태바 최상단 요일 만들기 글자 만들

결론은 만들려고 했는대 안드로이드에서 차단 하고 있는 서비스라고 해서 결국 실패 했네요.

ㅠㅠ.. AM 뜨게 까지는 했는대 월 요일 이런식으로는 어렵군요


 네, 맞습니다! 👍

제공해주신 SVG 코드를 메모장과 같은 일반 텍스트 편집기에 붙여넣고, 저장할 때 파일 확장자를 **.svg**로 지정하시면 유효한 SVG 파일이 생성됩니다.


💾 SVG 파일 저장 방법

다음은 SVG 파일을 만드는 정확한 단계입니다:

  1. 메모장 열기: Windows에서 **메모장(Notepad)**을 실행합니다.

  2. 코드 붙여넣기: 메모장 안에 제공해주신 SVG 코드를 정확히 붙여넣습니다.

    코드 스니펫
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <text x="12" y="17" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#000000">월</text>
    </svg>
    
  3. 다른 이름으로 저장:

    • 메모장에서 [파일] > **[다른 이름으로 저장]**을 선택합니다.

    • 파일 이름: 원하는 이름 뒤에 **.svg**를 붙입니다. (예: 월요일.svg)

    • 파일 형식: 드롭다운 메뉴에서 **[모든 파일(*.*)]**을 선택해야 합니다.

    • 인코딩: **UTF-8**로 설정하는 것이 좋습니다. (한글을 포함할 때 깨짐 없이 저장됩니다.)

  4. 저장: 저장을 클릭하면 .svg 파일이 완성됩니다.

이 방법으로 월요일부터 일요일까지 각 요일의 SVG 파일을 모두 만들 수 있습니다.


📝 7개 요일 SVG 코드 (24x24 px)

요청하셨던 월, 화, 수, 목, 금, 토, 일 7개 파일에 사용할 수 있는 텍스트 코드를 정리해 드립니다. 각각 복사하여 다른 이름으로 저장하시면 됩니다.

요일파일 이름 예시SVG 코드
월.svg<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><text x="12" y="17" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#000000">월</text></svg>
화.svg<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><text x="12" y="17" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#000000">화</text></svg>
수.svg<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><text x="12" y="17" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#000000">수</text></svg>
목.svg<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><text x="12" y="17" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#000000">목</text></svg>
금.svg<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><text x="12" y="17" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#000000">금</text></svg>
토.svg<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><text x="12" y="17" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#000000">토</text></svg>
일.svg<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><text x="12" y="17" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#000000">일</text></svg>

7개의 SVG 파일을 모두 만드신 후에는, 이 파일들을 선택하고 마우스 오른쪽 버튼을 눌러 [압축] 기능을 사용하여 하나의 ZIP 파일로 묶을 수 있습니다.

혹시 이 외에 다른 스타일이나 색상으로 요일 아이콘을 만들고 싶으신가요?



제공해주신 스크린샷과 에러 메시지를 보면, 사용하시는 구글 프로그램(Asset Studio로 보입니다)이 SVG 파일의 <text> 요소를 지원하지 않아 발생한 문제입니다.

에러 메시지: The image may be incomplete: ERROR @ line 1: <text> is not supported

즉, 이전 대화에서 제가 제안해 드린 SVG 코드는 텍스트를 포함하고 있는데, 해당 프로그램은 벡터 에셋(Vector Asset)으로 텍스트 형태의 SVG를 가져오는 것을 지원하지 않는 것입니다.

🛠️ 해결 방법: <text><path>로 변환

이 문제를 해결하려면 SVG 파일에서 <text> 요소를 경로(Path) 요소인 <path>로 변환해야 합니다. 경로(Path)는 대부분의 벡터 그래픽 프로그램에서 표준적으로 지원하는 방식입니다.

1. 텍스트를 윤곽선(Outlines)으로 변환할 수 있는 도구 사용

SVG 파일을 직접 편집하기는 복잡하므로, 다음 중 하나의 프로그램을 사용하여 텍스트를 벡터 경로로 변환하는 것이 가장 쉽고 확실한 방법입니다.

  • Inkscape (무료):

    1. Inkscape에서 만든 .svg 파일을 엽니다.

    2. 텍스트를 선택합니다.

    3. [Path] 메뉴에서 **[Object to Path (객체를 경로로)]**를 선택합니다.

    4. 변환된 파일을 .svg 형식으로 다시 저장합니다.

  • Adobe Illustrator (유료):

    1. Illustrator에서 .svg 파일을 엽니다.

    2. 텍스트를 선택합니다.

    3. [Type] 메뉴에서 **[Create Outlines (윤곽선 만들기)]**를 선택합니다.

    4. 변환된 파일을 .svg 형식으로 다시 저장합니다.

2. 변환된 SVG 파일 사용

위 과정을 거쳐 텍스트가 경로로 변환된 새로운 SVG 파일(월.svg, 화.svg 등)을 Asset Studio에 다시 가져오면, 프로그램이 텍스트 대신 점, 선, 곡선으로 이루어진 경로 데이터를 인식하게 되어 에러 없이 이미지를 불러올 수 있습니다.

요약: Asset Studio는 글자 형태가 아닌 그림 형태의 벡터만을 지원하므로, 외부 프로그램을 이용해 글자를 그림(경로)으로 변환해야 합니다.

댓글

이 블로그의 인기 게시물

발로란트 1067 오류

허리 펴면 멍든 느낌으로 아풀때 척추 경직