아이콘 글꼴 스케치에서 내보내기

SVG 아이콘을 Sketch에서 내보내 Fontello로 가져 오려고하지만 SVG가 앱에 맞지 않는 것으로 보입니다 (IcoMoon에서도 작동하지 않음).

테스트로 만들려고하는 아이콘은 몇 줄에 불과한 단순한 '햄버거'스타일 아이콘이지만 제대로 작동하지 않습니다. 가장 적게 말하는 것은 좌절입니다.

누구든지 이것에 대한 경험이 있고 그들의 지식으로 헤어질 수 있습니까? 감사합니다.

icomoon 올바른 가져 오기를 위해 스케치에서 SVG를 내보내는 방법을 알아 냈습니다.

1 단계

경로 그룹을 선택하고 클릭 : 레이어> 경로> 벡터화 획을 클릭하여 SVG가 테두리로 만들어지지 않도록합니다.

이것이 효과가 있음을 알기 위해 닫힌 패스 로 변환 된 획 과 관리자는 이제 테두리 색상 대신 채우기 색상을 표시합니다 .

2 단계

인스펙터 에서 Make Exportable 탭을 클릭 하고 SVG 형식을 선택하여 각 아이콘 / svg를 내 보냅니다 .

3 단계

SVG 아이콘을 평소처럼 icomoon으로 가져 오십시오. 이제 세트에 아이콘이 올바르게 표시되고 격자 크기가 정확해야합니다. 참고 : 모든 SVG 스케치의 높이가 동일해야합니다.

업데이트 2016 @jackocnr에게 다음을 지적 해 주셔서 감사합니다.

2016 년 스케치 메뉴 옵션은 레이어> 윤곽으로 변환

이 매뉴얼 은 저에게 효과적이었습니다. 매우 유익합니다. 작가는 스케치 내보내기 문제에 대해 이야기합니다. 기사가 제거 될 경우를 대비하여 그의 기사에서 인용하고 있습니다.

전반적인 솔루션

1. 각 아이콘의 대지를 만듭니다 (삽입-> 대지).
2. 각 대지의 위치에 반 픽셀이없고 짝수인지 확인하십시오.
3. 모든 아이콘 회전을 제거하십시오.
4. 스케치가 불필요한 코드를 내 보내지 않도록 경계 상자를 제거하십시오.
5. SVG가 테두리 레이어로 만들어지지 않도록> 경로> 스트로크를 벡터화하십시오 ( Gus 덕분에 )
6. 깨끗한 .svg 내보내기

* 이것은 작가가 내보내려고 한 아이콘입니다

스케치 내보내기 버그

버그 # 1

대지 위치를 짝수로 변경하여 스케치 변환 내보내기를 수정했습니다. 코드에서 모든 변환이 제거됩니다. 다른 참고로, 위치가 반 픽셀만큼 떨어져 있기 때문에 Sketch는 내 뷰 박스의 크기를 0 0 25 25로 변경했습니다. 원래 대지는 24 x 24px입니다. 이 버그는 심지어 코드에 스펙을 추가했습니다. 부에노가 없습니다.

버그 # 2

문제 : 의도적으로 각 아이콘은 너비 : 24px, 높이 : 24px 및 테두리 반경 : 3px로 설정되었습니다. 문제는 내보낼 때 사각형이 경로에 추가되어 CSS로 크기를 조정하기가 어렵다는 것입니다.

해결 방법 : 투명 경계 상자를 삭제하고 CSS가 마술을하게하십시오. 실제로 필요한 모든 개발자는 24 x 24px로 설정된 뷰 박스였습니다. 너비, 높이 및 경계 반경을 추가 할 수 있습니다.

버그 # 3

문제 : 스케치가 회전 (-180.000000)을 내 보냅니다.

<path d=”M16,7.4 L14.4864865,6 L8,12 L14.4864865,18 L16,16.6 L11.027027,12 L16,7.4 Z” fill=”#000000" transform=”translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) “></path>

해결 방법 : .svg 아이콘을 Adobe Illustrator로 열고 아이콘을 회전 한 다음 끌어서 놓으십시오. 회전이 모두 제거됩니다.

버그 # 4 문제 : 슬라이스 도구 내보내기를 사용하면 변환하고 다시 변환합니다. 해결책 : 아무것도 아닙니다. 하지 마십시오. 어쨌든 슬라이스하는 데 너무 오래 걸리고 시간 낭비입니다.

하위 경로를 사용하는 경우 내보내기 전에 모양을 평평하게하십시오. Fontello에서 복합 경로를 수동으로 생성하는 데 여전히 오류가 발생했지만 올바르게 작동하는 것 같습니다.

(내 모양은 잘라낸 두 모양의 원이었습니다.)