가이드 및 가이드북

SVG vs PNG: 어떤 포맷을 사용해야 할까요?

웹사이트 아이콘, 로고, UI에는 모든 화면 크기에서 선명한 벡터 경로를 유지하는 SVG를 사용하세요. 이메일 서명이나 소셜 미디어용 고정 픽셀 이미지가 필요할 때는 PNG를 사용하세요.

CSS로 SVG 아이콘을 애니메이션화하는 방법

인라인 SVG 요소에 CSS 클래스를 추가하고 transform 또는 stroke-dasharray 키프레임을 적용하세요. 라이브 편집기를 사용하면 JavaScript 없이 부드러운 애니메이션을 만들 수 있습니다.

Figma 또는 브라우저에서 SVG 아이콘 편집하기

SVG Nexus에서 SVG 코드를 복사하여 Figma나 Illustrator에 바로 붙여넣거나, 브라우저의 벡터 스튜디오에서 별도 프로그램 없이 편집할 수 있습니다.

React, Next.js 및 Vue에서 SVG 아이콘 사용하기

아이콘 페이지에서 React TSX 또는 Vue 3 탭을 선택하면 currentColor와 Tailwind CSS를 지원하는 컴포넌트 코드를 복사할 수 있습니다.

인라인 SVG와 이미지 태그

마우스를 올릴 때 색이 바뀌고 CSS 애니메이션이 필요하면 인라인 SVG나 컴포넌트를 씁니다. 이미지 검색에 노출하려면 너비, 높이, 대체 텍스트를 넣은 이미지 태그를 씁니다.

그라데이션과 클립 ID 충돌 막기

여러 색 세트는 paint0_linear 같은 내부 ID를 자주 재사용합니다. 한 페이지에서 두 아이콘이 같은 ID를 쓰면 잘못된 그라데이션이 그려집니다. SVG Nexus는 아이콘마다 내부 ID 범위를 따로 둡니다.

접근하기 쉬운 아이콘과 RTL 반전

장식용 아이콘은 aria-hidden과 focusable false로 숨깁니다. 아이콘만 있는 버튼에는 분명한 aria-label을 넣습니다. 오른쪽에서 왼쪽으로 쓰는 언어에서는 화살표를 좌우로 뒤집습니다.

외부 SVG 파일 정리하기

SVG는 XML 형식이므로 믿을 수 없는 파일에 스크립트와 이벤트 처리가 들어 있을 수 있습니다. script 요소를 지우고 엄격한 보안 정책과 nosniff 헤더로 SVG를 제공하세요.