SVG에 대한 완전한 가이드

6/6 페이지 : 스프라이트의 힘

스프라이트의 힘

SVG를 사용하면 해상도에 독립적 인 파일 형식으로 아이콘을 만들 수 있습니다. 이것은 훌륭하지만 HTTP 프로토콜의 제한으로 인해 웹 사이트의 모든 아이콘에 대해 다른 파일 요청을하고 싶지는 않습니다. 이것은 곧 HTTP / 2 프로토콜로 변경 될 것입니다.

wd 내 여권과 내 여권의 차이

각 아이콘에 대해 별도의 요청을하지 않으려면 이번에는 SVG를 제외하고 옛 친구 인 스프라이트로 돌아갈 수 있습니다. SVG에서 스프라이트를 생성하려면 태그를 지정하고 나중에 참조 할 수 있도록 ID를 적용하고 viewBox 캔버스 크기를 정의하기위한 속성입니다. 심볼 아이콘 안에 모양, 텍스트 및 아이콘을 구성하는 기타 요소를 만듭니다.



심볼 태그 안에 접근성을위한 추가 요소를 추가 할 수도 있습니다. 태그. 우리는 내부에 아이콘을 만듭니다. 태그를 지정하여 나중에 사용할 수 있도록 정의하고 페이지에 출력되지 않도록합니다.



SVG에서 스프라이트를 만들 수있는 방법에는 여러 가지가 있습니다. Adobe와 같은 벡터 소프트웨어를 사용하여 만들 수 있습니다. Illustrator CC 또는 Sketch – 아이콘을 아트 보드에 배치하고 파일을 SVG로 내보내기 만하면됩니다. 그러나 그들이 생성하는 코드는 아이콘 시스템으로 사용하기 위해 약간의 편집이 필요합니다. 또 다른 방법은 아이콘 시스템을 수동으로 만드는 것입니다. 이것은 너무 어렵지 않으며 마크 업을 완전히 제어 할 수 있습니다. SVG 스프라이트는 gulp 또는 grunt와 같은 빌드 시스템에 통합 될 수도 있습니다.이를 통해 SVG 파일이 포함 된 폴더를 선택하고 단일 SVG 스프라이트를 출력하도록 빌드를 구성 할 수 있습니다.

SVG 스프라이트를 만들거나 생성 한 후에는이를 사용할 수있는 몇 가지 방법이 있습니다. 파일의 내용을 복사하여 페이지 상단에 넣을 수 있습니다. 이것을 인라인이라고합니다. 또는 php를 사용하는 경우 file_get_contents () 파일을 전역 적으로 포함하는 기능. 유일한 단점은 파일이 이미지가 아닌 브라우저에서 코드로 처리되기 때문에 파일이 캐시되지 않는다는 것입니다.



SVG 스프라이트를 만드는 방법

01. 프레임 워크 만들기

이 튜토리얼에서는 SVG를 웹 사이트 본문 안에 배치 할 것이지만, 외부에서 파일을 사용하여 어떻게 작동하는지 살펴 보겠습니다. 기본 코드에는 SVG 태그가 필요하며 꼬리표.

포토샵에서 곱슬 머리를 수정하는 방법

02. 심볼 만들기

내부 태그 기호 태그를 사용하여 첫 번째 아이콘을 만들 것입니다. 아이콘에 ID를 부여하고 viewBox 속성. 내부에는 아이콘을 구성하는 제목과 모양이 제공됩니다.

Facebook

03. 반복

이제 첫 번째 아이콘을 만들었으므로 나머지 아이콘에도 동일하게 적용합니다. 고유 ID를 제공하고 viewBox 속성.



... ...

04. 아이콘 사용

이제 모든 아이콘을 정의 했으므로 아이콘을 꺼내서 필요할 때마다 페이지에서 사용할 수 있습니다.

스프라이트를 외부 파일로 사용하려면 파일을 참조하도록 use 요소를 업데이트 한 다음 ID를 업데이트해야합니다.

05. 클래스 이름

모든 아이콘을 출력하기 위해 이전 단계를 반복 할 수 있습니다. 우리가 포장하면 아이콘 주위에 태그를 지정하고 CSS로 아이콘 스타일을 지정할 수 있습니다.

06. CSS

이제 아이콘이 있고 개별 클래스 이름이 있으므로 각 아이콘에 다른 채우기 색상을 적용 할 수 있습니다.

.icon--facebook { fill: #3b5998; } .icon--twitter { fill: #1da1f2; } .icon--linkedin { fill: #0077b5; }

이 기사는 원래 Web Designer 잡지 267 호에 게시되었습니다. 여기에서 Web Designer 구독 .

모든 vsco 필터를 무료로 얻는 방법

관련 기사:

  • 1
  • 4
  • 5
  • 6

현재 페이지: 스프라이트의 힘

이전 페이지 SVG에 애니메이션 추가