Geometrize로 이미지를 SVG 기하 도형으로 내보내기
Geometrize에서 이미지를 기하학적 도형으로 근사한 SVG로 저장하세요. 사각형만 사용하는 예제로 실제 벡터 형상을 얻는 것과 원래 디자인 객체를 복원하는 것의 차이를 확인합니다.
목차
Geometrize는 기존 이미지를 기하학적 도형으로 근사한 SVG 그림으로 만들 수 있습니다. 이런 표현 자체가 원하는 효과일 때 선택하세요. 사각형을 겹쳐 만든 SVG도 실제 벡터 형상이지만, 원본을 테두리와 삼각형, 별도의 강조 도형으로 나누어 복원한 것은 아닐 수 있습니다.
공식 Geometrize 웹 데모에서는 자신의 이미지를 열고 도형 종류와 최대 개수를 정한 뒤 SVG로 저장할 수 있습니다. 이 글에서는 일부러 사각형만 사용하는 작은 예제를 통해, 형상을 저장하는 것과 의미 있는 디자인 객체를 되찾는 것의 차이를 살펴봅니다.
기하학적 근사 표현이 이미지에 맞는지 판단하기
기하학적 기본 요소는 직사각형, 타원 또는 삼각형과 같은 단순한 모양입니다. Geometrize의 프로젝트 페이지에서는 이러한 모양으로 이미지를 재구성하는 방법을 설명합니다. 웹 데모에서는 후보 모양을 반복적으로 시도하고 변형하여 소스에 맞는 모양을 선택한다고 설명합니다.
그 과정은 고의적인 기하학적 예술에 적합합니다. 로고의 정확한 실루엣을 유지하거나 정확한 편집을 위해 레터링을 재구성하는 것과는 다른 목표입니다. 시작하기 전에 양식화된 조각 배열이 유용한지 아니면 원본과 밀접하게 일치하는 윤곽이 필요한지 결정하십시오.
허용된 래스터 이미지, 보관된 원본, 웹 브라우저 및 SVG를 저장할 위치가 필요합니다. 처음 실행하는 경우 중요한 영역을 인식할 수 있는 작은 이미지를 사용하세요. 진화하는 근사치가 유일한 참조가 되지 않도록 소스를 별도로 열어두십시오.
방법: 2026년 11월 8일에 브라우저 데모에서 원래의 384 × 256 RGB 기하학적 컨트롤을 열었습니다. 불투명한 흰색 배경, 남색 프레임과 작은 표시, 청록색 삼각형과 금색 직사각형이 있었습니다. 제한된 예에서는 직사각형만 선택하고 한도를 20으로 설정했습니다. 도구의 기본, 최대 또는 권장 품질 설정이 아닌 20이 우리가 선택한 테스트 한도였습니다. 사진, 더 큰 모양 수, 기본 편집기 가져오기 또는 실제 출력을 테스트하지 않았습니다.
원본을 열고 사각형 개수를 제한한 예제 실행하기
데모는 도착 시 이미 자체 샘플에서 실행 중일 수 있습니다. 자신의 이미지를 설정하기 전에 해당 샘플을 일시 중지하면 제공된 예제와 테스트를 구별할 수 있습니다.
- 데모가 실행 중인 경우 일시 중지를 선택한 다음 설정을 확장하세요.
- 이 작은 예에서는 최대 모양 제한을 20으로 설정하세요.
- 이미지 열기를 선택하고 허용된 소스를 선택하세요. 캔버스가 아트워크로 변경되는지 확인합니다.
- 설정에서 직사각형을 선택하고 다른 모양 유형을 선택 취소하세요. 시작 선택은 Rotated Ellipses였으며 이를 지웠습니다.
- 이 비교를 위해 나머지 값을 고정된 상태로 유지합니다. 모양 불투명도 128, 초기 배경 불투명도 255, 단계당 무작위 모양 50 및 단계당 모양 변경 100을 사용했습니다.
- 실행을 선택하세요. 테스트에서 추가된 모양이 20에 도달했고 제한된 프로세스가 중지된 후 컨트롤이 실행으로 돌아갔습니다.
- Svg 저장을 선택하고 다운로드한 파일을 보관한 다음 해당 아트워크를 소스와 비교하세요.
데모 설명에는 실행/일시 중지, 단계, 이미지 열기, 재설정 및 저장 옵션이 설명되어 있습니다. Step은 프로세스를 점진적으로 검사하려는 경우 하나의 기본 요소를 추가합니다. 재설정은 현재 모양을 지우므로 다시 시작하기 전에 유지하려는 결과를 저장하세요.
캔버스에 제공된 샘플이 계속 표시되면 결과를 판단하기 전에 소스를 중지했다가 다시 엽니다. 새 실행으로 인해 유지하려는 버전이 변경되면 재설정을 통해 이전 맞춤이 복원된다고 가정하는 대신 저장된 SVG 및 원본 이미지로 돌아갑니다.
저장된 도형 개수의 의미 확인하기
다운로드한 파일은 2,292바이트이고 너비는 384, 높이는 256으로 선언되었습니다. XML 검사 결과 20개의 <rect> 요소가 발견되었지만 <image> 요소는 발견되지 않았습니다. 직사각형은 그 자체로 벡터 기하학입니다. 벡터 모양으로 계산되기 위해 <path>로 직렬화할 필요는 없습니다. SVG 기본 모양 사양은 직사각형 요소를 정의합니다.
20개의 직사각형 중 하나가 불투명한 배경이었습니다. 나머지 19개의 fill-opacity는 약 0.502였습니다. 따라서 숫자는 20개의 개별 전경 디자인 개체를 의미하지 않으며 원본의 각 영역에 대해 하나의 직사각형을 의미하지도 않습니다.
실제 캔버스는 그 구별이 왜 중요한지 보여줍니다. 여러 개의 직사각형이 겹쳐서 남색 프레임을 암시하고 계단식 조각은 청록색 삼각형에 가깝습니다. 소스의 흰색 배경과 내부 구멍가 이 맞는 구성을 통해 표현됩니다. 나중에 하나의 직사각형을 선택한다고 해서 시각적으로 인식되는 전체 프레임이 반드시 선택되는 것은 아닙니다.
채우기 불투명도는 도형 내부 페인트의 불투명도를 제어합니다. 부분적으로 투명한 모양의 경우 겹침이 눈에 보이는 색상에 영향을 미칩니다. 직사각형의 저장된 채우기만으로는 최종 합성의 모든 픽셀을 설명할 수 없습니다. SVG 페인팅 사양은 해당 페인트 속성을 정의합니다.
| 우리가 확인한 것 | 실제 저장된 결과 | 그것이 확립하는 것 |
|---|---|---|
| 출력 기하학 | 직사각형 요소 20개, 이미지 요소 없음 | 이 파일에는 기하학적 벡터 모양이 포함되어 있습니다. |
| 배경 | 카운트에 포함된 불투명 직사각형 1개 | 총계에는 배경이 포함됩니다. |
| 기타 채우기 | 채우기 불투명도 약 0.502 | 눈에 보이는 아트웍은 겹치는 반투명 페인트를 사용합니다. |
| 기본 편집기 또는 커터 | 테스트되지 않음 | 신청이나 제작 승인이 청구되지 않습니다. |
파일 구조와 시각적 스타일 구분하기
유지된 SVG에는 직사각형 요소 사이에 리터럴 대괄호와 쉼표도 포함되어 있습니다. 다운로드한 파일을 변경하지 않고 유지했습니다. 이 가이드는 선택한 편집기가 해당 직렬화를 처리하는 방법을 증명하지 않으므로 이에 의존하기 전에 의도한 대상에 실제 저장된 파일을 확인하십시오.
다음 확인을 위해 SVG 사본을 열고, 렌더링되는지 확인하고, 모양을 선택할 수 있는 방법을 검사하세요. 수신 앱이 이를 거부하거나 예상치 못한 콘텐츠를 표시하는 경우 파일을 사용하기 전에 원본 내보내기를 보존하고 해당 특정 가져오기를 진단하세요. 작동 중인 브라우저 캔버스만으로는 내보낸 문서가 다른 애플리케이션의 요구 사항을 충족한다는 것을 증명할 수 없습니다.
더 높은 모양 개수가 원래 개체의 구조를 복구할 것이라고 가정하지 마십시오. 우리는 더 큰 수의 비교를 실행하지 않았습니다. 다른 캡이나 모양 유형을 탐색하는 경우 각 결과를 별도로 저장하고 해당 이미지에 대한 시각적 효과와 편집 요구 사항을 판단하십시오.
Boxy SVG 트레이싱 및 기하학 가이드는 편집기 컨텍스트에서 동일한 디자인 선택을 설명합니다. 사진 소스의 경우 사진-SVG 기대치는 래스터를 유지할지 아니면 양식화된 결과를 선택할지 결정하는 데 도움이 됩니다.
기하학적 표현보다 윤곽선이 더 유용한 경우
PerfectVector는 고의적인 직사각형 구성이 아닌 원본과 비교하여 검사할 수 있는 자동 이미지-벡터 트레이싱이 목표인 경우 대안이 됩니다. 소스와 함께 이미지-벡터 페이지를 사용한 다음 중요한 실루엣, 내부 구멍 및 별도의 색상 영역을 확인하세요. 이 테스트 참조에 대해 PerfectVector 변환을 실행하거나 해당 출력을 Geometrize와 비교하지 않았습니다.
PerfectVector의 제품 정보에는 잠금 해제 후 편집 및 내보내기 기능이 포함된 무료 보기 전용 미리보기가 설명되어 있습니다. 기하학적 처리가 원하는 예술 작품이라면 창의적인 선택을 유지하세요. 정확한 구성이나 특정 객체 경계가 필요한 경우 자동 경로보다 수동 그리기가 더 적합할 수 있습니다.
트레이싱 품질 체크리스트를 사용하여 유지되어야 하는 기능을 기록하세요. 허용된 파일은 해당 작업이 기하학적 그림을 배열하든, 인식 가능한 윤곽선을 다듬든 다음 작업을 지원해야 합니다.
FAQ
Geometrize는 기존 이미지에서 SVG를 내보내나요? 예. 웹 데모에서는 Open Image 및 Save Svg 컨트롤을 제공합니다. 실제 브라우저 실행에서는 업로드된 컨트롤의 직사각형 형상이 포함된 SVG를 저장했습니다.
도형 20개는 전경 개체 20개를 의미하나요? 아니요. 저장된 20개의 직사각형 파일에서 하나의 직사각형은 배경이었고 다른 직사각형은 그림과 비슷하게 겹쳐졌습니다. 해당 개수는 소스의 의미 있는 개체를 재구성하지 않았습니다.
기본 모양 수는 20인가요, 아니면 최대 모양 개수인가요? 아니요. 이 제한된 예에서는 의도적으로 20개를 선택했습니다. 우리는 도구의 용량을 테스트하거나 더 많은 수의 품질을 비교하지 않았습니다.
기하학적 SVG가 파일 편집이나 자르기를 쉽게 보장하나요? 아니요. 수신 앱에서 구조를 검사하세요. 이 테스트는 실제 브라우저 결과에서 중지되고 SVG가 저장되었습니다. 기본 편집기 가져오기, 편집 및 자르기는 테스트되지 않았습니다.
출처
- Geometrize — 프로젝트 홈페이지 — 의도된 이미지 대 기하학적 기본 접근 방식입니다.
- Sam Twidale — Geometrize 웹 데모 — 여기에 사용된 실제 소스 이미지, 설정, 실행 및 SVG 저장 컨트롤.
- W3C — SVG 2 기본 모양 — 직사각형 요소는 벡터 기하학입니다.
- W3C — SVG 2 채우기 불투명도 — 모양의 내부 페인트에 불투명도가 적용되는 방식입니다.
- PerfectVector — 제품 정보 — 미리보기 및 잠금 해제된 편집/내보내기 워크플로입니다.
PerfectVector에서 자신의 이미지로 자유롭게 시작한 다음, 작업에 적합한 형상을 결정하기 전에 윤곽선과 가장 작은 중요한 구멍를 검사하십시오.
