Canva 및 Figma용 PNG에서 SVG로

Canva와 Figma에서 PNG가 흐려지는 이유

PNG은 픽셀의 그리드입니다. Canva의 배너나 Figma의 대형 프레임용으로 확대하면 가장자리가 부드럽고 거칠게 보입니다. Canva와 Figma에서 PNG를 SVG로 변환하면 픽셀이 벡터 도형으로 대체되어 그래픽은 모든 크기에서 선명하게 유지됩니다.

Canva의 무료 플랜으로 로고를 제작했다면 더 도움이 됩니다. Canva에 SVG를 업로드하는 것은 Pro 플랜에 국한되지 않지만, 디자인을 SVG로 다운로드하는 것은 유료 플랜 기능입니다. 대신 PNG로 다운로드한 후, 여기서 Canva PNG를 SVG로 변환하는 단계를 진행하세요.

SVG 업로드를 위한 Canva의 규칙

Canva의 도움말 센터에는 SVG 업로드에 대한 몇 가지 요구 사항이 나열되어 있습니다. 각 요구 사항이 SVGR에 어떻게 매핑되는지 살펴보겠습니다.

Figma에 SVG를 가져올 때 보이는 것

Figma는 SVG를 벡터 레이어로 가져오므로 도형을 직접 선택, 색상 변경 및 크기 조정이 가능합니다. 이것이 Figma PNG를 SVG로 변환하는 목적입니다: 평면 이미지 대신 편집 가능한 도형을 얻게 됩니다.

SVGR은 구멍을 뚫는 대신 도형을 겹쳐 쌓습니다. O의 카운터나 고리 내부의 간격은 단색 도형 위에 놓인 배경색 도형이므로 Figma에서는 겹쳐 보이는 레이어가 나타납니다. 이는 배경색과 일치할 때는 올바르게 보이지만 다른 색상에서는 드러납니다.

진짜 구멍을 만들려면, 위의 모양과 아래의 모양을 함께 선택한 후 Figma의 불리 연산에서 '빼기'를 적용하세요.

텍스트: 추적된 도형 또는 실시간 텍스트?

텍스트 인식 기능을 끄면 글자가 도형으로 추적됩니다. 원래와 정확히 동일하게 보이며 두 앱에서 작동하지만, 다시 입력할 수는 없습니다.

활성화하면 감지된 텍스트가 실시간 SVG 텍스트가 되며, SVGR도 색상 정교화를 실행하여 그라디언트 채우기를 추가할 수 있습니다. Canva에서는 텍스트를 확장해 달라고 요청하므로 해당 서비스에서는 비활성화하세요. Figma는 SVG 텍스트를 간격이 있는 실시간 텍스트로 가져오며, 텍스트 불투명도는 무시되고, em 단위 폰트 크기는 픽셀로 읽히며, 개별 텍스트 스팬의 자간도 무시됩니다.

로고의 경우 텍스트 인식 기능을 끄세요. 편집 가능한 제목이 필요한 경우 올바른 글꼴로 Figma에 다시 입력하세요.

지식의 한계

• Canva와 Figma에서 PNG를 SVG로 변환하는 것은 평면 그래픽에는 적합하지만 사진에는 적합하지 않습니다. 사진을 추적하면 크고 복잡한 파일이 생성됩니다. Canva에서는 JPG 또는 PNG로 된 원본 사진을 업로드하세요.
• 부드러운 가장자리의 PNG는 거의 중복된 색상(예: 여러 가지 거의 검은색 계열)을 포함할 수 있습니다. 깔끔한 팔레트를 원한다면 Figma나 다른 편집기에서 이를 단일 색상으로 재색상 처리하세요.
• 업로드한 SVG의 색상을 변경하는 방법은 파일에 따라 다르며, 모든 디자인에 대해 테스트한 것은 아닙니다. 템플릿을 구축하기 전에 테스트 파일 하나를 업로드하세요.
• 캔바에서도 도형의 겹침이 중요합니다. 투명 배경을 사용하면 O의 내부가 원래 배경색을 유지하며 다른 색상 위에 점으로 표시됩니다. 업로드하기 전에 피그마에서 구멍을 자르거나 인크스케이프에서 경로 > 차이점을 사용하여 구멍을 만드세요.
• 투명한 배경은 이미지 모서리에 있는 색상의 그림으로 채워진 모양을 제거하며, 이것이 사람들이 말하는 배경입니다. 작품이 네 모서리 모두에 걸쳐 있거나 모서리가 다른 색상인 경우, 아무것도 제거되지 않고 배경이 유지됩니다. 작품에 평평하고 균일한 여백을 주고 다시 변환하세요. 작품으로 완전히 둘러싸인 영역은 절대 제거되지 않으며, 이미 투명도 채널이 있는 PNG는 그대로 유지됩니다.
• 곡선은 많은 짧은 직선 세그먼트로 추적됩니다. 작은 이미지에서 추적된 곡선은 확대하면 약간 각져 보일 수 있으므로, 가지고 있는 가장 큰 복사본에서 시작하세요.