Trích xuất SVG từ Phông chữ Tuyệt vời

Question

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

(Xem Fiddle)

Font SVG sửa:

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

... Ported sang HTML SVG (và thu nhỏ lại):

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

Answer 1

Tất cả theo SVG specification ...

Không giống như đồ họa 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 glyphs, có trục y hướng lên trên. thực hành ngành cho nhiều định dạng phông chữ phổ biến.

Theo this comment, Thay đổi wrapper để <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg> dường như làm các trick, nơi là em đơn vị mỗi và là đi lên trên yếu tố font-face

Answer 2

IcoMoon app làm cho cái chết đơn giản này.

Answer 3

Sử dụng tập lệnh phông chữ. Có một kịch bản tôi thấy online here:

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

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

Answer 4

Chỉ cần có được các biểu tượng svg sẵn sàng từ this github repo
Họ đã lật và tập trung khi cần thiết

Nhấn vào bất kỳ tệp nào và sau đó "Nguyên bản"

Answer 5

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

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

Answer 6

Ngoài ra còn có một công cụ Node.js sẽ tự động này cho bạn, & tạo trước & 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ỉ 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.