본문으로 건너뛰기
실습하기

<svg> 태그

<svg> 태그는 화면 크기에 관계없이 일정한 화질을 유지하는 SVG(Scalable Vector Graphic) 파일을 표현합니다.

SVG는 웹에 그래픽 요소를 깨짐 없이 표현하는 유용한 도구로, 다양한 애플리케이션에서 널리 사용되고 있습니다.


SVG의 주요 속성:​

  1. viewBox: viewBox 속성은 SVG 캔버스 내의 보여지는 영역을 정의합니다. 이 속성은 4개의 값으로 구성되어 있으며 차례대로 (최소 x 좌표값, 최소 y 좌표값, 너비, 높이)로 표시합니다. 예를 들어 viewBox="0 0 100 100"은 SVG의 왼쪽 상단 모서리에서 시작해서 100x100 크기의 영역을 보여줍니다.

  2. preserveAspectRatio: 이 속성은 viewBox가 SVG 컨테이너에 어떻게 맞춰질지를 정의합니다.

  3. fill & stroke: fill 속성은 도형의 내부 색상을 정의하며, stroke 속성은 도형의 외곽선 색상을 정의합니다.

  4. fill-opacity & stroke-opacity: 이러한 속성은 각각 채움과 획의 투명도를 정의합니다. 값은 0 (완전 투명)에서 1 (완전 불투명) 사이입니다.


SVG의 주요 특징:​

  1. 백터 기반: SVG는 벡터 그래픽 기반으로, 그래픽 요소들을 점과 선 기반의 수학적 표현으로 정의합니다. 따라서 확대하거나 축소해도 품질 손실이 없습니다.

  2. DOM 조작: SVG 요소는 웹 페이지의 DOM 내에서 직접 조작할 수 있습니다.

  3. 스타일 및 스크립트: SVG는 CSS로 스타일링할 수 있으며, JavaScript로 애니메이션 및 동작을 조작할 수 있습니다.

  4. 다양한 그래픽 요소: SVG에는 여러 가지 기본 그래픽 요소가 포함되어 있습니다. 예를 들어 원 (<circle>), 사각형 (<rect>), 선 (<line>), 폴리라인 (<polyline>), 다각형 (<polygon>), 경로 (<path>)와 같은 그래픽 요소가 있습니다.


사용 예시​

<svg> 태그 예시
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

템플릿 내 svg 예시
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="18"
  height="19"
  viewBox="0 0 18 19"
  fill="none"
>
  <path
    d="M9 0.72998C4.16914 0.72998 0.25 4.64912 0.25 9.47998C0.25 14.3108 4.16914 18.23 9 18.23C13.8309 18.23 17.75 14.3151 17.75 9.47998C17.75 4.64482 13.8309 0.72998 9 0.72998ZM14.5555 4.76318C15.5679 5.95335 16.1705 7.43769 16.2742 8.99678C14.6973 8.91475 12.8105 8.91475 11.2977 9.05615C11.1062 8.57295 10.9102 8.09912 10.6961 7.64326C12.4406 6.88701 13.7852 5.89326 14.5555 4.76318ZM9 2.18818C10.6996 2.18526 12.3463 2.77887 13.6531 3.86553C12.8602 4.86787 11.616 5.74053 10.0664 6.39912C9.21875 4.83154 8.24336 3.48271 7.20312 2.42061C7.79016 2.26906 8.39373 2.19099 9 2.18818ZM5.70039 2.98584C6.75313 4.03389 7.74219 5.36865 8.6082 6.93115C6.96289 7.43389 5.07617 7.72217 3.0625 7.72217C2.67969 7.72217 2.30625 7.7085 1.93711 7.68545C2.19388 6.67944 2.66241 5.73981 3.31139 4.92937C3.96037 4.11892 4.77484 3.45632 5.70039 2.98584ZM1.72187 9.1335C2.13672 9.15186 2.55586 9.16084 2.97969 9.15654C5.27656 9.1292 7.41406 8.76904 9.25078 8.17998C9.42396 8.54014 9.58802 8.90928 9.74297 9.2874C9.52104 9.33599 9.3031 9.40128 9.09101 9.48272C6.58008 10.5374 4.60234 12.237 3.53125 14.2925C2.35678 12.9645 1.70839 11.2528 1.7082 9.47998C1.7082 9.36279 1.71289 9.24756 1.72187 9.1335ZM9 16.7718C7.38 16.7737 5.80604 16.233 4.5293 15.2358C5.5 13.3128 7.23164 11.7202 9.41484 10.7331C9.61992 10.6374 9.89336 10.5601 10.2078 10.4917C10.4682 11.2115 10.7007 11.9589 10.9051 12.7339C11.2104 13.9036 11.4353 15.0928 11.5781 16.2933C10.7551 16.6086 9.88136 16.7708 9 16.7718ZM12.9422 15.6097C12.7996 14.3968 12.5726 13.1953 12.2629 12.014C12.1066 11.4214 11.9305 10.8472 11.7391 10.2866C13.1699 10.1694 14.8836 10.1862 16.2461 10.2866C16.126 11.3638 15.7671 12.4006 15.1956 13.3214C14.624 14.2423 13.8542 15.024 12.9422 15.6097Z"
    fill="#343E51"
    stroke="#343E51"
    stroke-width="0.0390625"
  />
</svg>

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!