SVG 아이콘

SVG 아이콘은 SVG 이미지로, 웹 애플리케이션이나 모바일 애플리케이션 내에서 아이콘이나 이미지 버튼으로 사용됩니다. SVG 아이콘은 브랜드 마크에도 사용될 수 있습니다. 이 SVG 아이콘 강의는 자신만의 SVG 아이콘을 만드는 방법과 높은 품질의 사전 제작된 SVG 아이콘을 다운로드할 수 있는 곳을 설명합니다.

SVG 아이콘의 장점

SVG 아이콘의 장점은, 애플리케이션에서 표시할 위치와 애플리케이션을 표시하는 화면 크기에 따라 비례적으로 확대하고 축소할 수 있다는 것입니다. SVG 아이콘은 비트맵 그래픽보다 우수한 점이 많습니다. 비례적으로 확대할 때도像素화되지 않으며, 축소할 때도 품질을 잃지 않습니다. 비트맵 그래픽은 확대할 때像素화되고, 축소할 때 품질을 잃습니다.

Web 애플리케이션에서 SVG 아이콘 사용

Web 브라우저에서 SVG를 표시하는 것과 같이, 여러 가지 방법이 있습니다.Web 브라우저에서SVG를 HTML 페이지의 일부로 표시할 때, SVG 아이콘을 표시하는 가장 쉬운 방법은 HTML img 요소를 사용하는 것입니다. HTML img 요소는 SVG 아이콘의 크기를 쉽게 확대하고 축소할 수 있습니다.

SVG 아이콘을 표시하는 img 요소 예제는 다음과 같습니다:

<img src="svg-icon.svg">

SVG 아이콘의 크기를 확대하거나 축소하려면, CSS width 또는 height 스타일 속성을 사용하면 됩니다. CSS Height Style 속성을 추가한 img 요소 예제는 다음과 같습니다:

<img src="svg-icon.svg" style="height:32px">

SVG 아이콘을 확대하거나 축소할 때纵横비를 유지하려면, width 또는 height 중 하나만 설정해야 합니다. - 이 두 가지 값을 동시에 설정할 수 없습니다. 하나의 속성의 너비를 설정하면, 브라우저는 다른 축에서 SVG 아이콘을 축소하여 SVG 아이콘의纵横비를 유지합니다.

SVG 아이콘을 생성하려면

SVG 아이콘을 만들고 싶을 때는 SVG 파일을 생성해야 합니다. SVG 아이콘은 단순히 자신의 SVG 파일에 포함된 SVG 이미지입니다. 아래는 SVG circle 요소로 구성된 매우 간단한 원형 아이콘 예제입니다:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink="
　　　　<circle　cx="64"　cy="64"　r="64"　style="fill:　#00ccff;"></circle>
</svg>

이 SVG 아이콘과 함께 img 요소를 표시할 때의 모습은 다음과 같습니다:

그러나 img 요소를 사용하여 이 SVG 아이콘을 표시하고 img 요소의 크기를 확대 및 축소할 때 SVG 아이콘은 확대되거나 축소되지 않습니다. 대신, SVG 캔버스의 일부만或多或少 표시됩니다. img CSS Height 속성을 다음과 같이 설정합니다:32예제:

이미지의 일부만 표시하는 방법에 주의하세요. 전체 원형을 비례적으로 축소하지 않습니다.

이 문제를 일으키는 원인은 SVG 이미지 파일에 부족한 정보가 있기 때문입니다. SVG viewBox 속성에 값을 설정해야 합니다. SVG viewBox 속성은 X와 Y 방향에서 얼마나 많은 SVG 캔버스를 표시할지 지정합니다.

예제에서는 SVG 캔버스의 원형 아이콘 부분만 표시하고 싶습니다. 이 영역은 점 0,0에서 점까지 확장됩니다.128,128（원의 반지름은64，64，64중심으로 사용할 수 있습니다. SVG Viewbox 속성을 사용하여 SVG 그리드의 이 영역만 렌더링할 수 있습니다. 아래는 Viewbox 값을 설정한 SVG 원 아이콘의 모습입니다：

<svg　xmlns="http://www.w3.org/2000/svg"　　xmlns:xlink="http://www.w3.org/1999/xlink"　　viewBox="0　0　128　128">
　　　　<circle　cx="64"　cy="64"　r="64"　style="fill:　#00ccff;"></circle>
</svg>

이는 표시되는 SVG 아이콘입니다. 높이는 각각32、48과64픽셀: