ส่งออกจากแบบอักษร Sketch สำหรับไอคอน

ฉันกำลังพยายามส่งออกไอคอน SVG จาก Sketch เพื่อนำเข้าสู่ Fontello แต่ SVG นั้นดูเหมือนจะไม่ถูกต้องสำหรับแอป (พวกเขายังใช้งานไม่ได้ใน IcoMoon)

ไอคอนที่ฉันพยายามสร้างเป็นแบบทดสอบเป็นไอคอนสไตล์ 'แฮมเบอร์เกอร์' ง่าย ๆ ที่มีเพียงไม่กี่บรรทัด แต่มันจะทำงานไม่ถูกต้อง มันน่าผิดหวังที่จะพูดน้อย

ใครบ้างมีประสบการณ์กับสิ่งนี้และสามารถมีส่วนร่วมกับความรู้ของพวกเขา? ขอบคุณ.

ฉันหาวิธีการส่งออก SVG จากแบบร่างสำหรับการนำเข้าที่ถูกต้องของ icomoon:

ขั้นตอนที่ 1

ป้องกัน SVG ไม่ให้เกิดเส้นแบ่งเขตโดยการเลือกกลุ่มพา ธ และคลิกที่: เลเยอร์> เส้นทาง> vectorize stroke

หากต้องการทราบว่าสิ่งนี้ได้ผลแล้วจังหวะที่เปลี่ยนเป็นเส้นทางปิดและตอนนี้ผู้ตรวจสอบจะแสดงสีเติมแทนสีเส้นขอบ

ขั้นตอนที่ 2

ส่งออกแต่ละไอคอน / svg โดยคลิกที่แท็บทำให้ส่งออกได้บนเครื่องตรวจสอบและเลือกรูปแบบ SVG

ขั้นตอนที่ 3

นำเข้าไอคอน SVG ไปยัง icomoon ตามปกติตอนนี้ชุดควรแสดงไอคอนอย่างถูกต้องและขนาดกริดควรแม่นยำ หมายเหตุ: ตรวจสอบให้แน่ใจว่า SVG ทั้งหมดของคุณบนร่างมีความสูงเท่ากัน

อัปเดต 2016 ขอบคุณ @jackocnr สำหรับการชี้ให้เห็นว่า:

ในปี 2559 ตัวเลือกเมนูร่างคือเลเยอร์> แปลงเป็นโครงร่าง

คู่มือนี้ใช้งานได้สำหรับฉัน มันมีข้อมูลมาก เขาเขียนพูดถึงปัญหาการส่งออกร่าง ฉันอ้างจากบทความของเขาในกรณีที่บทความจะถูกลบออก

โซลูชันโดยรวม

1. สร้างอาร์ตบอร์ดสำหรับแต่ละไอคอน (insert -> artboard)
2. ตรวจสอบให้แน่ใจว่าตำแหน่งของบอร์ดศิลปะแต่ละอันไม่มีครึ่งพิกเซลและเป็นเลขคู่
3. ลบการหมุนไอคอนทั้งหมด
4. ลบกล่องที่ถูกผูกไว้เพื่อให้ร่างไม่ส่งออกโค้ดที่ไม่จำเป็น
5. ป้องกันไม่ให้ SVG ทำจากเลเยอร์เส้นขอบ> เส้นทาง> vectorize stroke (ขอบคุณGus )
6. ส่งออกสะอาด. svg

* นี่คือไอคอนที่ผู้เขียนพยายามส่งออก

ร่างข้อบกพร่องการส่งออก

ข้อผิดพลาด # 1

แก้ไขการส่งออกร่างถาวรโดยการเปลี่ยนตำแหน่งบอร์ดเป็นจำนวนคู่ สิ่งนี้จะลบการแปลงใด ๆ ในรหัส ในบันทึกอื่นเนื่องจากตำแหน่งถูกปิดด้วยครึ่งพิกเซล Sketch จึงเปลี่ยนขนาดของช่องมองภาพของฉันเป็น 0 0 25 25 บอร์ดศิลปะดั้งเดิมของฉันคือ 24 x 24px ข้อผิดพลาดนี้ยังเพิ่มรายละเอียดให้กับรหัส ไม่มี bueno

ข้อผิดพลาด # 2

ปัญหา: ตามการออกแบบแต่ละไอคอนถูกตั้งค่าเป็นความกว้าง: 24px ความสูง: 24px และรัศมีเส้นขอบ: 3px ปัญหาคือเมื่อการส่งออกสี่เหลี่ยมถูกเพิ่มเข้าไปในเส้นทางจึงทำให้ยากที่จะขยายขนาดใด ๆ โดย css

วิธีการแก้ไข: ลบกล่องขอบโปร่งใสและปล่อยให้ CSS ทำเวทมนตร์ นักพัฒนาทั้งหมดที่ต้องการจริงๆคือช่องมองภาพตั้งค่าเป็น 24 x 24px พวกเขาสามารถเพิ่มความกว้างความสูงและรัศมีเส้นขอบ

ข้อผิดพลาด # 3

ปัญหา: Sketch ส่งออกการหมุน (-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 เกี่ยวกับการสร้างเส้นทางแบบผสมด้วยตนเอง แต่ดูเหมือนว่าจะทำงานได้อย่างถูกต้อง

(รูปร่างของฉันเป็นวงกลมที่มีสองรูปร่างถูกตัดออกไป)