SVG 가져오기
Illustrator, Affinity Designer, Inkscape, Figma에서 벡터 아트워크를 편집 가능한 셰이프 레이어로 들여오는 법과, 살아남지 못하는 SVG 기능들입니다.
SVG는 여기서 진짜 지오메트리가 됩니다. 패스는 그림의 사진이 아니라 노드 도구로 편집할 수 있는 정점과 핸들을 가진 셰이프 레이어가 됩니다. 파일 안의 그룹은 레이어 패널의 그룹이 됩니다.
들어오는 길은 네 가지이며 모두 같은 판독기를 씁니다.
- 파일 ▸ 가져오기 ▸ SVG…는 열려 있는 프로젝트로 가져옵니다
- SVG를 고른 채 파일 ▸ 열기…를 하면 그것을 감싸는 새 이름 없는 프로젝트가 만들어집니다
- 파일을 캔버스에 놓으면 가져오고, 다른 곳에 놓으면 새 프로젝트로 엽니다
- Ctrl+V는 다른 애플리케이션에서 복사한 SVG 마크업을 붙여 넣습니다
파일에서 가져오면 감싸는 그룹이 파일 이름을 가집니다. 클립보드에서 붙여 넣으면 이름이 SVG가 됩니다.
무엇이 무엇이 되나
| SVG에서 | Celas Studio에서 |
|---|---|
| g, a, 그리고 중첩된 svg | 그룹 레이어 |
| path, rect, circle, ellipse, polygon, polyline, line | 각각 셰이프 레이어 하나 |
| image | 이미지 레이어 |
| linearGradient, radialGradient | 그것을 쓰는 도형의 그레이디언트 칠 또는 획 |
| text | 첫 몇 글자를 딴 이름의 빈 자리 표시자 레이어 |
모든 패스 명령을 이해하며 타원 호도 포함됩니다. 그리고 전부 3차 베지어로 변환됩니다. 복합 패스(글자 O, 도넛, 구멍이 있는 것 무엇이든)는 안쪽 윤곽을 온전히 지닌 셰이프 레이어 하나로 남으므로, 구멍은 그대로 구멍이고 전체는 하나의 개체로 편집 가능한 상태를 유지합니다.
칠, 칠 규칙, 획, 획 두께, 끝 모양과 연결 모양, 불투명도, 그레이디언트가 모두 넘어오며, 획 두께는 아트워크와 함께 배율이 조정되어 선 굵기가 알맞게 보입니다. 파일에서 숨겨진 것으로 표시된 것은 숨겨진 채로 들어옵니다.
색은 드로잉 모델이 쓰는 모든 CSS 형태로 읽힙니다. 이름 있는 색, #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb()와 rgba()이며, 숫자 형태에서는 백분율도 받습니다. 네 자리와 여덟 자리 16진수 형태는 알파를 그대로 실어 옵니다.
rx와 ry가 다른 둥근 사각형은 진짜 타원형 모서리로 들어옵니다. rx와 ry가 같으면 대신 모서리 반지름을 지닌 평범한 사각형으로 남으므로, 노드 도구의 모서리 반지름 핸들이 그대로 동작합니다.
연결된 <image>는 SVG 자신의 폴더를 기준으로 해석되므로, 옆 파일을 참조하는 아트워크도 불러옵니다. 내장된 data: URI는 곧바로 디코딩됩니다.
그룹은 변형을 지니지 않는다
파일 안의 변형은 아트워크 자체에 구워지므로, 여러분이 얻는 그룹은 자기 회전이나 배율이 없는 순수한 구조입니다. 그림은 파일이 말하는 자리에 정확히 내려앉으며, 그 뒤로 그룹을 돌리거나 크기를 바꿔도 아래에서 무언가 어긋나는 일이 없습니다.
지원하지 않는 것
판독기는 SVG 명세 전체가 아니라 드로잉 모델을 다룹니다. 아래의 것은 모두 메시지 없이 건너뜁니다.
- CSS style 블록과 class 속성: 아래 경고를 보세요
- use와 symbol: 스프라이트 시트와 반복 인스턴스가 비어서 들어옵니다
- clipPath와 mask: 클리핑이 적용되지 않으므로 잘려 나갔던 아트워크가 나타날 수 있습니다
- 패턴 칠. 평평한 회색으로 대체됩니다
- filter 효과: 흐림, 그림자 등
- marker: 화살촉과 선 끝 표시
- stroke-dasharray와 stroke-dashoffset. 그래서 점선 획이 실선으로 들어옵니다
- switch, foreignObject, SMIL 애니메이션
- 텍스트: 글꼴과 크기와 위치가 사라지고 이름이 붙은 자리 표시자 레이어만 남습니다
- 백분율과 상대 단위, 그리고 style 속성 안에 쓰인 변형
깔끔하게 들어오는 파일 준비하기
- 내보내기 전에 텍스트를 윤곽선으로 바꾸세요. 텍스트는 자리 표시자로만 들어옵니다.
- 남기고 싶은 획, 점선, 패턴, 필터 효과를 확장하세요.
- 클리핑 마스크를 풀거나 보여야 할 만큼으로 아트워크를 자르세요.
- use에 기대는 것이 없도록 심볼과 반복 인스턴스를 확장하세요.
- CSS가 아니라 표현 속성으로 내보내고 문서에 viewBox를 주세요.
크기와 배치
문서 너비와 높이는 픽셀, 포인트, 파이카, 인치, 밀리미터, 센티미터로 읽히며 viewBox와 합쳐져 그림 배율을 합리적으로 정합니다. 백분율로 크기가 지정된 파일(흔한 "width=100%" 웹 로고)은 늘어나는 대신 viewBox 크기로 들어옵니다. 그런 다음 아트워크가 캔버스 가운데에 놓입니다.