SVG를 HTML로 변환

SVG를 HTML로 온라인 변환하기

SVG 파일을 가져오거나 마크업을 붙여넣어 HTML 페이지용 인라인 SVG를 만드세요. 결과를 미리 보고, 최적화 설정을 조정한 뒤 코드를 복사하세요. 분석, 최적화, 변환은 모두 브라우저에서 로컬로 실행되며, SVG가 서버로 전송되지 않아요.

반응형 인라인 SVG 준비하기

viewBox를 유지하면 SVG 좌표계가 보존돼요. SVG에 사용할 수 있는 viewBox가 있다면 고정된 너비와 높이를 제거하고, 직접 작성한 CSS로 크기를 지정하세요.

SVG 크기와 절감량 이해하기

“원본 크기”는 입력한 SVG의 크기예요. “최적화된 SVG 크기”는 주석 제거, 좌표 반올림, 코드 압축 등 선택한 옵션으로 처리한 뒤의 크기예요. 크기는 kB 단위로 표시되며, 1 kB는 1,000바이트예요. “절감”은 줄어든 비율로, 10 kB에서 7 kB가 되면 30%를 절감한 거예요. 읽기 쉬운 서식 등으로 결과가 더 커지면 대신 “크기 증가”가 표시돼요. 이 수치는 SVG 마크업끼리 비교한 것이며, JSX, React, CSS Data URI, Base64로 내보낸 결과의 크기가 아니에요.

소수점 정밀도와 들여쓰기

소수점 정밀도는 좌표와 숫자 속성에서 소수점 아래 몇 자리까지 남길지 정해요. 정밀도가 2면 12.34567은 12.35가 돼요. 소수 자릿수를 줄이면 파일 크기가 작아질 수 있지만 세부 표현이 달라질 수 있어요. 기본값 3은 출발점일 뿐이니 미리보기를 확인하세요. 들여쓰기는 공백 2칸, 공백 4칸 또는 탭으로 HTML과 JSX 코드를 읽기 쉽게 만들며, 이미지는 바뀌지 않아요. “SVG 압축”은 불필요한 서식 공백을 없애 결과를 짧게 만들기 때문에, 압축이 켜져 있는 동안에는 들여쓰기를 사용할 수 없어요.

HTML, JSX, React, SVG Data URI

HTML 결과는 인라인 SVG 마크업이며, SVG 파일로 다운로드돼요. JSX는 속성 이름과 인라인 스타일을 React에 맞게 바꿔요. React 컴포넌트는 이를 표준 SVG props를 받는 TypeScript 함수로 감싸요. CSS Data URI는 background-image 선언을, Base64는 인코딩된 SVG 이미지 URI를 만들어요. 크기 통계는 최적화된 SVG 기준이며, 더 큰 인코딩 형식의 크기가 아니에요. 한 페이지에 인라인 사본을 여러 개 넣기 전에 ID를 확인하세요.

로컬에서 처리하는 정적 SVG

미리보기는 실행 가능한 페이지 마크업이 아니라 격리된 이미지로 표시돼요. 스크립트, 삽입된 HTML, 애니메이션, 외부 이미지, 스타일시트는 제거되고, 지원되는 인라인 표현 스타일과 로컬 프래그먼트 참조는 유지돼요. 이 도구는 정적인 그림용이라서, 지원되지 않는 기능이 있으면 모양이 달라질 수 있어요. currentColor는 단색 채우기와 선 색을 바꾸며, 인라인으로 쓰면 상위 요소의 색을 따라요. 이미지 미리보기는 자체 색상 환경을 사용해요.