Font Awesome에서 SVG 추출

HTML에서 SVG로 바로 사용할 수 있도록 Font Awesome 글리프 에서 SVG 경로 데이터를 가져 오고 싶습니다. fontawesome-webfont.svg 에서 경로 데이터를 복사하여 붙여 넣는 것만 큼 쉬울 것이라고 생각 했지만 HTML에서 사용하면 기호가 모두 거꾸로 렌더링됩니다. 왜 그럴까요?

( Fiddle 참조 )

글꼴 굉장 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 사양에 따라 ...

초기 좌표계의 y 축이 아래쪽을 가리키는 SVG의 표준 그래픽과 달리, SVG 글꼴의 디자인 그리드는 글리프의 초기 좌표계와 함께 업계에서 허용되는 일관성을 위해 위쪽을 가리키는 y 축을 갖습니다. 많은 인기있는 글꼴 형식.

당 이 댓글 에 래퍼를 변경하는 <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>경우, 트릭을 할 것 같다 1792는 단위 당 EM이며 1536 글꼴 얼굴 요소의 상승입니다

이 github 리포지토리 에서 준비된 svg 아이콘을 얻으십시오.
그들은 이미 필요에 따라 뒤집혀 있고 가운데에 있습니다.

파일을 누른 다음 "Raw"를 누릅니다.

IcoMoon 앱 은 이것을 간단하게 만듭니다.

fontforge 스크립트를 사용하십시오. 여기에 온라인에서 찾은 스크립트가 있습니다 .

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

참조 : http://fontforge.sourceforge.net/scripting.html

이를 자동화하고 before & after를 생성하는 node.js 도구도 있습니다 verify.html. https://github.com/eugene1g/font-blast

나는 다른 글꼴에서 사용했지만 지금까지 하나의 잘못된 아이콘 변환 만 사용했지만 SVG 글꼴에서 나머지는 괜찮 았습니다.

fa여기 에서 최신 버전을 간단히 다운로드 할 수 있습니다 : https://fontawesome.com/

그런 다음 advanced-options/raw-svg폴더 로 이동하십시오 . 당신은이 세 폴더를 찾을 수 있습니다 brands, regular그리고 solid모든 최신 아이콘을 사용할 수 포함.

Github의 저장소에서 필요한 Font-Awesome svg를 다운로드 할 수 있습니다.

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

flaticon.com에서 다운로드 할 수 있습니다.

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