Inline SVG vs Icon Fonts [CAGEMATCH]

아이콘 글꼴 vs 인라인

If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options are using inline SVG and using icon fonts.

당신이 사이트에 대한 아이콘 시스템을 구축하는 경우, 당신은 몇 가지 옵션이 있습니다. 당신이 아이콘 래스터 이미지 할 필요가 알고 있다면, 당신은 가능성이 CSS 스프라이트를 사용하여 수 있습니다.아이콘 (훨씬 더 일반적인 요즘) 벡터 이미지 일 경우에는 몇 가지 옵션이 있습니다. 이러한 옵션에는 inline SVG을 사용하는 것과 icon fonts을 사용하는 것이 있습니다.

우리 비교해보도록 합시다!!!

× Success!! 확인하셨음 지워주세요!

Icons are Vector

There are big advantages to vector icons: resizable up and down without losing quality, extra sharp on retina displays, and small file size among them.

vertor icons의 큰 장점들: 품질을 잃지 않고 위 아래로 크기조정 가능,작은 크기로도 선명하게 보여줌.

★	Icon Font	Inline SVG
Icons are Vector	Browsers consider it text, so the icons are anti-aliased as such. Can lead to icons not being as sharp as you might expect. 브라우저가 텍스트를 고려, 그래서 아이콘과 같은 앤티 앨리어싱됩니다. 아이콘 당신이 기대하는만큼 선명함함이 없는 상황이 발생합니다.	Straight up vector 벡터 방향으로 향해 갑니다.

In a recent personal example, while converting some icons from fonts to SVG on CodePen, some of the font icons were noticeably less sharp than the ones I converted over.

최근 개인용의 예에서 CodePen에 SVG로 글꼴에서 일부 아이콘을 변환하는 동안 글꼴 아이콘 중 일부는 내가 통해 변환 된 것보다 눈에 띄게 덜 선명했다.

선택 버튼으로 돌아갑시다!!!

CSS Control

★	Icon Font	Inline SVG
CSS Control	You can control the size (via font-size), color, shadows, rotation, etc. via CSS. 당신은 CSS를 통해 등, 색상, 그림자, 회전, (글꼴 크기를 통해) 크기를 제어 할 수 있습니다.	You have all the same CSS control as with a font, but better, because you can 1) control individual parts of a multi-part icon and 2) use SVG-specific CSS like stroke properties. 당신은 글꼴과 마찬가지로 모두 같은 CSS를 제어 할 수 있지만 더 나은 이유로는 1)여러 부분의 아이콘의 각 부분을 제어하고 2)스트로크 속성 같은 SVG 고유의 CSS를 사용합니다.

The big win for inline SVG here is probably multi-color icons.

여기에서 inline SVG에 대한 큰 승리는 아마 멀티 컬러 아이콘입니다.

선택 버튼으로 돌아갑시다!!!

Positioning

★	Icon Font	Inline SVG
Positioning	It can be frustrating to position a font icon. The icons are inserted via pseudo element, and it depends on line-height, vertical-align, letter-spacing, word-spacing, how the font glyph is designed (does it naturally have space around it? does it have kerning information?). Then the pseudo elements display type affects if those properties have an effect or not. 이 글꼴 아이콘을 배치 할 수 복잡 할 수 있습니다. 아이콘은 의사 요소를 통해 삽입하고, 글꼴 문양이 디자인 된 방식 라인 높이, 수직 정렬, 편지 - 간격, 단어 간격에 따라 결정된다 (이것은 자연적으로 주위 공간이 있습니까?이 커닝 정보를 가지고 있습니까?) . 이러한 성질은 효과가없는 경우, 또는 유사 소자 디스플레이 유형에 영향을 미친다.	SVG just is the size that it is. SVG는 일반적 크기를 가지고 있습니다.

See how the pseudo element box isn't quite where the glyph actually is.

글리프가 실제로 어디 의사 요소 상자가 아주없는 방법을 참조하십시오.

The SVG box is the size of the SVG.

SVG 상자가 SVG의 크기입니다.

선택 버튼으로 돌아갑시다!!!

Weird Failures

★	Icon Font	Inline SVG
Weird Failures	An icon font might fail because 1) it's being loaded cross-domain without the proper CORS headers and Firefox doesn't like that 2) for any reason, the font file fails to load (network hiccup, server failure, etc) 3) There is some weird Chrome bug that dumps the @font-face and shows a fallback font instead 4) Surprising browser doesn't support @font-face. 아이콘 폰트은 다음과 같은 이유 때문에 실패할 수 있습니다. 1) 적절한 CORS 헤더없이 크로스 도메인을로드 그리고 파이어 폭스는 좋아하지 않는다 2) 어떤 이유로, 폰트 파일은 로드되지 않는다.(네트워크 hiccup, 서버 고장 등) 3)@font-face를 덤프 대신 대체 글꼴을 보여줍니다 몇 가지 이상한 크롬 버그가 있습니다 4)Surprising 브라우저 @font-face를 지원하지 않습니다. Font failures are pretty common for a variety of reasons. Plus, if you try and do something clever like map icons to "Private Use Area" of unicode and the font fails, it may do something really weird like show an unexpected emoji, because the environment you're in uses that same area for emoji. Or that emoji might even overrule your glyphs! 폰트 실패는 여러 가지 이유로 매우 일반적이다. 당신이 시도하고 유니 코드의지도 아이콘을 "개인 사용 영역"과 같은 영리한 뭔가를하고 글꼴이 실패 할 경우에있어 환경이 이모티콘에 대해 동일한 영역을 사용하기 때문에 플러스, 그것은 같은 예기치 않은 이모티콘을 보여 정말 이상한 일을 할 수있다 . 또는 이모티콘은 당신의 상형 문자를 좌우할 수도 있습니다!	Inline SVG is right in the document. If the browser supports it, it displays it. inline SVG는 문서의 권리입니다. 브라우저가 지원하는 경우 그것을 표시합니다.

★

Icon Font

Inline SVG

Weird Failures

An icon font might fail because 1) it's being loaded cross-domain without the proper CORS headers and Firefox doesn't like that 2) for any reason, the font file fails to load (network hiccup, server failure, etc) 3) There is some weird Chrome bug that dumps the @font-face and shows a fallback font instead 4) Surprising browser doesn't support @font-face.

아이콘 폰트은 다음과 같은 이유 때문에 실패할 수 있습니다. 1) 적절한 CORS 헤더없이 크로스 도메인을로드 그리고 파이어 폭스는 좋아하지 않는다 2) 어떤 이유로, 폰트 파일은 로드되지 않는다.(네트워크 hiccup, 서버 고장 등) 3)@font-face를 덤프 대신 대체 글꼴을 보여줍니다 몇 가지 이상한 크롬 버그가 있습니다 4)Surprising 브라우저 @font-face를 지원하지 않습니다.

Font failures are pretty common for a variety of reasons. Plus, if you try and do something clever like map icons to "Private Use Area" of unicode and the font fails, it may do something really weird like show an unexpected emoji, because the environment you're in uses that same area for emoji. Or that emoji might even overrule your glyphs!

폰트 실패는 여러 가지 이유로 매우 일반적이다. 당신이 시도하고 유니 코드의지도 아이콘을 "개인 사용 영역"과 같은 영리한 뭔가를하고 글꼴이 실패 할 경우에있어 환경이 이모티콘에 대해 동일한 영역을 사용하기 때문에 플러스, 그것은 같은 예기치 않은 이모티콘을 보여 정말 이상한 일을 할 수있다 . 또는 이모티콘은 당신의 상형 문자를 좌우할 수도 있습니다!

Inline SVG is right in the document. If the browser supports it, it displays it.

inline SVG는 문서의 권리입니다. 브라우저가 지원하는 경우 그것을 표시합니다.

선택 버튼으로 돌아갑시다!!!

Forced Failures

★	Icon Font	Inline SVG
Forced Failures	▶Proxy browsers like Opera Mini or UC Browser don't support @font-face at all, even though they sometimes report that they do. So even if you try to feature detect, it may fail. 오페라 미니 또는 UC 브라우저와 같은 프록시 브라우저들은 틈날때 보고를 함에도 불구하고, 전혀 @font-face를 지원하지 않습니다. 당신이 감지 기능을 시도하였다하더라도, 그것은 실패 할 수 있습니다. ▶Some people force their own fonts over yours, for example in a user stylesheet or a browser extension specifically for applying custom styles. For instance, one that applies a font better for people with dyslexia. (More on the issues with icon font accessibility from Seren D.) 어떤 사람들은 당신만을 위해 자신의 글꼴을 사용자 스타일 시트 또는 사용자 지정 스타일을 적용하기위한 구체적 브라우저를 적용하기도 한다. 예, 난독증을 가진 사람들을위한 더 나은 글꼴을 적용하는 것이 있다.(SEREN D.에서 아이콘 글꼴 접근성 문제에 대한 기타) ▶Blocking technology can either automatically or offer to block custom fonts. (reference) 차단 기술은 자동적으로 또는 제공 사용자 정의 글꼴을 차단 할 수 있습니다. (참고)	Even those proxy browsers support SVG. Blockers don't care about SVG. 심지어 그 프록시 브라우저는 SVG를 지원합니다. 차단제는 SVG 걱정하지 않는다.

★

Icon Font

Inline SVG

Forced Failures

▶Proxy browsers like Opera Mini or UC Browser don't support @font-face at all, even though they sometimes report that they do. So even if you try to feature detect, it may fail.

오페라 미니 또는 UC 브라우저와 같은 프록시 브라우저들은 틈날때 보고를 함에도 불구하고, 전혀 @font-face를 지원하지 않습니다. 당신이 감지 기능을 시도하였다하더라도, 그것은 실패 할 수 있습니다.

▶Some people force their own fonts over yours, for example in a user stylesheet or a browser extension specifically for applying custom styles. For instance, one that applies a font better for people with dyslexia. (More on the issues with icon font accessibility from Seren D.)

어떤 사람들은 당신만을 위해 자신의 글꼴을 사용자 스타일 시트 또는 사용자 지정 스타일을 적용하기위한 구체적 브라우저를 적용하기도 한다. 예, 난독증을 가진 사람들을위한 더 나은 글꼴을 적용하는 것이 있다.(SEREN D.에서 아이콘 글꼴 접근성 문제에 대한 기타)

▶Blocking technology can either automatically or offer to block custom fonts. (reference)

차단 기술은 자동적으로 또는 제공 사용자 정의 글꼴을 차단 할 수 있습니다. (참고)

Even those proxy browsers support SVG. Blockers don't care about SVG.

심지어 그 프록시 브라우저는 SVG를 지원합니다. 차단제는 SVG 걱정하지 않는다.

Ad blocker offering to totally block custom fonts.

광고 차단 기능을 제공하는 사용자 정의 글꼴을 완전히 차단합니다.

Forcing a different font upon a page can destroy an icon font system.

페이지에 다른 글꼴이 강제로 아이콘 폰트 시스템을 파괴 할 수 있습니다.

선택 버튼으로 돌아갑시다!!!

Semantics

★	Icon Font	Inline SVG
Semantics	To use responsibly, you're injecting the icon via a pseudo element on an (empty) <span> . Either bad or no semantics, depending on how you feel about that kind of thing. 당신은 (빈) <SPAN>에 의사 요소를 통해 아이콘을 주입하고, 책임감있게 사용합니다. 나쁘거나 아무 의미 없거나, 당신이 그런 종류에 대해 어떻게 생각하는지에 따라 달라집니다.	Icons are little images. The semantics of <svg> says "I'm an image." Seems better to me. 아이콘은은 작은 이미지입니다. <svg>의 의미는 "나는 이미지입니다."라고 보기에 더 낫다.

선택 버튼으로 돌아갑시다!!!

Accessibility

★	Icon Font	Inline SVG
Accessibility	You have to be quite careful with icon fonts to make sure you do it in an accessible way. You should basically do everything in this article. You're always fighting to make sure that the icon itself isn't read (but something else is) and that hard-to-detect fail states are handled. 당신은 당신이 접근 방법으로 그것을 확인하는 아이콘 글꼴 매우 조심해야합니다. 당신은 기본적으로이 문서의 모든 일을해야한다. 당신은 항상 아이콘 자체는 읽을 수 없게 되어 있는지 확인하기 위해 부딪힙힙니다.(하지만 뭔가 다른 것입니다) 그 어려운 감지 상태를 처리하는 실패합니다.	I'm no expert, but research suggests using the proper combination of elements and attributes ( <title>, <desc>, and aria-labelledby) you can convey good information across the browser specturm. Plus no weird fail states. 내가 전문가는 아니지만, 연구 요소의 적절한 조합을 사용하여 제안 및 속성 (<제목>, <DESC>, 그리고 아리아 - labelledby) 브라우저의 specturm에서 좋은 정보를 전달 할 수 있습니다. 게다가 더 이상이 상태를 실패하지 않습니다.

선택 버튼으로 돌아갑시다!!!

Ease of Use

★	Icon Font	Inline SVG
Ease of Use	Using a pre-created icon font was never particularly responsible (too many unused icons). Creating your own icon font was never overly comfortable. I think the best were Pictos Server (limited to Pictos icons) and IcoMoon (free login to save projects). Fontello has an API I didn't see it used to make a good build tool. 미리 만든 아이콘 폰트를 사용하면 결코 특히 책임 (너무 많이 사용하지 않는 아이콘)이었다. 당신의 자신의 아이콘 폰트를 만들기 지나치게 편안한 적이 없었다. 나는 가장 PICTOS (PICTOS 아이콘에 한함) 서버 및 IcoMoon를 (무료 로그인이 프로젝트를 저장합니다)라고 생각. Fontello 나는 그것이 좋은 빌드 도구를 만드는 데 사용 보지 못했다 API를 가지고있다.	The inline SVG system is easier because you can do it all by hand if needed. Or use a tool like IcoMoon (exports either way). Or use a build tool. 필요한 경우 손으로 모든 것을 할 수 있기 때문에 인라인 SVG 시스템은 쉽다. 또는 IcoMoon 같은 도구를 (어느 쪽이든 수출)를 사용합니다. 아니면 빌드 도구를 사용합니다.

선택 버튼으로 돌아갑시다!!!

Browser Support

★	Icon Font	Inline SVG
Browser Support	Very deep. Even IE 6. 매우 짙다. 심지어 IE 6.	Decent, but problems are IE 8- and Android 2.3-. Fallbacks doable but not wonderful. 괜찮아보이지만 문제는 IE 8과 안드로이드 2.3- 있습니다. 대비책을 줍니다. 하지만 완벽하지않습니다.

선택 버튼으로 돌아갑시다!!!

Winner

It all comes down to browser support. If you can go IE 9+ / Android 3+, inline SVG is better at pretty much everything than icon fonts. If you need the deeper browser support, I feel like an inline SVG fallback would be too big of a pain to be worth it (maintaining a PNG copy, inserting an additional element to display PNG version, hiding SVG element... it's weighty).

승자는!!

그것은 모든 브라우저 지원까지 제공됩니다. 당신이 IE 9 +/ 안드로이드 3 이상을 갈 수 있다면, 인라인 SVG는 아이콘 폰트에 비해 거의 모든 더 나은입니다. 당신이 깊은 브라우저 지원이 필요한 경우, 내가 SVG 대체가 가치가 고통이 너무 큰 것 인라인 같은 느낌 (SVG 요소를 숨기고, PNG 버전을 표시하기 위해 추가 요소를 삽입, PNG 사본을 유지 ... 그것은 무게입니다) .