[HTML] svg 태그

SVG: Scalable Vector Graphics

Tutorial
https://www.w3schools.com/graphics/svg_intro.asp
https://www.w3schools.com/graphics/svg_reference.asp


Reference
https://developer.mozilla.org/en-US/docs/Web/SVG

//-------------------------------------
예제
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

- g (그룹)
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Using g to inherit presentation attributes -->
  <g fill="white" stroke="green" stroke-width="5">
    <circle cx="40" cy="40" r="25" />
    <circle cx="60" cy="60" r="25" />
  </g>
</svg>


- defs (미리 정의)
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Some graphical objects to use -->
  <defs>
    <circle id="myCircle" cx="0" cy="0" r="5" />

    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="20%" stop-color="gold" />
      <stop offset="90%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my graphical objects -->
  <use x="5" y="5" href="#myCircle" fill="url('#myGradient')" />
</svg>



//-------------------------------------
주요 기능

- 도형 (shapes)

https://www.w3schools.com/graphics/svg_rect.asp
Rectangle, Circle, Ellipse, Line, Polygon, Polyline, Path, Text, Linear, Radial



animate - 애니메이션

https://css-tricks.com/guide-svg-animations-smil/

g - 그룹으로 묶기

script - 태그 내에서 스크립트 사용 가능
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/script