Boxy SVG
Boxy SVG는 웹 표준인 SVG를 중심으로 설계된 벡터 그래픽 편집기다. 로고·아이콘·일러스트레이션 및 웹 사용자 인터페이스에 사용할 그래픽을 직접 작성하고, 결과물을 SVG 문서로 저장하거나 다른 이미지 형식으로 내보낼 수 있다. SVG를 단순한 최종 출력 형식으로 취급하는 대신...
| 작성 언어 | JavaScript, TypeScript (웹 클라이언트) |
|---|---|
| 분류 | 벡터 그래픽 편집기, SVG 편집 소프트웨어 |
| 개발 | Boxy SVG 프로젝트 |
| 주요 대상 | SVG 이미지·아이콘·로고·웹 그래픽 |
| 그래픽 모델 | XML 기반 SVG 문서 |
| 편집 대상 | 베지어 경로, 도형, 문자, 채움과 스트로크 |
| 주요 기능 | 패스 연산, 정렬·변형, 그리드·가이드 |
| 웹 관련 기능 | SVG·CSS 코드 검사, ID·class·메타데이터 편집 |
| 원본 형식 | SVG, 압축 SVG(SVGZ) |
| 출력 형식 | PNG, JPEG, WebP, PDF, HTML5 등 |
| 실행 환경 | 웹 브라우저와 데스크톱 환경 |
| 입력 장치 | 마우스, 터치, 스타일러스 등 |
| 공식 웹사이트 | Boxy SVG |
Boxy SVG는 웹 표준인 SVG를 중심으로 설계된 벡터 그래픽 편집기다. 로고·아이콘·일러스트레이션 및 웹 사용자 인터페이스에 사용할 그래픽을 직접 작성하고, 결과물을 SVG 문서로 저장하거나 다른 이미지 형식으로 내보낼 수 있다. SVG를 단순한 최종 출력 형식으로 취급하는 대신 문서의 도형·경로·스타일을 편집의 기본 데이터 모델로 사용한다. 웹 개발자와 그래픽 디자이너가 같은 문서를 시각적인 캔버스와 구조화된 SVG 코드 양쪽에서 다룰 수 있도록 하는 것이 중요한 특징이다.[1]
사용자는 캔버스에 기본 도형과 문자 객체를 배치하고, 펜 도구와 앵커 포인트로 베지어 경로의 윤곽을 편집할 수 있다. 경로를 합치거나 교차·차집합을 계산하는 부울 패스 연산과 그룹화·정렬·회전·반사·크기 변경 등의 객체 변형을 지원한다. 채움(fill)과 외곽선(stroke), 그라디언트·색상과 투명도는 도형의 기하학적 구조와 별개의 스타일 속성으로 관리할 수 있다. 그리드와 안내선, 스냅은 반복되는 아이콘이나 UI 요소의 위치를 일관되게 맞추는 데 쓰인다.
SVG는 XML 문서로 표현되므로 각 요소에는 좌표·변환·스타일과 식별자 등 구조적인 정보가 포함된다. Boxy SVG는 이러한 문서의 SVG 및 CSS 관련 코드를 확인하는 도구를 제공하며, ID·class·title 등 웹 페이지에서 사용될 수 있는 메타데이터를 보존·편집하는 작업을 지원한다. 이 때문에 그래픽의 외형뿐 아니라 HTML·CSS·JavaScript와 연동할 때 필요한 요소의 이름과 구조도 중요하게 다룰 수 있다. SVG 스프라이트 편집은 여러 아이콘과 그래픽 자산을 하나의 웹용 묶음으로 다루는 작업에 적합하다.[2]
원본 문서는 SVG 또는 압축된 SVGZ로 저장할 수 있고, 사용 목적에 따라 PNG·JPEG·WebP의 래스터 이미지나 PDF·HTML5로 출력할 수 있다. 벡터 문서를 래스터 파일로 내보내면 최종 픽셀의 해상도가 고정되어 원본 경로를 편집하는 능력은 유지되지 않는다. Boxy SVG는 Inkscape·Adobe Illustrator처럼 벡터 객체를 조작하는 프로그램과 사용 분야가 겹치지만, 웹 표준의 데이터 구조와 비교적 직접적인 SVG 코드 제어를 중심으로 하는 설계에 차이가 있다. 실제 웹 브라우저·데스크톱 버전별로 접근 가능한 파일과 출력 기능은 배포 형태에 따라 확인해야 한다.