상태바 최상단 요일 만들기 글자 만들
결론은 만들려고 했는대 안드로이드에서 차단 하고 있는 서비스라고 해서 결국 실패 했네요.
ㅠㅠ.. AM 뜨게 까지는 했는대 월 요일 이런식으로는 어렵군요
네, 맞습니다! 👍
제공해주신 SVG 코드를 메모장과 같은 일반 텍스트 편집기에 붙여넣고, 저장할 때 파일 확장자를 **.svg**로 지정하시면 유효한 SVG 파일이 생성됩니다.
💾 SVG 파일 저장 방법
다음은 SVG 파일을 만드는 정확한 단계입니다:
메모장 열기: Windows에서 **메모장(Notepad)**을 실행합니다.
코드 붙여넣기: 메모장 안에 제공해주신 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)파일 형식: 드롭다운 메뉴에서 **[모든 파일(*.*)]**을 선택해야 합니다.
인코딩: **
UTF-8**로 설정하는 것이 좋습니다. (한글을 포함할 때 깨짐 없이 저장됩니다.)
저장: 저장을 클릭하면
.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 (무료):
Inkscape에서 만든
.svg파일을 엽니다.월텍스트를 선택합니다.[Path] 메뉴에서 **[Object to Path (객체를 경로로)]**를 선택합니다.
변환된 파일을
.svg형식으로 다시 저장합니다.
Adobe Illustrator (유료):
Illustrator에서
.svg파일을 엽니다.월텍스트를 선택합니다.[Type] 메뉴에서 **[Create Outlines (윤곽선 만들기)]**를 선택합니다.
변환된 파일을
.svg형식으로 다시 저장합니다.
2. 변환된 SVG 파일 사용
위 과정을 거쳐 텍스트가 경로로 변환된 새로운 SVG 파일(월.svg, 화.svg 등)을 Asset Studio에 다시 가져오면, 프로그램이 텍스트 대신 점, 선, 곡선으로 이루어진 경로 데이터를 인식하게 되어 에러 없이 이미지를 불러올 수 있습니다.
요약: Asset Studio는 글자 형태가 아닌 그림 형태의 벡터만을 지원하므로, 외부 프로그램을 이용해 글자를 그림(경로)으로 변환해야 합니다.
댓글
댓글 쓰기