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