SVG → PNG 변환기

SVG에 width / height / viewBox가 없으면 200×200로 떨어집니다. SVG에 viewBox나 명시 크기를 넣으면 그 값을 따릅니다.

브라우저는 시스템에 있는 폰트로 SVG를 래스터화합니다. 커스텀 폰트를 쓰면 data: URL로 임베드하거나 벡터 도구에서 텍스트를 패스로 변환하세요.

아니요. SVG는 브라우저 Canvas에서 파싱·래스터화됩니다. 서버로 전송되지 않습니다.

처리되지 않습니다. CORS 때문이 아닙니다. 이미지로 불러온 SVG는 브라우저의 보안 정적 모드에서 동작해서 외부 참조를 아예 가져오지 않습니다. 같은 출처라도 마찬가지입니다. 그러면 Chromium이 그 자리에 깨진 이미지 표시를 그리기 때문에, PNG에는 빈자리가 아니라 눈에 보이는 자리표시자가 남습니다. 실제로 존재하는 주소를 가리킨 <image>와 없는 도메인을 가리킨 <image>가 완전히 같은 화소로 그려집니다. 비트맵을 SVG 안에 data: URI로 심으면 정상적으로 그려집니다.

이미지가 쓰일 화면의 밀도에 맞추세요. 1배는 CSS 픽셀 크기이고, 2배는 요즘의 휴대폰과 노트북 대부분을 감당하며, 3배는 가장 조밀한 휴대폰 디스플레이용입니다. 인터페이스가 아니라 문서나 슬라이드에 들어갈 PNG라면 2배로 내보내고 축소되도록 두는 편이 무난한 기본값입니다.

너무 작게 래스터화한 뒤 확대했기 때문입니다. SVG 자체에는 해상도가 없으므로 PNG의 선명함은 전적으로 내보내는 시점에 결정됩니다. 나중에 PNG 크기를 키우는 대신 배율을 올려 다시 내보내세요 — 사후 확대는 이미 있는 것을 보간할 수 있을 뿐입니다.

파일이 스스로 담고 있는 것만 렌더링될 수 있기 때문입니다. 외부 스타일시트에 있는 스타일, 페이지에서 상속받던 CSS 사용자 정의 속성, 그리고 내장되지 않고 참조만 된 글꼴은 SVG가 홀로 렌더링될 때 모두 사용할 수 없습니다. 스타일을 마크업 안에 인라인으로 넣고 텍스트를 패스로 변환하면 내보낸 결과가 디자인한 그대로가 됩니다.