foreignObject를 사용해 HTML과 인라인 CSS를 확대·축소 가능한 SVG 안에 감싸세요. 실시간으로 미리보기 하고 바로 사용할 수 있는 .svg 파일을 다운로드하세요. 모든 과정이 브라우저에서 이루어져요.
SVG의 foreignObject 요소를 사용하면 실제 HTML과 CSS를 벡터 이미지 안에 삽입할 수 있어요. 결과물은 깨끗하게 확대·축소되며 SVG를 지원하는 어디에서나 사용할 수 있어 배지, 카드, 화려한 라벨을 만들기에 좋아요.
foreignObject로 만든 SVG는 스크린샷이 아니에요. 마크업이 파일 안에서 그대로 살아있죠. 텍스트는 실제 텍스트로 남고 인라인 CSS가 계속 스타일을 적용하며, 아무것도 래스터화되지 않아서 파일 용량은 보통 몇 킬로바이트에 불과하면서도 어떤 확대 배율에서도 완벽하게 선명해요. 그래서 README 배지, 프로필 카드, 대시보드 위젯처럼 스타일이 적용된 HTML 조각을 호스팅하거나 삽입하거나 버전 관리할 수 있는 하나의 이미지 파일처럼 다루고 싶을 때 이 방식이 잘 맞아요.
결과물을 웹 브라우저에 표시할 거라면 이 도구를 사용하세요. 브라우저는 foreignObject를 기본적으로 렌더링해 선명하게 유지해줘요. 채팅 앱, 문서, 디자인 프로그램 등 어디서나 사용할 수 있는 픽셀 이미지가 필요하다면, 같은 마크업을 HTML to Image 변환기로 렌더링해 PNG, JPG, PDF로 만드세요. 두 도구는 서로 보완적이에요. 하나는 HTML을 확대·축소 가능한 벡터로 유지하고, 다른 하나는 이를 비트맵으로 고정해요.
HTML을 SVG로 변환하는 데 필요한 모든 정보예요.
HTML이 SVG의 <foreignObject> 안에 배치되고, 브라우저는 이를 벡터의 일부로 렌더링해요. 전체가 픽셀 깨짐 없이 확대·축소돼요.
인라인 CSS와 data-URI 이미지가 가장 잘 작동해요. 외부 리소스는 SVG가 사이트 밖에서 열릴 때 로드되지 않을 수 있으니, 가능하면 인라인으로 넣으세요.
아니요. SVG는 전적으로 브라우저에서 생성돼요.
네. 생성하기 전에 원하는 너비와 높이를 픽셀 단위로 입력하세요. 이 값이 SVG 캔버스와 viewBox를 결정하며, 벡터 파일이므로 나중에 확대해도 선명도를 잃지 않아요.
foreignObject는 웹 브라우저에서 렌더링돼요. 하지만 Inkscape나 Illustrator 같은 많은 그래픽 편집 프로그램은 이를 완전히 지원하지 않아요. 최상의 결과를 위해 SVG는 웹페이지나 브라우저 기반 도구에서 사용하세요.
이 도구는 마크업을 벡터로 유지하며 절대 래스터화하지 않아요. 픽셀 이미지가 필요하다면 같은 HTML을 PNG, JPG, PDF로 출력하는 HTML to Image 도구로 렌더링하세요.