SVG에 대해서 1

SVG에 대해서 1

2025. 7. 29. 21:55ㆍit

SVG란?

확장 가능한 벡터 그래픽(Scalable Vector Graphics)
웹페이지에서 벡터 그래픽을 표현하기 위한 W3C 표준 형식.
확대하거나 축소해도 깨지지 않고 선명.
xml 기반 문서 형식(HTML처럼 태그로 이루어져 있으며, 직접 코드로 작성하거나 조작 가능.)
CSS와 javascript를 이용해서 조작 가능.
모양이 복잡하고 개체수가 많을 수록 성능이 떨어짐.
벡터이기 때문에 이미지의 크기에 상관 없이 선명하게 유지되고 모양이 많이 복잡하지 않은 경우 파일 사이즈도 작다.

HTML 문서에 SVG를 넣는 여러가지 방법

① <img> 태그

<body>
  <img src="images/test.svg" alt="">
</body>

이미지에 조작 불가능.

② CSS Background

<head>
  <style>
    .svg {
      width: 300px;
      height: 300px;
      background: url('images/test.svg') no-repeat 0 0;
    }
  </style>
</head>
<body>
  <div class="svg"></div>
</body>

이미지에 조작 불가능.

③ SVG 요소들을 직접 inline으로 삽입

<body>
  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
</body>

이미지에 조작 가능.

④ <object> 태그

<body>
  <object data="images/test.svg" type="image/svg+xml"></object>
</body>

이미지에 조작 어려움.

그 외 imbed, iframe으로도 사용 가능하지만 추천하지 않음.

SVG 크기 설정

viewBox란?

svg 태그의 속성으로 사용.
SVG 그래픽의 내부 좌표 시스템을 정의하는 역할
SVG의 카메라 시야
viewBox="minX minY width height"
- minX: 가시 영역의 왼쪽 시작 좌표 (x축 기준)
- minY: 가시 영역의 위쪽 시작 좌표 (y축 기준)
- width: 내부 좌표계의 너비
- height: 내부 좌표계의 높이

viewBox 예시

viewBox 속성을 사용한 경우와 사용하지 않은 경우 차이 비교.

viewBox 속성 없는 경우

<style>
  svg {
    border: 1px solid #000;
  }
</style>

<h3>viewBox 없이 표현</h3>
<svg width="300" height="150">
  <rect x="0" y="0" width="100" height="50" fill="blue" />
</svg>

width="100"과 height="50"인 파란 사각형이,
300×150 캔버스 안에 그대로 원래 크기대로 위치.

viewBox 속성 있는 경우

<style>
  svg {
    border: 1px solid #000;
  }
</style>

<h3>viewBox를 이용한 확대</h3>
<svg width="300" height="150" viewBox="0 0 100 50">
  <rect x="0" y="0" width="100" height="50" fill="green" />
</svg>

viewBox="0 0 100 50"으로 설정하면,
내부의 100x50 사각형이 **캔버스 전체(300x150)**를 꽉 채우도록 확대되어 보임.

SVG 압축

svg 용량을 줄이기 위해, 보통 압축하여 사용.
svg 압축해주는 사이트 있음.
예 : https://www.iloveimg.com/ko/compress-image/compress-svg

svg에 CSS 적용하기 1

html 태그 처럼, svg 태그 및 자식 태그에도 클래스를 적용할 수 있고 해당 클래스 이름으로 css를 적용 가능.
svg에서는 background-color 속성 대신 fill 속성을 사용.

<style>
  .rect {
    fill: blueviolet;
  }
</style>

<h3>css 적용하기</h3>
<svg width="100" height="100" viewBox="0 0 100 100">
  <rect class="rect" x="0" y="0" width="100" height="100"/>
</svg>

svg에 CSS 적용하기 2

css를 svg 내부에 포함시킬 수도 있다.
svg는 xml이다 보니, xml 파서에서 문자 처리시 오류나는 경우가 있기 때문에 style태그 안쪽 시작 부분과 끝 부분에 각각 <![CDATA[ 와 ]]> 를 입력한다.

<h3>css 적용하기</h3>
<svg width="100" height="100" viewBox="0 0 100 100">
  <style>
  <![CDATA[
  .rect {
    fill: blueviolet;
  }
  ]]>
  </style>
  <rect class="rect" x="0" y="0" width="100" height="100"/>
</svg>

참고 : CDATA란?

CDATA는 character data(문자 데이터)를 의미하며, 마크업 언어(xml)에서 CDATA로 문자들을 감싸게 되면, 이 문자열들 사이의 데이터는 마크업으로 해석하지 않아야 하는 데이터를 포함한다는 것을 의미한다.

예를들어 마크업 언어에서 < 또는 > 와 같은 기호는 이미 태그로서 정의되어 있기 때문에 문자기호를 그대로 사용하면 안되고, ~~&lt~~ , ~~&gt~~ , ~~&amp~~ 와 같은 문자를 사용하여야 한다. 하지만 가독성이 좋지않고 사용성도 좋지 않다.

따라서 마크업 언어에서 < 또는 > 와 같은 기호를 문자 그대로 인식 시키기 위해 CDATA 블록으로 감싸주는 것이다.

출처: https://inpa.tistory.com/entry/XML-📑-CDATA-란-무엇인가-❓-문자-기호-처리 [Inpa Dev 👨‍💻:티스토리]

svg에 javascript 적용하기 1

svg도 일반 html 태그와 같이 javascript로 제어할 수 있다.

<style>
  .rect {
    fill: blueviolet;
    transition: .4s;
  }
  .rect.ani-on {
    fill: green;
  }
</style>

<h3>css 적용하기</h3>
<svg width="100" height="100" viewBox="0 0 100 100">
  <rect class="rect" x="0" y="0" width="100" height="100"/>
</svg>

<script>
  const rectEl = document.querySelector('.rect');
  rectEl.addEventListener('click', function() {
    this.classList.toggle('ani-on');
  });
</script>

svg에 javascript 적용하기 2

위에서 style태그를 svg에 포함시킨 것 처럼 script도 포함시킬 수 있다.

<h3>css 적용하기</h3>
<svg width="100" height="100" viewBox="0 0 100 100">
  <style>
    .rect {
      fill: blueviolet;
      transition: .4s;
    }
    .rect.ani-on {
      fill: green;
    }
  </style>
  <script>
    const rectEl = document.querySelector('.rect');
    rectEl.addEventListener('click', function() {
      this.classList.toggle('ani-on');
    });
  </script>
  <rect class="rect" x="0" y="0" width="100" height="100"/>
</svg>

'it' 카테고리의 다른 글

SVG에 대해서 3 (3)	2025.08.25
SVG에 대해서 2 (5)	2025.08.10
robots.txt에 대하여 (0)	2025.07.13
Youtube iframe 라이브러리 요청 문제 (3)	2025.02.03
도메인 정보 수정 후, 카카오 맵이 동작 안하는 경우 (브라우저 DNS 캐시 문제) (1)	2024.12.02

생각과 관찰 사이