DESIGN / VECTOR
벡터 작업의 가벼운 시작.
여러 SVG 창을 나란히 놓고 도형·경로·그룹을 움직여 보세요.
FS Folio · Simple & Fast
지금 할 수 있는 일
새 SVG 문서, 다중 파일 열기·끌어놓기, 자유로운 작업 창 이동·크기 조절·최소화·최대화, Cascade·Tile 정렬을 지원합니다. 창마다 배율과 보기 위치를 유지하며 창 크기를 바꿔도 SVG 실제 크기는 바뀌지 않습니다.
Vector 1.0입니다. 기본 도형 생성, 색상·선·불투명도 편집, 이름·순서·복제·그룹 관리와 기존 선택·이동·크기·회전 기능을 제공합니다. Pen·경로 노드·SVG 텍스트 편집을 제공합니다. SVG 저장·재열기, 문서별 Undo/Redo, 내부 객체 복사·붙여넣기를 지원합니다. Export PNG로 투명 또는 지정 배경색, 1x/2x/4x PNG를 다운로드합니다. 화면 확대율과 무관하며 최대 16메가픽셀입니다. 글꼴 대체에 따른 출력 차이가 있을 수 있습니다. 저장하지 않은 편집은 닫거나 새로고침하면 사라집니다. 변경한 문서를 닫거나 현재 탭을 떠날 때 확인합니다. FS Folio 홈은 새 탭에서 열려 편집 탭을 유지합니다.
파일과 작업 창
- Open SVG에서 하나 이상의 .svg 파일을 선택하거나 화면에 놓습니다.
- 제목 표시줄을 끌어 창을 옮기고 가장자리·모서리로 창 크기를 바꿉니다. 최소화한 창은 상단 문서 이름을 눌러 복원합니다.
- 배율을 선택하거나 화면 맞춤을 누릅니다. 확대 후에는 스크롤 또는 Space+드래그로 문서 보기를 이동합니다.
Ctrl+O 열기 · Ctrl+F6 다음 문서 / Ctrl+Shift+F6 이전 문서 · Ctrl++ / Ctrl+- 확대·축소 · Ctrl+0 화면 맞춤 · Ctrl+1 100%
객체 편집
도형이나 오른쪽 객체 목록을 클릭해 선택합니다. Shift+클릭으로 선택을 추가·해제하고 빈 공간을 클릭해 모두 해제합니다. 그룹은 목록이나 Ctrl+클릭으로 선택합니다.
객체를 끌어 이동하고 8개 사각 핸들로 크기를, 위쪽 원형 핸들로 회전을 조절합니다. 크기 조절 중 Shift는 비율 유지, Alt는 중심 기준입니다. 이동 중 Shift는 한 축으로 제한하고 회전 중 Shift는 15도 간격으로 맞춥니다. Escape는 진행 중 변형을 취소합니다. Delete는 편집 가능한 선택 객체를 삭제합니다.
잠금·숨김 및 읽기 전용 상태는 속성 패널에 표시합니다. 복잡한 글자별 배치 텍스트, 비가역 변환, 미지원 효과가 제거된 객체는 변형할 수 없습니다. 선택 테두리는 선 두께를 포함한 문서 축 기준 사각형이며 뾰족한 경로에서는 여백이 클 수 있습니다. 핸들을 반대편으로 넘겨 뒤집는 기능은 아직 없습니다.
도형 그리기
왼쪽에서 Rectangle(사각형), Rounded Rectangle(둥근 사각형), Ellipse(타원), Circle(원), Line(직선), Polyline(꺾은선), Polygon(다각형)을 선택하고 아트보드에서 드래그합니다. 그리는 동안 미리보기가 표시되며 Escape로 취소합니다.
Shift는 사각형·타원의 비율을 고정하고 직선·꺾은선의 방향을 45도 단위로 맞춥니다. Circle은 항상 원입니다. Alt는 시작점을 중심으로 그립니다. 꺾은선·다각형은 첫 선분을 드래그한 뒤 클릭으로 점을 추가하고 Enter 또는 더블클릭으로 마칩니다. Alt는 첫 선분에 적용됩니다. 다각형은 면적이 있는 꼭짓점 3개 이상, 최대 1,000개를 지원합니다.
그리기를 마친 뒤 화살표 도구나 객체 목록을 누르면 선택·변형으로 돌아갑니다. 도구 선택도 문서마다 따로 유지됩니다.
색상·선·객체 순서
오른쪽 속성에서 Fill·Stroke의 HEX(#RGB / #RRGGBB), 색상 피커 또는 없음을 선택합니다. Stroke Width는 0~1,000, Opacity는 0~1입니다. Line Cap·Join과 Dash Pattern(예: 8 4)도 편집할 수 있습니다. 입력 후 Enter 또는 다른 항목 클릭으로 적용합니다. 혼합 값은 빈칸에 표시되며 다중 선택에 공통 적용합니다.
객체 목록은 SVG 순서대로 표시하며 아래 항목이 앞에 그려집니다. 위로·아래로 버튼은 그리기 순서를 한 단계 앞·뒤로 변경합니다. 맨 앞으로·뒤로, 이름 변경, 표시·숨김, 잠금, 복제, 삭제를 지원합니다. 복제는 같은 위치에 만들어지고 자동 선택됩니다.
Ctrl+G로 그룹, Ctrl+Shift+G로 해제합니다. 브라우저가 단축키를 가로채면 패널 버튼을 사용하세요. 겹침 순서 보존을 위해 같은 부모의 연속된 객체를 그룹으로 묶습니다. 상속 색상·선과 변환을 자식에 적용해 해제 후 외관을 유지하지만, 그룹 불투명도 등 합성 결과를 보존할 수 없는 경우는 해제를 제한하고 안내합니다.
Pen · 노드 · 텍스트
Pen Tool에서 클릭하면 직선 앵커, 드래그하면 베지어 방향 핸들이 생깁니다. 시작점을 클릭하면 닫고 Enter는 열린 경로로 완료합니다. Backspace는 마지막 앵커를 제거하고 Escape는 작성을 취소합니다. Shift는 45도 방향으로 제한합니다.
Direct Selection에서 경로를 클릭한 뒤 사각 앵커 또는 원형 방향 핸들을 끕니다. Shift+앵커 클릭은 다중 선택입니다. 상단 Smooth/Corner로 방향 핸들 연동을 전환하고, 노드 추가는 선택 앵커의 다음 선분을 정확히 반으로 나눕니다. 노드 삭제/Delete는 이웃 앵커를 다시 연결하므로 곡선 모양이 바뀔 수 있습니다. 경로 열기/닫기도 상단 버튼으로 조작합니다.
M/L/H/V/C/S/Q/T/Z 단일 경로를 편집하며 처음 수정할 때 L/C 기반으로 정규화합니다. Arc(A), 여러 하위 경로, 미지원 효과·참조 객체는 원본 데이터를 보존하고 노드 편집을 제한합니다. 앵커는 최대 1,000개입니다. Zoom과 그룹 transform은 로컬 경로 좌표와 분리합니다.
Text Tool로 빈 공간을 클릭해 텍스트를 만들거나 기존 텍스트를 클릭해 수정합니다. 안전한 입력창에서 한글·영문·줄바꿈, 글꼴·크기·색상·정렬·글자 간격을 적용합니다. IME 조합 중에는 문서를 변경하지 않으며 적용할 때 한 번 확정합니다. 줄바꿈은 tspan과 1.2배 줄 간격으로 표현합니다. 미설치 글꼴은 대체될 수 있으며 개별 스타일·글자별 배치·중첩 tspan은 내용 편집을 제한합니다. 텍스트는 이미지로 변환하지 않습니다.
지원 형식과 제한
SVG의 기본 도형(rect, circle, ellipse, line, polygon, polyline), path, 그룹(g), text·tspan을 객체로 읽습니다. 기본 색·선·투명도·변환과 허용된 인라인 스타일을 유지합니다. SVG 네임스페이스가 필요하며 viewBox와 절대 크기를 이용해 원본 아트보드 비율로 표시합니다.
외부 CSS, 그라데이션, 패턴, 이미지, use·symbol, 중첩 SVG, 클리핑, 마스크, 필터, 애니메이션은 현재 지원하지 않습니다. 실행·렌더링에서 제외하고 문서별 호환성 안내에 표시합니다. 미지원 요소의 원본 데이터는 메모리에 보존하고 읽기 전용 목록으로 보호합니다. 클리핑·마스크가 적용되지 않아 가려진 도형이 드러날 수 있으며 완전한 외관이나 저장 호환성을 뜻하지 않습니다. 텍스트의 글꼴과 배치는 설치된 글꼴에 따라 달라질 수 있습니다.
파일당 5 MiB, 열린 문서 12개, SVG 요소 5,000개, 중첩 32단계 제한이 있습니다. 새 아트보드 크기는 축당 1~10,000px이며, 큰 viewBox의 좌표는 유지하고 표시 크기만 제한합니다.
저장 · 실행 취소 · 복사
Save SVG(Ctrl+S)는 현재 문서를 표준 SVG 사본으로 다운로드합니다. 다른 이름 저장(Ctrl+Shift+S)에서 파일 이름을 바꿉니다. 원본 파일을 자동 덮어쓰지 않습니다. 브라우저가 다운로드를 취소하거나 차단할 수 있으므로 다운로드 목록에서 완료를 확인하세요.
미지원 요소·속성은 저장 전에 차이를 안내하며 취소할 수 있습니다. defs·정적 그라데이션·clipPath·mask·use의 안전한 부분은 저장에서 보존하지만 편집기 미리보기에서는 렌더링하지 않습니다. script·이벤트·외부 URL·없는 대상 참조는 제외하고, 중복 ID는 저장을 거절합니다. 완전한 SVG 호환성을 보장하지 않습니다.
Ctrl+Z 실행 취소, Ctrl+Y 또는 Ctrl+Shift+Z 다시 실행. 드래그는 한 단계, 같은 속성의 연속 변경은 600ms 이내에 병합합니다. 저장 지점과 새 분기는 병합하지 않습니다. 문서별 최대 64단계·이력 모델 추정 16 MiB로 오래된 이력을 정리합니다. 문서를 닫으면 해당 이력도 해제합니다. 선택·배율·창 이동은 이력에 넣지 않습니다.
Ctrl+C 복사, Ctrl+V 붙여넣기, Ctrl+X 잘라내기, Ctrl+D 복제, Ctrl+Shift+A 선택 해제. 편집 메뉴에서도 사용할 수 있습니다. 내부 클립보드는 마지막 선택 한 묶음만 최대 5 MiB로 보관하며 원본 문서를 닫아도 다른 문서에 붙일 수 있습니다. 페이지를 닫으면 사라지며 시스템 클립보드와 동기화하지 않습니다. 반복 붙여넣기·복제는 문서 모델 추정 16 MiB를 넘으면 적용 전에 중단합니다. 같은 위치에 붙여넣고 새 객체를 선택합니다.
참조·읽기 전용·잠금·숨김 객체, 상위 합성 불투명도, 상대 단위 등 좌표와 외관을 안전하게 분리할 수 없는 선택은 복사를 거절합니다. 원본 그룹 전체를 선택하거나 지원 SVG 도형으로 준비해 주세요. 지원되는 복사는 내부 ID를 새로 발급하고 SVG ID 충돌과 상위 좌표 차이를 보정합니다. 편집기용 이름·잠금·Smooth 상태는 표준 SVG 속성이 아니므로 파일에는 기록하지 않습니다.
Adobe Illustrator / PDF
1.0 호환 목표는 PDF 호환 옵션으로 저장된 AI 파일의 지원 경로를 편집 가능한 SVG 객체로 가져오는 것입니다. AI/PDF의 기본 벡터 경로를 새 SVG 문서로 가져옵니다. PDF 호환 AI만 허용하며 파일당 10 MiB, 1페이지만 처리합니다. 실제 Illustrator AI 파일은 아직 검증하지 않았습니다.
PDF 표시 정보만으로 Illustrator 원본 레이어·효과·텍스트 편집 정보를 모두 복원할 수는 없습니다. 가져오기 전 변환 손실과 미지원 내용을 안내하고 취소할 수 있습니다. 텍스트·이미지·복잡한 마스크·패턴·효과는 제외됩니다. 기본 사각 클립은 사각형 채우기에 한해 보이는 경로로 변환됩니다. AI 저장은 1.0에서 제공하지 않으며, 독자 파일 확장자를 만들지 않습니다.
파일과 개인정보
파일은 브라우저 메모리에서 처리하며 서버로 업로드하지 않습니다. 원본 파일을 자동으로 덮어쓰지 않습니다. 스크립트·이벤트·외부 리소스를 허용하지 않고, 검사한 객체로 SVG DOM을 새로 구성합니다. DTD·엔티티 선언 문서는 거절합니다.
일부 SVG는 요소가 제외되어 원본과 다르게 보일 수 있습니다. 중요한 원본은 별도로 보관하세요.
오픈소스 안내
React / React DOM: MIT · PDF.js: Apache-2.0 · Pretendard: SIL Open Font License 1.1. 라이선스 원문 · 글꼴 라이선스