아이콘

대부분의 이미지는 콘텐츠의 일부이지만 아이콘은 사용자 인터페이스의 일부입니다. UI 텍스트의 크기 조정 및 조정과 동일한 방식으로 확장 및 조정됩니다.

확장 가능한 벡터 그래픽

사진 이미지의 경우 JPG, WebP, AVIF 등 다양한 이미지 형식을 선택할 수 있습니다. 사진이 아닌 이미지의 경우, PNG (Portable Network Graphics) 형식과 SVG (Scalable Vector Graphics) 형식 중에서 선택할 수 있습니다.

PNG와 SVG는 모두 평평한 색상을 처리하는 데 능숙하며 이미지의 배경을 투명하도록 허용합니다. PNG를 사용하는 경우 여러 버전의 이미지를 다양한 크기로 만들고 img 요소에 srcset 속성을 사용하여 이미지를 반응형으로 만들어야 할 수 있습니다. SVG를 사용하는 경우 기본적으로 반응형입니다.

PNG (및 JPG, WebP, AVIF)는 비트맵 이미지입니다. 비트맵 이미지는 정보를 픽셀로 저장합니다. SVG에서 정보는 그리기 지침으로 저장됩니다. 브라우저가 SVG 파일을 읽을 때 명령은 픽셀로 변환됩니다. 무엇보다도 이러한 안내는 상대적입니다. 선과 도형을 설명하는 데 사용하는 크기에 관계없이 모든 것이 적절한 선명도로 렌더링됩니다. 다양한 크기의 여러 SVG를 만드는 대신 모든 크기에서 작동하는 하나의 SVG를 만들 수 있습니다. srcset 속성을 사용할 필요는 없습니다.

<img src="image.svg" alt="A description of the image." width="25" height="25">
<img src="image.svg" alt="A description of the image." width="250" height="250">

XML은 SVG 파일에 명령을 작성하는 데 사용됩니다. 이는 HTML과 같은 마크업 언어입니다.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
  <title>Smiling face</title>
  <circle r="20" fill="yellow" stroke="black"/>
  <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
  <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
  <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>

웃는 얼굴

HTML 내부에 SVG를 넣을 수도 있습니다.

<figure>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
    <title>Smiling face</title>
    <circle r="20" fill="yellow" stroke="black"/>
    <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
    <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
    <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
  </svg>
  <figcaption>
  A description of the image.
  </figcaption>
</figure>

이와 같은 SVG를 삽입하면 브라우저에서 수행해야 하는 요청이 하나 줄어듭니다. 이미지가 HTML 내 HTML과 함께 도착하므로 이미지가 다운로드될 때까지 기다릴 필요가 없습니다. 또한 곧 알게 되겠지만 이와 같은 SVG를 삽입하면 스타일 지정을 더 세밀하게 제어할 수 있습니다.

아이콘 및 텍스트

아이콘 이미지는 투명한 배경에 단순한 모양으로 표시되는 경우가 많습니다. SVG는 아이콘에 이상적입니다.

텍스트와 그 안에 아이콘이 있는 버튼 또는 링크가 있다면 아이콘은 프레젠테이션입니다. 중요한 것은 텍스트입니다. img 요소를 사용할 때 빈 alt 속성은 이미지가 프레젠테이션용임을 나타냅니다.

<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>

CSS는 프레젠테이션용이므로 CSS에 아이콘을 배경 이미지로 넣을 수 있습니다.

<button class="menu">
Menu
</button>

.menu {
  background-image: url(hamburger.svg);
  background-position: 0.5em;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-inline-start: 2em;
}

HTML 내부에 SVG를 삽입하는 경우 aria-hidden 속성을 사용하여 보조 기술에서 숨깁니다.

<button class="menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
  Menu
</button>

독립형 아이콘

버튼과 링크의 목적을 명확히 하려면 버튼 및 링크 안에 텍스트를 사용하세요. 텍스트 없이 아이콘을 사용할 수는 있지만 모든 사용자가 특정 아이콘의 의미를 이해하고 있다고 가정하지는 마세요. 확실하지 않은 경우 실제 사용자를 대상으로 테스트하세요.

텍스트가 없는 아이콘을 사용하면 아이콘이 더 이상 표시되지 않습니다. CSS의 배경 이미지는 아이콘을 표시하는 적절한 방법이 아닙니다. 아이콘에 액세스 가능한 이름을 HTML 형식으로 지정해야 합니다.

img 요소를 사용하는 경우 아이콘은 alt 속성에서 액세스 가능한 이름을 가져옵니다.

<button>
<img src="hamburger.svg" alt="Menu" width="16" height="16">
</button>

또 다른 옵션은 링크 또는 버튼 자체에 액세스 가능한 이름을 지정하고 이미지가 프레젠테이션용임을 선언하는 것입니다. aria-label 속성을 사용하여 액세스 가능한 이름을 제공합니다.

<button aria-label="Menu">
<img src="hamburger.svg" alt="" width="16" height="16">
</button>

SVG를 HTML에 삽입하는 경우 링크 또는 버튼에 aria-label 속성을 사용하여 액세스 가능한 이름을 지정하고 아이콘에 aria-hidden 속성을 사용하세요.

<button aria-label="Menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
</button>

아이콘 스타일 지정

SVG 아이콘을 HTML에 직접 삽입하는 경우 페이지의 다른 요소와 마찬가지로 아이콘의 일부에도 스타일을 지정할 수 있습니다. img 요소를 사용하여 아이콘을 표시하는 경우에는 그렇게 할 수 없습니다.

다음 예에서 SVG 내부의 rect 요소에는 버튼 텍스트의 스타일과 일치하는 blue의 fill 값이 있습니다.

button {
 color: blue;
}
button rect {
  fill: blue;
}

hover 및 focus 스타일을 적용할 수도 있습니다.

button:hover,
button:focus {
  color: red;
}
button:hover rect,
button:focus rect {
  fill: red;
}

리소스

아이콘은 사이트 브랜딩의 중요한 부분입니다. 이제 테마 설정을 활용하여 브랜딩의 다른 측면을 반응형으로 만드는 방법을 알아보겠습니다.

이해도 확인

아이콘에 관한 지식 테스트

SVG는 단일 파일 또는 <svg> 코드 블록 하나로 모든 픽셀 밀도를 처리할 수 있습니다.

참
SVG에는 모든 픽셀 밀도, 배율 또는 확대/축소 수준에서 도형과 선을 그리는 방법이 포함되어 있습니다.
거짓
.png 또는 .jpg와 달리 SVG에는 srcset 또는 <picture> 요소가 필요하지 않습니다.

HTML에 직접 포함된 SVG 코드는 어떤 이점이 있나요?

CSS에서 스타일 지정 가능
SVG 아이콘 모양을 버튼 및 브랜드 색상과 일치시킵니다.
다운로드가 필요하지 않습니다.
안내가 전부 있습니다.
기본적으로 지연 로드됨
다운로드를 할 필요가 없습니다.
CPU 사용량이 적습니다.
내가 지어낸 거야.
새 애셋 없이 밝은 테마나 어두운 테마
미디어 쿼리는 인라인 SVG 스타일을 변경할 수 있습니다.