2024 05 24

2024-05-24

svg

참고: https://itconquest.tistory.com/entry/SVG-%ED%83%9C%EA%B7%B8%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

• 개요 - Scalable Vector Graphics - XML 기반의 벡터 그래픽을 표현하는 포맷 - 픽셀 단위로 이미지를 구성하는 jpg/png와 달리 벡터 기반으로 이미지를 표현함

• 장점
  • 벡터 기반의 이미지는 확대/축소에도 깨지지 않고, 용량이 작음
  • 웹상에서 주로 사용하는 이미지 형식

• <SVG> 태그
  • 웹상에서 벡터 이미지를 구현하기 위해 사용하는 마크업 태그
  • <svg> 태그로 시작하여 width/height 를 통해 이미지의 가로/세로 조절 가능
    • 이미지를 따로 로드하지 않아도 됨 (http 요청 필요없음) -> 빠름
    • 다만 이미지가 아니다 보니 캐싱 불가 -> 매번 그림

• 예시
  • 원: <circle />
    • cx: x좌표
    • cy: y좌표
    • r: 원의 반지름
    • stroke: 선의 색상
    • stroke-width: 선의 굵기
    • fill: 원의 색상
  • 타원: <ellipse />
  • 직사각형: <rect />
    • width: 너비
    • height: 높이
    • opacity: 투명도
    • fill-opacity: 사각형 색상
    • rx/ry: 각 꼭짓점의 둥근 정도
  • 직선: <polyline />
    • points: 좌표

      <svg>
          <circle cx="50" cy="50" r="40" stroke="aqua" fill="blue" stroke-width="3"></circle>
      </svg>
      <svg width="400" height="110">
          <rect width="300" height="100" opacity="0.7" rx="30" ry="60"
              style="fill:orange;" />
      </svg>
      <svg height="200" width="500">
          <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
      </svg>
      

Recharts -> SVG

참고: https://recharts.org/en-US/

• Recharts 라이브러리는 차트를 SVG를 통해 그려준다. 해당 라이브러리가 차트를 SVG로 변환할 때, 사용하는 태그를 알아보자
• <g>
  • https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g
  • SVG 엘리멘트인데 타 SVG 엘리멘트를 그룹화할 때 사용

• <line>
  • https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line
  • 두개의 점을 연결하는 직선을 그릴 때 사용

• <text>
  • https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
  • 텍스트로 구성된 그래픽 요소를 그려냄

• <path>
  • https://developer.mozilla.org/ko/docs/Web/SVG/Tutorial/Paths
  • SVG 기본 도형 라이브러리에서 가장 강력한 엘리먼트
  • 선/곡선/호 등 다양한 형태 그릴 수 있음
  • 여러개의 직선/곡선을 합쳐 복잡한 도형을 그릴 수 있게 해줌
  • 모양은 "d" 속성으로 정의 (속성 안에 특정한 알파벳들이 있음)
    • M -> Move To
    • L -> Line To
    • H -> Horizontal Line To
    • V -> Vertical Line To
    • C -> Cubic Bezier Curve
    • Z -> Close Path

• <use>
  • x, y, width, height 속성으로 문서 전반에 걸쳐 요소 재사용 가능

• <def>
  • https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs
  • 그래픽 요소를 정의하고 나중에 참조할 수 있게 해줌
  • 참조를 해야 그제서야 그려줌
    • use 요소를 통한 참조하면 그려주는 듯!

• <clipPath>
  • https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath
  • ClipPath를 통해서 특정 엘리멘트가 짤려서 보여져야할 곳이 있다면 짤라서 보여줌
    • 여기 안의 요소는 보여주도록, 밖에는 짤라서 안보여줌
  • clipPath 엘리먼트 안에 다른 그래픽 요소를 넣어서 그래픽 요소를 잘라냄