Post

WEB) SVG에 대해 알아보자

Posted Updated
Preview Image
By parksohyunnn 6 min read

SVG 파일을 HTML 및 CSS에 넣는 방법과 그 차이점

SVG(Scalable Vector Graphics)는 웹 개발에서 벡터 이미지를 표현하는 강력한 방법입니다. SVG는 해상도에 독립적이고, 크기를 변경해도 품질이 유지되며, CSS 및 JavaScript를 사용하여 스타일링 및 제어가 가능합니다. 이 블로그 글에서는 SVG 파일을 HTML에 포함시키는 다양한 방법과 CSS를 사용하여 스타일을 적용하는 방법, 그리고 각 방법의 차이점과 장단점을 살펴보겠습니다.

1. SVG를 HTML에 포함시키는 방법

1. 이미지 태그 사용 (<img>)

HTML의 <img>; 태그를 사용하여 외부 SVG 파일을 포함할 수 있습니다. 이는 가장 간단한 방법입니다.

1

<img src="path/to/your.svg" alt="Description of SVG">

1) 장점:

  • 간단하고 빠릅니다.
  • SEO에 유리합니다(alt 속성 사용 시).

2) 단점:

  • 스타일링 및 애니메이션 제어가 제한적입니다.
  • SVG 내부 요소에 접근할 수 없습니다.

2.객체 태그 사용 (<object>)

<object> 태그를 사용하여 외부 SVG 파일을 포함할 수 있습니다.

1

<object type="image/svg+xml" data="path/to/your.svg"></object>

1) 장점:

  • SVG 내부 요소에 접근할 수 있습니다.
  • CSS 및 JavaScript를 사용하여 스타일링 및 제어가 가능합니다.

2) 단점:

  • 일부 브라우저에서 지원이 제한될 수 있습니다.
  • SEO에 불리할 수 있습니다.

3. 인라인 SVG

SVG 코드를 HTML 문서에 직접 포함시킬 수 있습니다.

1
2
3

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

1) 장점:

  • SVG 요소에 대한 완전한 제어가 가능합니다.
  • CSS 및 JavaScript를 사용하여 스타일링 및 제어가 가능합니다.
  • 네트워크 요청을 줄일 수 있습니다.

2) 단점:

  • HTML 문서의 크기가 커질 수 있습니다.
  • 여러 페이지에서 동일한 SVG를 사용할 경우, 코드 중복이 발생할 수 있습니다.

4. 백그라운드 이미지로 사용

CSS의 background-image 속성을 사용하여 SVG를 백그라운드 이미지로 설정할 수 있습니다.

1
2
3
4
5
6
7
8
9
10

<div class="svg-background"></div>

<style>
  .svg-background {
    width: 100px;
    height: 100px;
    background-image: url('path/to/your.svg');
    background-size: cover;
  }
</style>

1) 장점:

  • 간단한 배경 이미지로 사용하기 좋습니다.
  • HTML 문서가 깔끔해집니다.

2) 단점:

  • CSS에서 스타일링 및 애니메이션 제어가 제한적입니다.
  • SVG 내부 요소에 접근할 수 없습니다.

2. SVG를 CSS에 포함시키는 방법

1. 데이터 URL 사용

CSS에서 background-image 속성에 데이터 URL을 사용하여 SVG를 인라인으로 포함할 수 있습니다.

1
2
3
4
5
6
7
8
9
10

<div class="svg-background"></div>

<style>
  .svg-background {
    width: 100px;
    height: 100px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+PC9zdmc+');
    background-size: cover;
  }
</style>

1) 장점:

  • 외부 파일을 로드할 필요가 없습니다.
  • 네트워크 요청을 줄일 수 있습니다.

2) 단점:

  • 데이터 URL이 길어질 경우, CSS 파일의 크기가 커질 수 있습니다.
  • 디버깅이 어렵습니다.

3. SVG 스타일링 방법

1. CSS를 사용한 스타일링

SVG 요소에 클래스를 추가하여 CSS에서 스타일링할 수 있습니다.

1
2
3
4
5
6
7
8
9
10

<svg class="my-svg" width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle class="my-circle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

<style>
  .my-circle {
    fill: blue; /* 채우기 색상 변경 */
    stroke: green; /* 테두리 색상 변경 */
  }
</style>

2. JavaScript를 사용한 스타일링 및 애니메이션

JavaScript를 사용하여 SVG 요소의 스타일을 변경하거나 애니메이션을 추가할 수 있습니다.

1
2
3
4
5
6
7
8
9

<svg id="my-svg" width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle id="my-circle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

<script>
  document.getElementById('my-circle').addEventListener('click', function() {
    this.setAttribute('fill', 'blue');
  });
</script>

결론

SVG 파일을 HTML과 CSS에 포함시키는 방법은 각각의 용도와 상황에 따라 다르게 선택할 수 있습니다. 인라인 SVG는 높은 제어권과 유연성을 제공하지만 HTML 문서를 복잡하게 만들 수 있습니다. 외부 파일로 로드하는 방식은 간단하지만 스타일링과 제어가 제한적일 수 있습니다. CSS를 사용한 배경 이미지로 활용하는 방법은 간단한 디자인 요소를 추가하는 데 유용하지만, 복잡한 상호작용에는 적합하지 않습니다.

각 방법의 장단점을 이해하고, 프로젝트의 요구 사항에 맞는 방식을 선택하여 효과적으로 SVG를 활용하시기 바랍니다.

WEB
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github