Xuất từ ​​Phác thảo cho phông chữ biểu tượng

Tôi đang cố gắng xuất các biểu tượng SVG từ Phác thảo để nhập vào Fontello, tuy nhiên, các SVG dường như không chính xác cho ứng dụng (chúng cũng không hoạt động trong IcoMoon).

Biểu tượng tôi đang cố gắng tạo để thử nghiệm là biểu tượng kiểu 'hamburger' đơn giản chỉ là một vài dòng, nhưng chúng sẽ không hoạt động chính xác. Thật là bực bội khi nói ít nhất.

Có ai có bất kỳ kinh nghiệm với điều này và có thể tham gia với kiến ​​thức của họ? Cảm ơn bạn.

Tôi đã tìm ra cách xuất SVG từ bản phác thảo cho icomoon nhập chính xác:

Bước 1

Ngăn chặn SVG khỏi biên giới bằng cách chọn nhóm đường dẫn và nhấp vào: layer> path> vectorize Stroke

Để biết rằng điều này đã hoạt động, các nét được chuyển thành các đường dẫn kín và thanh tra hiện hiển thị màu tô thay vì màu viền.

Bước 2

Xuất từng biểu tượng / svg bằng cách nhấp vào tab Tạo có thể xuất trên thanh tra và chọn định dạng SVG.

Bước 3

Nhập các biểu tượng SVG vào icomoon như bình thường, bây giờ bộ sẽ hiển thị chính xác các biểu tượng và kích thước lưới phải chính xác. LƯU Ý: Đảm bảo rằng tất cả các SVG của bạn trên bản phác thảo có cùng chiều cao.

CẬP NHẬT 2016 Cảm ơn @jackocnr đã chỉ ra rằng:

Trong năm 2016, tùy chọn menu Phác thảo là Layer> Convert to Outlines

Hướng dẫn này làm việc cho tôi. nó rất nhiều thông tin. Nhà văn nói về vấn đề xuất khẩu phác thảo. Tôi đang trích dẫn từ bài viết của anh ấy trong trường hợp bài viết sẽ bị xóa.

Giải pháp tổng thể

1. Tạo một bản vẽ cho mỗi biểu tượng (chèn -> bản vẽ).
2. Đảm bảo vị trí của mỗi artboard không có nửa pixel và là số chẵn.
3. Hủy bỏ tất cả các xoay biểu tượng.
4. Xóa mọi hộp giới hạn để Phác thảo không xuất mã không cần thiết.
5. Ngăn chặn SVG khỏi lớp biên giới> đường dẫn> đột quỵ vector hóa (cảm ơn Gus )
6. xuất sạch .svg

* đây là biểu tượng mà người viết đã cố gắng xuất

Phác thảo xuất khẩu lỗi

Lỗi # 1

cố định chuyển đổi phác thảo bằng cách thay đổi vị trí artboard thành một số chẵn. Điều này loại bỏ bất kỳ biến đổi trong mã. Một lưu ý khác, vì vị trí bị tắt một nửa pixel, Phác thảo đã thay đổi kích thước của hộp xem của tôi thành 0 0 25 25. Bản vẽ gốc của tôi là 24 x 24px. Lỗi này thậm chí đã thêm thông số kỹ thuật vào mã. Không có bueno.

Lỗi # 2

Vấn đề: Theo thiết kế, mỗi biểu tượng được đặt thành width: 24px, height: 24px và Border-radius: 3px. Vấn đề là, khi xuất, hình chữ nhật đã được thêm vào đường dẫn, do đó gây khó khăn cho việc thu nhỏ kích thước ở bất kỳ kích thước nào bằng css.

Giải pháp: Xóa mọi hộp giới hạn trong suốt và để css làm điều kỳ diệu. Tất cả các nhà phát triển thực sự cần là hộp xem được đặt thành 24 x 24px. Họ có thể thêm chiều rộng, chiều cao và bán kính đường viền.

Lỗi # 3

Vấn đề: Phác thảo xuất một vòng quay (-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>

Giải pháp: Mở biểu tượng .svg của bạn vào Adobe Illustrator, xoay biểu tượng, sau đó kéo và thả trở lại vào Phác thảo. Điều này loại bỏ xoay tất cả cùng nhau.

Lỗi # 4 Vấn đề: sử dụng công cụ cắt xuất dịch và biến đổi lại. Giải pháp: Không có gì. Đừng làm điều đó. Nó mất quá nhiều thời gian để cắt bất cứ cách nào và là một sự lãng phí thời gian.

Nếu bạn đang sử dụng đường dẫn phụ, hãy làm phẳng hình dạng trước khi xuất. Tôi vẫn gặp lỗi trong Fontello về cách tạo đường dẫn ghép thủ công, nhưng có vẻ như nó đã hoạt động chính xác.

(hình dạng của tôi là một vòng tròn có hai hình cắt ra.)