SVG 플레이스홀더 생성기

애플리케이션에서 사용할 SVG 플레이스홀더 이미지를 생성합니다.

가로, 세로, 배경색, 글자색과 글자 크기를 정해 이미지 자리 표시용 SVG를 만듭니다. SVG 코드와 Base64 값을 함께 제공합니다.

사용 순서

가로와 세로 크기를 픽셀 단위로 입력합니다.
Background, Text color에서 색을 고르고 Font size로 글자 크기를 정합니다.
Custom text를 비워 두면 "가로x세로" 글자가 가운데 들어갑니다. 직접 쓰면 그 문구가 들어갑니다.
SVG HTML element 또는 SVG in Base64 값을 복사하거나 Download svg로 파일을 받습니다.

예시

가로 300, 세로 150, Custom text를 비우면 글자는 300x150이 되고, SVG 코드는 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150" width="300" height="150">으로 시작합니다. Base64 값은 PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcv로 시작합니다.

한계

Custom text는 이스케이프 없이 SVG 코드에 그대로 들어갑니다. & 나 < 같은 문자를 넣으면 XML이 깨져서 이미지가 표시되지 않습니다. 글꼴은 monospace로 고정이고, 여러 줄 문구는 지원하지 않습니다. Use exact size를 끄면 width와 height 속성 없이 viewBox만 남아 화면에 맞춰 늘어납니다.

보안 주의

Custom text는 SVG 마크업의 일부로 들어갑니다. 생성한 코드를 웹페이지에 직접 붙이기 전에 텍스트에 < 나 > 기호가 없는지 확인하세요. 다른 사람이 보낸 문구를 그대로 넣으면 의도하지 않은 태그가 섞여 페이지가 깨질 수 있습니다.

배경 지식

SVG는 도형과 글자를 XML 텍스트로 적는 벡터 그림 형식입니다. 이 도구가 만드는 코드에는 svg 루트 요소, 배경 사각형(rect), 가운데 정렬된 text 요소가 들어 있습니다. 텍스트 파일이라서 소스를 바로 읽을 수 있고, 어떤 크기로 늘려도 선이 깨지지 않습니다.

viewBox는 그림이 그려지는 좌표 공간이고, width와 height는 화면에 표시되는 기본 크기입니다. 두 값을 같게 두면 픽셀 단위로 정확히 맞고, 속성을 빼면 부모 요소의 크기에 맞춰 비율을 유지하며 늘어납니다. 반응형 레이아웃의 자리 표시에는 보통 속성을 빼고 씁니다.

Base64는 바이너리나 텍스트 데이터를 64개의 문자로 바꿔 적는 방식입니다. 세 바이트를 네 글자로 바꾸므로 원래보다 약 33% 커집니다. data:image/svg+xml;base64, 형식으로 img 태그의 src에 넣으면 별도 파일 없이 이미지를 쓸 수 있습니다.

자주 묻는 질문

PNG 형식의 자리 표시가 필요하면 어떻게 하나요?

이 도구는 SVG만 만듭니다. 내려받은 SVG 파일을 이미지 편집기나 변환 도구로 열어 PNG로 저장하면 됩니다. 변환 과정에서 글꼴이 바뀔 수 있으니 결과를 한 번 확인하세요.

Base64 값을 쓰면 캐시에 불리한가요?

작은 이미지라면 요청이 줄어서 유리합니다. 다만 긴 문자열이 HTML이나 CSS에 그대로 들어가 파일이 커지고, 이미지를 따로 캐시하지 못합니다. 여러 페이지에서 같은 자리 표시를 쓴다면 SVG 파일로 따로 두는 편이 낫습니다.

글자가 박스 밖으로 넘치면 어떻게 하나요?

Font size를 줄이거나 가로 값을 키우세요. 글꼴 크기는 px 단위로 고정되어 있어 문구 길이를 자동으로 맞추지 않습니다. 줄바꿈도 지원하지 않으므로 긴 문구는 짧게 줄여 쓰는 것이 좋습니다.