HTML SVG 태그

Ahyeon, Jung·2023년 10월 5일

SVG(Scalable Vector Graphics)

백터 그래픽을 표현할 때 사용하는 방식(a container for SVG graphics)
이벤트를 연결해서 사용자와 동적으로 반응하며, 서버에서 실시간으로 데이터를 받아서 이미지를 출력가능

SVG Shapes

Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>

SVG Circle

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

SVG Rectangle

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

SVG Rounded Rectangle

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

SVG Star

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

SVG Logo

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">안녕</text>
</svg>

SVG에 이미지 넣기

<svg
         id="_레이어_1"
         data-name="레이어 1"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 440.32 640"
       >
         <defs>
           <pattern
             id="svgBg"
             patternUnits="userSpaceOnUse"
             width="440.32"
             height="640"
           >
             <image :href="img" width="440.32" height="640" />
           </pattern>
         </defs>
         <polygon
           fill="url(#svgBg)"
           points="440.32 0 428.73 12.02 417.15 0 405.57 12.02 393.98 0 382.41 12.02 370.82 0 359.24 12.02 347.66 0 336.08 12.02 324.5 0 312.92 12.02 301.34 0 289.76 12.02 278.18 0 266.61 12.02 255.03 0 243.45 12.02 231.88 0 220.3 12.02 208.72 0 197.14 12.02 185.56 0 173.98 12.02 162.4 0 150.83 12.02 139.25 0 127.67 12.02 116.09 0 104.51 12.02 92.94 0 81.36 12.02 69.78 0 58.2 12.02 46.63 0 35.05 12.02 23.47 0 11.9 12.02 .32 0 .32 171.45 0 171.45 0 640 11.58 627.98 23.15 640 34.73 627.98 46.3 640 57.88 627.98 69.46 640 81.04 627.98 92.61 640 104.19 627.98 115.77 640 127.35 627.98 138.93 640 150.5 627.98 162.08 640 173.66 627.98 185.24 640 196.82 627.98 208.4 640 219.98 627.98 231.56 640 243.13 627.98 254.71 640 266.29 627.98 277.86 640 289.44 627.98 301.02 640 312.6 627.98 324.18 640 335.76 627.98 347.34 640 358.92 627.98 370.5 640 382.09 627.98 393.66 640 405.24 627.98 416.83 640 428.41 627.98 440 640 440 549.03 440.32 549.03 440.32 0"
         />
       </svg>