맙소사, SVG Favicons FTW!

6766 단어 developmentfrontendfaviconhtml
나는 최근에 보조 프로젝트(Style Check와 bedrocss를 해 왔다. 내가 충분한 시간을 한 것처럼 나는 이미 추가하고 싶은 지경에 이르렀다.
나는 SVG favicons와 함께 놀기로 결정했다.favicon (boo Safari) 하지만 그것은 나의 요구를 충족시키기에 충분하다.지원되지 않는 브라우저에favicon이 나타나지 않으면 좋습니다.이것은 세계의 종말이 아니다.
SVG를 사용하면 다음과 같은 멋진 혜택을 얻을 수 있습니다.
  • 단일 파일 선명한 이미지 품질
  • 이모티콘 지원
  • 인라인 아이콘(리소스 링크 필요 없음)
  • 암흑모드 검출(달콤!)
    • SVG Favicon을 프로젝트에 추가하는 방법에 대해 자세히 살펴보겠습니다.다음 예(이모티콘 제외)에서는 매우 기본적인 동그라미 SVG를 사용합니다.
    support is just ok 
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
  <circle cx="50" cy="50" r="50"/>
</svg>

    HTML에 SVG Favicon 추가


    favicon을 사이트에 추가하는 문법은 이미 오랫동안 바뀌지 않았고 SVG favicon도 마찬가지다.
    HTML 파일의 <head> 태그에 <link> 요소를 배치하고 rel 속성을'icon', href 속성을 아이콘이 있는 경로로 설정합니다.
    <link rel="icon" href="path/to/favicon.svg"/>
    SVG를 사용하기 때문에 아이콘은 원하는 크기가 될 수 있습니다. 캔버스가 사각형인지 확인하십시오.
    무료 아이콘을 검색하려면 이 좋은 자원이거나 icones로 아이콘을 만들 수 있습니다.

    필통 SVG Favicons를 데이터 URI로 인라인


    SVG favicons로 전환한 후, 내가 시도한 첫 번째 일은 그것들을 단독 파일에 연결하는 것이 아니라, 내부 형식과 함께 사용할 수 있는지 확인하는 것이다.
    나는 이전에 내연 이미지나 배경을 사용한 적이 있는데 효과가 매우 좋다.좋은 소식, 그것도favicons에 적용됩니다.
    경로에 연결하지 않고 전체 SVG 코드 앞에 data:image/svg+xml;utf8, (마지막 쉼표 포함) 접두사를 붙이고 전체 내용을 href 속성에 전달합니다.
    <link rel="icon" href="data:image/svg+xml;utf8,<svg...>...</svg>">
    나는 아이콘 파일을 폴더에 두는 것을 잊을 수 있기 때문에, 이 코드를 모든 항목에 복사하거나 붙여넣을 수 있다. (나의 대부분의 보조 항목은 현재 같은 아이콘을 사용하고 있다.)
    인라인 SVG favicon을 사용하는 것을 반대할 수도 있습니다. 파일에 연결하면 캐시를 할 수 있기 때문에 모든 페이지에 인라인 SVG를 추가하면 HTML 크기가 증가할 수 있습니다. 그러나 이것은 큰 차이가 없을 것 같습니다. 저는 이곳의 유지보수성을 더욱 좋아합니다.
    만약 당신이 한 사이트만 처리해야 한다면 이것은 큰 문제가 되지 않을 수도 있지만, 여러 사이트를 유지하고 같은favicon을 사용하는 사람에게는 이것은 매우 좋다.

    데이터 URI 기술 이모티콘으로 표현해 주세요.


    얼마 전 by는 이모티콘에 이모티콘을 추가하는 방법을 보여줬다.나는 아마도 여태껏 생각해 본 적이 없을 것이다. 그러나 이것은 매우 간단하다.
    문법의 작업 원리는 이전과 같다.SVG는 <text> 요소를 통해 텍스트 내용을 지원하고 이모티콘이 거의 텍스트이기 때문에 SVG에 이모티콘을 설치할 수 있다(적응하기 위해 이동해야 할 수도 있다).
    <link rel="icon" href="data:image/svg+xml,<svg xmlns="http://w3.org/2000/svg" viewBox="0 0 100 100">
<text y=".9em" font-size="90">💩</text>
</svg>" />
    (하하, 똥이다!)
    이것은favicon을 가지기 쉬워서 사용자 정의favicon을 만들 필요가 없습니다.더 쉬운 걸 원하십니까?체크아웃 인.이모티콘 목록을 보여 줍니다. 그 중 하나를 클릭하면favicon 세션 전체를 클립보드에 복사할 수 있습니다.
    만약 이것이 당신의 잼이 아니라면, 또한 만들 것입니다 emojicon.dev.이것은 제3자 서비스로favicon을 생성합니다.너는 네가 원하는 이모티콘으로 그의 서비스에 직접 연결할 수 있다.
    <link rel="icon" href="https://fav.farm/💩" />
    개발자 커뮤니티의 창의력은 나에게 깊은 인상을 남기는 것을 멈추지 않았다.멋지고 똑똑하고 창의적인 개발자들이 얼마나 많은데.

    최애농장. 다크 모드 체크 추가


    SVG에 <style> 태그를 추가하고 사용자의 어두운 모드 기본 설정에 따라 아이콘을 변경할 수 있습니다.
    <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
  <style>
    svg {
      background: white;
    }
    circle {
      fill: black;
    }
    @media (prefers-color-scheme: dark) {
      svg {
        background: black;
      }
      circle {
        fill: white;
      }
    }
  </style>
  <circle cx="50" cy="50" r="50"/>
</svg>">
    이 예에서는 SVG 및 prefers-color-scheme를 대상으로 하지만 클래스를 사용할 수도 있습니다.SVG를 사용자정의하려면 이렇게 해야 할 수 있습니다.
    SVG의 <circle> 표시는 이 XML 문서에 포함되어 있기 때문에, 프로그램의 나머지 부분에 스타일이 유출될 염려가 없습니다.
    읽어주셔서 감사합니다.만약 당신이 이 글을 좋아한다면, 내가 언제 더 많은 글을 발표할지 알고 싶다면, <style> media query 또는.건배!
    최초 발표sign up for my newsletter.
    PhantomJs 설치 실패 문제 해결
    [TIL] React : List & Key

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage