주요 기능
- 탁월한 SVG-PNG 변환
- 모든 PNG 출력에서 투명도 유지
- 사용자 지정 출력 크기 및 해상도 옵션
- 효율적인 일괄 변환 기능
- 사용자 친화적이고 간단한 디자인
스케일러블 벡터 그래픽(SVG) 이해하기
SVG(스케일러블 벡터 그래픽)는 그래픽에 사용되는 주요 벡터 파일 형식으로, 내장된 애니메이션 지원으로 유명합니다. SVG 이미지는 XML을 기반으로 하기 때문에 검색, 색인, 스크립팅 및 압축이 가능합니다. 또한 텍스트 편집기 또는 Adobe Illustrator나 Inkscape와 같은 전문 벡터 디자인 프로그램을 통해 편집할 수 있습니다. SVG 이미지는 해상도에 독립적이라는 점에서 뛰어나며, 이는 선명도를 잃지 않고 크기를 조정할 수 있으며 JavaScript를 사용하여 애니메이션 처리할 수 있어 로고, 아이콘 및 단순 애니메이션에 이상적입니다. 그러나 최신 브라우저에서는 SVG를 기본적으로 처리하지만 모든 플랫폼에서 지원이 보편적이지 않을 수 있으며 사진과 같은 매우 세밀한 이미지에는 적합하지 않다는 점에 유의하세요.
포터블 네트워크 그래픽(PNG) 이해하기
PNG(포터블 네트워크 그래픽)는 뛰어난 이미지 품질과 광범위한 다용성 때문에 인기가 높은 래스터 이미지 형식입니다. PNG는 무손실 데이터 압축을 자랑하므로 압축 후에도 품질이 일관되게 유지됩니다. 벡터 대신 픽셀로 구성되어 있어 무한대로 크기를 조정할 수는 없지만 투명도 옵션을 제공하여 깨끗한 배경에 적합합니다. SVG와 달리 일부 제한 사항이 있지만 다양한 플랫폼에서 광범위하게 지원됩니다. 마지막으로 유연성이 눈에 띄지만 PNG는 종종 더 큰 파일 크기를 유발하고 벡터의 인쇄 확장성이 부족합니다.
SVG 대 PNG: 올바른 선택
디자인 우선 순위가 다르기 때문에 어떤 형식이 절대적으로 우수하지는 않습니다. 그래픽 디자이너는 일반적으로 PNG의 다용도 특성을 선호하지만 SVG는 확장성 및 고유한 특성으로 인해 아이콘, 로고, 단순 그래픽 디자인 및 글꼴에 선호되는 선택입니다. 요약하자면, 확장성이 핵심일 때 SVG는 타의 추종을 불허하며, PNG는 더 많은 유연성과 이미지 정밀도가 필요한 경우에 빛을 발합니다.
SVG 좌표계
SVG는 x축이 오른쪽으로 증가하고 y축이 아래쪽으로 증가하는 2차원 좌표계를 사용합니다. 원점(0,0)은 SVG 캔버스의 왼쪽 상단 모서리에 있습니다.
SVG 구문
SVG(스케일러블 벡터 그래픽) 구문은 XML을 기반으로 하며 벡터 그래픽을 설명하기 위한 특정 규칙이 있습니다.
기본 SVG 구조
- 요소: SVG의 기본 빌딩 블록으로, 모양, 텍스트 및 이미지를 정의합니다.
- 속성: 요소의 속성으로, 모양과 동작을 제어합니다.
- 그룹: 관련 요소를 함께 그룹화하여 공통 변환과 스타일을 쉽게 적용할 수 있도록 하는 데 사용됩니다.
일반적인 SVG 데이터 유형
- 경로: 복잡한 모양을 정의하는 일련의 드로잉 명령입니다.
- 사각형: 너비, 높이 및 위치에 대한 속성이 있는 사각형 모양입니다.
- 원: 중심과 반지름으로 정의된 원 모양입니다.
- 타원: 중심과 반지름으로 정의된 타원 모양입니다.
- 선: 두 점을 연결하는 직선입니다.
- 폴리라인: 연결된 일련의 직선입니다.
- 다각형: 직선 세그먼트로 만들어진 닫힌 모양입니다.
- 텍스트: 화면에 텍스트 콘텐츠를 표시하는 데 사용됩니다.
- 이미지: SVG에 래스터 이미지를 임베드합니다.
일반적인 SVG 속성
- fill: 모양을 채울 색상을 지정합니다.
- stroke: 모양 윤곽선의 색상을 지정합니다.
- stroke-width: 모양 윤곽선의 두께를 지정합니다.
- opacity: 요소의 투명도를 지정합니다.
- width 및 height: 요소의 크기를 지정합니다.
- x 및 y: 요소의 위치를 지정합니다.
- d: 경로 요소에 모양 명령을 정의하는 데 사용됩니다.