HTML 및 CSS에서 SVG 이미지 파일 사용

1. <img> 태그를 사용하여 웹 페이지에 SVG 파일 추가
2. <object> 태그를 사용하여 웹 페이지에 SVG 파일 추가
3. <embed> 태그를 사용하여 웹 페이지에 SVG 파일 추가
4. <iframe> 태그를 사용하여 웹 페이지에 SVG 파일 추가
5. CSS background-image 속성을 사용하여 SVG 파일을 배경으로 추가

이 기사에서는 HTML 및 CSS를 사용하여 웹 페이지에 SVG 이미지를 삽입하는 방법을 소개했습니다.

SVG 파일은 벡터 이미지이며 이를 사용하면 png, jpeg, jpg 또는 기타 이미지 파일을 사용하는 것보다 많은 이점이 있습니다. SVG 파일의 주요 이점은 해상도에 독립적이라는 것입니다. 즉, 크기를 임의의 차원으로 확장해도 이미지의 해상도나 품질은 변경되지 않습니다.

또한 SVG 파일 크기는 매우 작기 때문에 웹 페이지 로딩 시간이 단축됩니다. 또한 텍스트 편집기에서 SVG 파일을 편집하고 일부 키워드 관련 텍스트를 추가하여 SEO 친화적으로 만들 수 있습니다.

또한 스크립팅을 통해 SVG 파일에 애니메이션을 추가할 수 있다는 점도 SVG 파일 사용의 가장 큰 장점 중 하나입니다.

<img> 태그를 사용하여 웹 페이지에 SVG 파일 추가

이 섹션에서는 HTML의 <img> 태그를 사용하여 웹 페이지에서 SVG 이미지 파일을 렌더링했습니다. svgrepo에서 두 개의 다른 아이콘을 가져와 <img> 태그의 src 태그에 해당 URL을 삽입했습니다.

예제 코드:

<img src="https://www.svgrepo.com/show/426102/camera.svg" alt="camera icon">
<img src="https://www.svgrepo.com/show/426942/transport.svg" alt="car icon">

위의 출력 이미지에서 사용자는 카메라와 자동차의 SVG 아이콘을 볼 수 있습니다.

<object> 태그를 사용하여 웹 페이지에 SVG 파일 추가

<object> HTML 태그를 사용하면 사용자가 웹 페이지에서 오디오, 비디오 또는 PDF와 같은 멀티미디어를 렌더링할 수 있습니다.

SVG 파일을 표시하기 위해 object 태그의 두 가지 속성을 사용했습니다. <object>의 data 속성은 SVG 파일의 로컬 경로 또는 URL을 사용합니다.

<object> 태그의 type 속성은 파일 형식을 취하며 image/svg+xml을 해당 값으로 사용하여 SVG 파일을 렌더링합니다.

여기에서는 object 태그를 사용하여 카메라와 자동차 아이콘을 렌더링했습니다.

<object data="https://www.svgrepo.com/show/426102/camera.svg" type="image/svg+xml"></object>
<object data="https://www.svgrepo.com/show/426942/transport.svg" type="image/svg+xml">

<object> 태그 안에 대체 이미지를 추가할 수도 있습니다. 아래 예에서는 카메라 아이콘의 깨진 URL을 가져와 대체 이미지를 추가했습니다.

이제 사용자가 아래 코드를 실행하면 SVG 파일의 URL이 깨졌을 때만 대체 이미지가 표시됩니다.

<object data="https:/w.svgrepo.com/show/426102/camera.svg" type="image/svg+xml">
    <img src="https://yt3.ggpht.com/ytc/AMLnZu-K8Cu9BcdyoXT2AeAi7TJ744ADUCQyYblAoH9F=s900-c-k-c0x00ffffff-no-rj"
    style="height: 50px;width: 50px;" />
</object>
<object data="https://www.svgrepo.com/show/426942/transport.svg" type="image/svg+xml" >

위의 출력에서 사용자는 카메라 아이콘이 아닌 대체 이미지인 DelftStack의 로고를 표시하고 있음을 알 수 있습니다.

<embed> 태그를 사용하여 웹 페이지에 SVG 파일 추가

<embed> 태그를 사용하면 다른 애플리케이션을 웹 페이지에 포함할 수 있습니다. <embed> 태그와 함께 src 및 type 속성을 사용하여 SVG 파일을 웹 페이지에 삽입합니다.

src 속성은 SVG 파일의 URL 또는 경로를 취하고 type은 멀티미디어 유형을 정의합니다.

여기에서는 <embed> 태그를 사용하여 두 개의 SVG 아이콘을 웹 페이지에 삽입했습니다.

<embed src="https://www.svgrepo.com/show/426102/camera.svg" type="image/svg+xml">
<embed src="https://www.svgrepo.com/show/426942/transport.svg" type="image/svg+xml" >

<iframe> 태그를 사용하여 웹 페이지에 SVG 파일 추가

<iframe> 태그를 사용하면 개발자가 문서 내부에 인라인 프레임을 포함할 수 있습니다. 오디오, 비디오 또는 멀티미디어와 같은 외부 리소스에 다른 프레임 또는 블록을 제공합니다.

여기에서는 <iframe> 태그를 사용하고 src 속성 내에 SVG 파일의 URL을 추가했습니다. 또한 <embed> 및 <object> 태그와 같이 표시하려는 멀티미디어 유형을 여기에서 지정할 필요가 없습니다.

<iframe src="https://www.svgrepo.com/show/426102/camera.svg" height="50px">

위의 출력은 카메라 아이콘이 별도의 블록 또는 프레임에 포함되어 있음을 보여줍니다.

CSS background-image 속성을 사용하여 SVG 파일을 배경으로 추가

background-image CSS 속성을 사용하면 특정 요소의 배경 이미지를 설정할 수 있습니다. 여기에서는 SVG 파일을 배경 이미지로 설정했습니다.

아래 예에서는 <h3> 태그를 만들고 일부 텍스트를 추가했습니다. 또한 CSS의 background-image 속성을 사용하여 배경 SVG 이미지를 추가했습니다.

또한 <h3> 텍스트의 색상을 추가하고 background-repeat: no-repeat;를 설정했습니다. 배경 이미지의 반복을 피하기 위해.

<h3>welcome to DelftStack!</h3>

h3{
  background-image: url("https://www.svgrepo.com/show/426102/camera.svg");
  background-repeat: no-repeat;
  color: red;
}

이 기사에서는 HTML 및 CSS를 사용하여 SVG 파일을 렌더링하는 다양한 방법을 배웠습니다. 그러나 사용자는 HTML의 <SVG> 태그를 사용하여 SVG 파일을 웹 페이지에 직접 추가할 수도 있습니다.

<img> 및 <object> 태그를 사용하면 SVG 파일 로드가 실패할 경우 사용자가 대체 이미지를 설정할 수 있습니다. 사용자는 <embed> 또는 <iframe> 태그를 사용하여 SVG 이미지 파일을 별도의 블록에 포함할 수 있습니다.

그러나 <iframe>은 웹 페이지의 SEO에 영향을 미치므로 사용하지 않는 것이 좋습니다. 대신 <object> 또는 인라인 <svg>를 사용할 수 있습니다.