แยก SVG จาก Font Awesome

ฉันต้องการรับข้อมูลเส้นทาง SVG จากFont Awesomeร่ายมนตร์เพื่อให้สามารถใช้เป็น SVG ใน HTML ได้โดยตรง ฉันคิดว่ามันจะง่ายพอ ๆ กับการคัดลอกข้อมูลเส้นทางจากfontawesome-webfont.svgแต่เมื่อฉันใช้มันใน HTML ของฉันสัญลักษณ์ทั้งหมดจะแสดงผลแบบกลับหัว ใครทราบสาเหตุ?

(ดู ซอ )

Font Awesome SVG:

<glyph unicode="&#xf007;" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />

... พอร์ตเป็น HTML SVG (และลดขนาดลง):

<svg width="1000" height="1000" ><path transform="scale(0.1,0.1)" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z"/></svg>

ทั้งหมดตามข้อกำหนด SVG ...

ไม่เหมือนกับกราฟิกมาตรฐานใน SVG ที่ระบบพิกัดเริ่มต้นมีแกน y ชี้ลงด้านล่างตารางออกแบบสำหรับฟอนต์ SVG พร้อมกับระบบพิกัดเริ่มต้นสำหรับร่ายมนตร์มีแกน y ชี้ขึ้นเพื่อให้สอดคล้องกับแนวปฏิบัติที่เป็นที่ยอมรับในอุตสาหกรรมสำหรับ รูปแบบตัวอักษรยอดนิยมมากมาย

ตามความคิดเห็นนี้การเปลี่ยนกระดาษห่อหุ้มให้<svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>ดูเหมือนจะทำเคล็ดลับโดยที่1792เป็นหน่วยต่อ em และ1536คือการเพิ่มขึ้นขององค์ประกอบแบบอักษร

เพียงแค่รับไอคอน svg ที่พร้อมใช้งานจากrepo github นี้
พวกเขาจะพลิกและจัดกึ่งกลางตามต้องการแล้ว

กดไฟล์ใดก็ได้แล้วกด "Raw"

แอพ IcoMoonทำให้การตายเป็นเรื่องง่าย

ใช้สคริปต์ fontforge มีสคริปต์ที่ฉันพบทางออนไลน์ที่นี่ :

fontforge -lang=ff -c 'Open($1); SelectWorthOutputting(); foreach Export("svg"); endloop;' font.ttf 

ดู: http://fontforge.sourceforge.net/scripting.html

นอกจากนี้ยังมีเครื่องมือที่จะ Node.js verify.htmlอัตโนมัตินี้สำหรับคุณและสร้างก่อนและหลัง https://github.com/eugene1g/font-blast

ฉันใช้มันกับฟอนต์อื่น ๆ จนถึงตอนนี้การแปลงไอคอนไม่ดีเพียง 1 ครั้ง แต่ส่วนที่เหลือในฟอนต์ SVG ก็ใช้ได้

คุณสามารถดาวน์โหลดเวอร์ชันล่าสุดได้faที่นี่: https://fontawesome.com/

จากนั้นไปที่advanced-options/raw-svgโฟลเดอร์ มีคุณจะพบสามโฟลเดอร์brands, regularและsolidมีทั้งหมดไอคอนใหม่ล่าสุดที่มี

คุณสามารถดาวน์โหลด Font-Awesome svg ที่คุณต้องการจาก repo ได้ที่ Github

https://github.com/FortAwesome/Font-Awesome/tree/master/svgs

คุณสามารถดาวน์โหลดได้จาก flaticon.com ที่นี่:

http://www.flaticon.com/packs/font-awesome