인라인 SVG와 이미지 태그
마우스를 올릴 때 색이 바뀌고 CSS 애니메이션이 필요하면 인라인 SVG나 컴포넌트를 씁니다. 이미지 검색에 노출하려면 너비, 높이, 대체 텍스트를 넣은 이미지 태그를 씁니다.
인라인 SVG는 문서의 일부라 CSS가 닿습니다. hover 상태, currentColor 테마, CSS keyframes로 다시 색을 입히거나 움직일 수 있고, symbol 참조 스프라이트는 반복되는 아이콘을 한 번의 다운로드로 줄여 줍니다. <img> 태그는 이미지로 불러오는 방식이라 CSS로 다시 꾸밀 수는 없지만, 브라우저가 캐시하고 이미지가 막혀도 alt 텍스트가 설명을 유지하며 이미지 검색에 노출될 수 있습니다. 인터페이스에 반응해야 하는 아이콘은 인라인으로 넣고, 임의 아이콘 페이지의 CSS data URI로 한 번만 임베드하거나 파일로 참조하는 방법은 그림을 캐시에 두고 HTML을 가볍게 유지할 때 쓰세요.
Inline SVG, styled by CSS
<span class="text-blue-600">
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
<path d="M4 10.5 12 4l8 6.5V20h-5.5v-4.5h-5V20H4Z"/>
</svg>
Save
</span>Image tag, cached and described with alt text
<img src="save.svg" width="20" height="20" alt="Save">이 사이트의 검증된 사실
- 내보내기 형식: Optimized SVG, PNG, WebP, React TSX, Vue 3 SFC, Svelte, CSS mask or data URI, SVG sprite
- 래스터 내보내기 크기: 64px, 128px, 256px, 512px, 1024px, 2048px
- 작업 공간에서 파일당 업로드 한도: 2 MB
- 라이선스와 제작자는 모든 아이콘 페이지에 기록됩니다.