Giải nén SVG từ Font Awesome

Tôi muốn lấy dữ liệu đường dẫn SVG từ các glyph của Font Awesome để có thể sử dụng chúng ngay lập tức dưới dạng SVG trong HTML của mình. Tôi nghĩ nó sẽ dễ dàng như sao chép dữ liệu đường dẫn từ fontawesome-webfont.svg , nhưng khi tôi sử dụng nó trong HTML của mình, tất cả các biểu tượng đều hiển thị ngược. Có ai biết tại sao không?

(Xem Fiddle )

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" />

... Đã chuyển sang HTML SVG (và thu nhỏ):

<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>

Tất cả theo đặc điểm kỹ thuật SVG ...

Không giống như đồ họa tiêu chuẩn trong SVG, trong đó hệ tọa độ ban đầu có trục y hướng xuống dưới, lưới thiết kế cho phông chữ SVG, cùng với hệ tọa độ ban đầu cho glyph, có trục y hướng lên trên để nhất quán với thông lệ ngành được chấp nhận cho nhiều định dạng phông chữ phổ biến.

Theo nhận xét này , Việc thay đổi trình bao bọc thành <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>có vẻ là một mẹo nhỏ, trong đó 1792 là đơn vị trên mỗi em và 1536 là phần đi lên trên mặt phông chữ

Chỉ cần tải các biểu tượng svg sẵn sàng từ kho github này.
Chúng đã được lật và căn giữa khi cần thiết

Nhấn bất kỳ tệp nào rồi nhấn "Raw"

Ứng dụng IcoMoon làm cho điều này trở nên đơn giản.

Sử dụng tập lệnh fontforge. Có một kịch bản tôi tìm thấy trực tuyến ở đây :

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

Xem: http://fontforge.sourceforge.net/scripting.html

Ngoài ra còn có một công cụ node.js sẽ tự động hóa việc này cho bạn và tạo trước và sau verify.html. https://github.com/eugene1g/font-blast

Tôi đã sử dụng nó trên các phông chữ khác, chỉ có 1 chuyển đổi biểu tượng xấu cho đến nay, nhưng phần còn lại trong phông chữ SVG là tốt.

Bạn chỉ cần tải xuống phiên bản mới nhất fatại đây: https://fontawesome.com/

Và sau đó đi đến advanced-options/raw-svgthư mục. Ở đó bạn sẽ tìm thấy ba thư mục brands, regularvà solidchứa tất cả các biểu tượng mới nhất hiện có.

Bạn có thể tải chúng xuống từ flaticon.com tại đây:

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

Bạn chỉ cần tải xuống bất kỳ svg Font-Awesome nào bạn cần từ kho của họ tại Github

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