SVG, Favicons 및 우리가 그들과 함께 할 수있는 모든 재미있는 일

웹 사이트 아이콘 (favicons)은 브라우저 탭에 표시되는 작은 아이콘으로, 사용자가 많은 책갈피와 탭 중에서 웹 사이트를 신속하게 식별 할 수 있도록합니다. 그들은 인터넷의 역사에서 영리한 디자인이며 놀라운 기능이 있습니다.

새로운 기능은 SVG를 웹 사이트 아이콘으로 사용하는 것입니다. 대부분의 최신 브라우저는이 기능을 지원하며 지원이 증가하고 있습니다.

웹 사이트 아이콘을 웹 사이트에 추가하는 코드는 다음과 같습니다. 웹 사이트에 배치하십시오 부분:

<link href="/favicon.ico" rel="icon" sizes="any">
<link href="/favicon.svg" rel="icon" type="image/svg xml">
<link href="/manifest.webmanifest" rel="manifest">

웹 사이트의 웹 응용 프로그램에 다음 코드를 추가하십시오.

 {
  "아이콘": [
    { "src": "/icon-192.png", "type": "image/png", "size": "192x192"},
    { "src": "/icon-512.png", "type": "image/png", "크기": "512x512"}
  ]]
}

SVG 웹 사이트 아이콘을 지원하는 브라우저는 첫 번째 아이콘을 무시합니다.<link> 요소 선언 및 두 번째 선언을 사용하십시오<link> 요소. SVG 웹 사이트 아이콘을 지원하지 않지만 웹 애플리케이션 매니페스트를 지원하는 브라우저는 더 높은 해상도 이미지를 사용합니다. 다른 모든 브라우저는 favicon.ico 파일을 사용하는 것으로 돌아갑니다. 이를 통해 웹 사이트 아이콘을 지원하는 모든 브라우저가 좋은 경험을 갖도록합니다.

또한 두 번째 줄에서 rel 이 선언 한 대체 속성 값을 알 수 있습니다. 이 프로그램은 .ico 파일 형식을 대체 디스플레이로 사용하여 웹 사이트 아이콘을 전달합니다.

웹 사이트 아이콘은 safari-pinned-tab.svg 라는 다른 SVG 이미지를로드하는 코드 라인입니다. 이것은 다른 브라우저가 SVG 웹 사이트 아이콘을 지원하기 전에 Safari의 고정 태그 기능을 지원하기위한 것입니다. 여기에 추가 파일을 추가하여 다양한 응용 프로그램 및 서비스를위한 웹 사이트를 향상시킬 수 있으며 나중에 자세히 설명합니다.

다음은 SVG 웹 사이트 아이콘의 현재 지원 수준에 대한 자세한 내용입니다.

이 브라우저는 Caniuse의 데이터를 지원하며 자세한 내용이 포함되어 있습니다. 이 숫자는 브라우저 가이 버전 에서이 기능을 지원하고 나중에이 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일/태블릿

왜 SVG를 선택합니까?

왜 SVG가 필요한지 궁금 할 것입니다. .ico 파일 형식은 오랫동안 주변에 있었으며 최대 256 × 256 픽셀의 이미지를 지원할 수 있습니다. 다음은 세 가지 답변입니다.

쉽게 만들 수 있습니다

.ico 파일 생성은 번거 롭습니다. 이 파일은 Microsoft에서 사용하는 독점 형식이므로이를 작성하려면 전문 도구가 필요합니다. SVG는 개방형 표준이므로 추가 도구 나 플랫폼 잠금없이 사용할 수 있습니다.

미래 개발

망막 화면? 5K? 6k? 해상도와 관련이없는 SVG 파일을 웹 사이트 아이콘으로 사용하면 웹 사이트 아이콘이 디스플레이의 크게 크더라도 미래의 장치에서 명확하고 날카 로워 지도록 보장 할 수 있습니다.

성능

SVG는 일반적으로 매우 작은 파일, 특히 래스터 이미지에 비해 매우 작은 파일입니다. 특히 미리 최적화하는 경우. SVG 브라우저를 지원하지 않는 백업 솔루션으로 16 × 16 픽셀 웹 사이트 아이콘 만 사용하면 높은 지원과 더 작은 파일 크기의 조합을 제공합니다.

이것은 약간 극단적 인 것처럼 보이지만 네트워크 성능에 관해서는 모든 바이트가 중요합니다!

기능

SVG의 또 다른 장점은 우리가 그 안에 직접 CS를 포함시킬 수 있다는 것입니다. 즉, SVG가 사용하지 않고 인라인으로 선언 된 경우 JavaScript를 사용하여 동적으로 조정할 수 있습니다.<img alt="SVG, Favicons 및 우리가 그들과 함께 할 수있는 모든 재미있는 일" > 요소 내장.

<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill:></path></svg>

SVG 웹 사이트 아이콘이 사용되므로<link> 요소는 내장되어 있으므로 JavaScript를 사용하여 수정할 수 없습니다. 그러나 이모티콘과 미디어 쿼리를 사용할 수 있습니다.

이모티콘

Lea Verou는 SVG에 있다는 천재적인 아이디어를 가지고 있습니다.<text></text> 이모티콘은 요소 내에서 작은 크기로 명확한 투명한 배경을 가진 빠른 웹 사이트 아이콘을 만드는 데 사용됩니다.

이에 따라 Chris Coyier는 깔끔한 작은 데모를 만들어 컨셉을 시험해 볼 수 있습니다.

다크 모드 지원

Thomas Steiner와 Mathias Bynens는 독립적으로 prefers-color-scheme 미디어 쿼리를 사용하여 어두운 모드 지원을 제공한다는 아이디어를 독립적으로 발견했습니다. 이 작업은 Jake Archibald의 SVG 탐색 및 미디어 쿼리를 기반으로합니다.

<svg height="128" width="128" xmlns="http://www.w3.org/2000/svg">
  <path fill: dark path d="M111.904 52.937a1.95 1.95 0 00-1.555-1.314l-30.835-4.502-13.786-28.136c-.653-1.313-2.803-1.313-3.456 0L48.486 47.121l-30.835 4.502a1.95 1.95 0 00-1.555 1.314 1.952 1.952 0 00.48 1.99l22.33 21.894-5.28 30.918c-.115.715.173 1.45.768 1.894a1.904 1.904 0 002.016.135L64 95.178l27.59 14.59c.269.155.576.232.883.232a1.98 1.98 0 001.133-.367 1.974 1.974 0 00.768-1.894l-5.28-30.918 22.33-21.893c.518-.522.71-1.276.48-1.99z" fill-rule="nonzero"></path>
</svg>

지원되는 브라우저의 경우이 코드는 Star SVG 웹 사이트 아이콘이 어두운 모드가 활성화 될 때 채우기 색상을 검은 색에서 흰색으로 변경한다는 것을 의미합니다. 매우 영리합니다!

다른 미디어 문의

Dark Mode Support는 저에게 상기시켜줍니다. SVG가 prefers-color-scheme 지원할 수 있다면, 우리는 그들과 함께 무엇을 할 수 있습니까? 레벨 5 미디어 쿼리에 대한 지원은 아직 존재하지 않을 수 있지만 다음은 다음과 같이 고려해야 할 아이디어가 있습니다.

• 낮은 조명 환경에서 light-level 사용하여 불포화 웹 사이트 아이콘 색상을 사용하십시오.
• inverted-colors 사용하여 "플립"을 사용하여 색상을 반전하여 브랜드를 유지하거나 사진 현실 웹 사이트 아이콘이 예상대로 나타나는지 확인하십시오.
• prefers-reduced-motion 사용하여 웹 사이트 아이콘 애니메이션을 삭제하십시오. 이상적으로는 주의력 결핍 과잉 행동 장애 및 기타 관련 장애의 원인이 될 수 있으므로 애니메이션 웹 사이트 아이콘을 먼저 피해야합니다.
• forced-colors 및/또는 Windows 고 대비 모드 미디어 쿼리를 사용하여 웹 사이트 아이콘이 높은 대비 색상 환경에서 시각적 효과를 유지할 수 있도록하십시오! 웹 사이트 아이콘의 색상을 유지하기 위해 색상 키워드를 사용해야합니다!

명확하게 유지하십시오

좋은 웹 사이트 아이콘 디자인의 또 다른 중요한 측면은 작은 브라우저 태그 영역에서 잘 보이게하는 것입니다. 이에 대한 비밀은 벡터 이미지의 경로를 픽셀 그리드와 정렬하는 것입니다. 픽셀 그리드는 컴퓨터가 SVG 수학을 화면에서 볼 비트 맵으로 변환하는 데 사용되는 가이드입니다.

다음은 정사각형 모양을 사용하는 단순화 된 예입니다.

정사각형의 벡터 지점이 아르 보드의 픽셀 그리드와 정렬 될 때 컴퓨터가 모양을 부드럽게하기 위해 사용하는 방지 효과는 필요하지 않습니다. 벡터 포인트가 정렬되지 않으면 "스미어"효과를 얻습니다.

Figma, Sketch, Inkscape 또는 Illustrator와 같은 벡터 편집 프로그램을 사용하여 픽셀 그리드의 벡터 포인트 위치를 조정할 수 있습니다. 이 프로그램은 또한 SVG를 수출합니다. 벡터 포인트의 위치를 ​​조정하려면 정확한 선택 도구를 사용하여 각 노드를 선택하고 원하는 위치로 드래그하십시오.

이러한 작은 크기를 잘 보려면 더 복잡한 아이콘을 단순화해야 할 수도 있습니다. 이와 관련하여 좋은 스타터 가이드를 찾고 있다면 Jeremy Frank는 Vidget에 대한 아주 좋은 두 부분으로 구성된 기사를 썼습니다.

추가 단계를 수행하십시오

웹 사이트 아이콘 외에도 아이콘을 사용하여 경험을 향상시키는 여러 가지 (불행히도 독점적) 방법이 있습니다. 여기에는 앞서 언급 한 Safari의 고정 태그 아이콘, 채팅 앱 확장, 고정 Windows 시작 메뉴 타일, 소셜 미디어 미리보기 및 홈 화면 발사기가 포함됩니다.

이러한 개선 사항을 사용할 수있는 좋은 장소를 찾고 있다면 RealFaviconGenerator.net을 정말 좋아합니다.

웹 사이트 아이콘의 역사에 대한 흥미로운 점 : Internet Explorer는이를 지원하는 첫 번째 브라우저이며 Bharat Shyam이라는 개발자가 마지막 순간에 몰래 추가했습니다.

이야기는 이와 같습니다. 늦은 밤 Shyam은 그의 새로운 웹 사이트 아이콘 기능을 개발하고 있습니다. 그는 주니어 프로젝트 관리자 Ray Sun에게 전화를 걸어 보았습니다.

Shyam은 다음 버전에서 릴리스 될 수 있도록 인터넷 익스플로러 코드베이스에 코드를 사인 할 수있는 권한을 요청하면서 "이것은 좋습니다. Sun은 그것에 대해별로 생각하지 않았습니다. 이 기능은 시원하며 분명히 IE에게 더 나은 이점을 줄 것입니다. 그래서 그는 Shyam에게 계속 추가하라고 말했다. 웹 사이트 아이콘은 Internet Explorer 5로 들어가서 웹의 가장 큰 브라우저 버전 중 하나가 될 것입니다.

그 다음날, Sun 은이 기능을 너무 빨리 전달할 수 있도록 관리자에 의해 꾸짖 었습니다. Shyam은 그날 말까지 고의적으로 기다렸다가 경험이없는 프로젝트 관리자가 그를 통과시킬 것이라는 것을 알았습니다. 그러나 그때까지 코드는 병합되었습니다. 그건 그렇고, 비교적 주요 브라우저 기능이 이와 같은 버전에 몰래 들어가는 것에 놀랄 것입니다.

Jay Hoffmann의 웹 사이트 아이콘을 얻는 방법에서 발췌

플랫폼이 웹 사이트 아이콘에주의를 기울이는 것을 보게되어 기쁩니다. 그들은 오랫동안 내가 가장 좋아하는 작은 디자인 세부 사항 중 하나였으며 사용자가 원하는 것에 더 응답하게되어 기쁩니다. 시간이 있다면 Bharat Shyam이 1999 년에했던 것처럼 SVG 웹 사이트 아이콘을 프로젝트에 추가하지 않겠습니까?

¹ Safari가 SVG 웹 사이트 아이콘 지원을 구현할 것인지 확인할 수는 없지만 그렇게하기를 원합니다. 아무도 들어 본 적이 있습니까?

위 내용은 SVG, Favicons 및 우리가 그들과 함께 할 수있는 모든 재미있는 일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!