래스터화 크기가 중요한 이유
- 플랫폼 자산 요구 사항은 백분율이 아닌 정확한 픽셀 크기를 지정합니다.
- 너무 작은 크기로 래스터화하면 SVG 연산에서 보존되는 서브픽셀 디테일이 손실됩니다.
- 2배 래스터화를 통해 HiDPI 화면에 최적화된 레티나급 화질의 이미지를 생성합니다.
- 파비콘 크기(16px)의 경우 힌팅 및 픽셀 스냅에 특별한 주의가 필요합니다.
SVG는 무한히 확장 가능한 수학적 표현 방식입니다. 전통적인 의미의 '크기 조정'은 없습니다. 실제로 하는 일은 래스터화 해상도를 선택하는 것입니다. 즉, 벡터가 이미지로 렌더링되는 픽셀 크기를 결정하는 것입니다.
여기에 이미지를 넣어주세요
100% 비공개. 업로드되지 않습니다.
Figma, Illustrator, Inkscape 또는 기타 벡터 도구에서 .svg 파일을 드래그 앤 드롭하세요. 브라우저의 SVG 엔진이 지정한 크기로 렌더링합니다.
너비 또는 높이를 픽셀 단위로 정확하게 입력하세요. 가로세로 비율은 기본적으로 고정됩니다. SVG는 선택한 크기로 렌더링되며, 흐릿함이나 오류 없이 계산 결과가 선명하게 유지됩니다.
출력 파일은 투명도가 유지되는 무손실 PNG 파일입니다. 래스터화된 크기에서는 선명도가 유지되지만, 더 큰 화면에서는 이 임계값 이상의 픽셀이 표시될 수 있습니다. 향후 재내보내기를 위해 SVG 파일도 보관하십시오.
SVG 파일은 JPG 파일처럼 크기를 조절하는 방식이 아닙니다. 출력 크기를 선택하면 브라우저의 SVG 렌더러가 정확히 해당 크기로 픽셀을 생성합니다. 마음이 바뀌었다고요? 같은 SVG 파일에서 다시 내보내면 품질 손실 없이 출력됩니다.
SVG 크기 조절 기능
SVG 수학 연산은 어떤 픽셀 크기에서도 선명하게 렌더링됩니다.
SVG 배경 및 알파 채널이 유지됩니다.
정확도를 위해 Chrome/Firefox의 기본 렌더러를 사용합니다.
디자인 시스템은 아이콘, 로고 및 UI 요소의 정확한 크기를 지정합니다. SVG 마스터는 이러한 사양을 충족하기 위해 존재하며, 다시 그릴 필요 없이 정의된 모든 크기로 내보낼 수 있습니다. 이 도구는 크기 표의 모든 슬롯에 대해 픽셀 단위로 정확한 PNG 파일을 SVG에서 생성합니다.
래스터화와 크기 조정, 투명도 및 플랫폼 크기.
SVG는 벡터 연산으로, 픽셀 해상도가 따로 정해져 있지 않습니다. 이 도구는 SVG 파일을 사용자가 지정한 픽셀 크기의 PNG 파일로 래스터화하는 역할을 합니다. SVG 원본 파일은 그대로 유지되므로, 언제든지 동일한 파일에서 원하는 크기로 내보낼 수 있습니다.
레티나(HiDPI) 화면의 경우, CSS 표시 크기의 2배로 내보내세요. 예를 들어 200x60 CSS 픽셀로 표시되는 로고는 선명한 레티나 화면 구현을 위해 400x120으로 래스터화해야 합니다. 1배로 내보내면 레티나 디스플레이에서 가장자리가 흐릿하게 보일 수 있습니다.
네, 8비트 알파 채널을 완벽하게 지원합니다. SVG 배경은 명시적으로 설정하지 않는 한 투명하며, 래스터화된 PNG 이미지에도 해당 투명도가 적용됩니다. 앤티앨리어싱 처리된 가장자리, 부드러운 오버레이, 불투명도 값 모두 올바르게 렌더링됩니다.
브라우저 렌더링 엔진에서 지원하는 모든 SVG 1.1 기능(경로, 도형, 그라디언트, 필터(흐림, 그림자, 색상 매트릭스), 클리핑, 마스킹 및 CSS 스타일링)을 사용할 수 있습니다. SVG 2 기능은 브라우저에 따라 다릅니다. SMIL 애니메이션은 정적 프레임으로 렌더링됩니다.
iOS: 1024×1024 (앱 스토어), 180×180 (@3배율), 120×120 (@2배율), 87×87, 80×80, 60×60, 58×58, 40×40, 29×29, 20×20. Android: 512×512 (구글 플레이), 192×192 (xxxhdpi), 144 (xxhdpi), 96 (xhdpi), 72 (hdpi), 48 (mdpi).
SVG는 XML 텍스트이므로 소스 파일 크기에는 제한이 없습니다. 출력 PNG 파일의 크기는 매우 큰 크기(16000×16000 이상)에서는 브라우저 메모리 용량에 의해 제한됩니다. 포스터 크기의 래스터화를 위해서는 Inkscape 명령줄 도구를 사용하는 것이 좋습니다.