Skip to main content

SVG Animation v1.0 </doc>

webstoryboy.co.kr

스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다.

  • IE9 이상 지원합니다.
  • XML을 이용하여 라인, 곡선, 기하학정인 그래픽 표현이 가능합니다.
  • 벡터 방식이기 때문에 확대하거나 축소가 가능합니다.
  • DOM 단위로 컨트롤이 되어 문서 복잡도가 증가되어 렌더링이 느립니다.
사각형 만들기 View
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG</title>
    <style>
        svg {width: 160px; height: 160px; background: #ffebee;}
        .rect1 {width:100px; height:100px; fill:#f48fb1;}
        .rect2 {width:100px; height:100px; fill:#f48fb1; stroke-width:5; stroke:#880e4f;}
        
        #canvas {width: 160px; height: 160px; background: #ffebee;}
    </style>
</head>
<body>
    <svg>
        <rect class="rect1" x="30" y="30"></rect>
    </svg>
    
    <svg>
        <rect class="rect2" x="30" y="30"></rect>
    </svg>
    
    <canvas id="canvas">
        
    </canvas>
    
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        
        ctx.fillStyle = "#f48fb1";
        ctx.fillRect(50,25,200,100);
    </script>
</body>
</html>           
원 만들기 View
   
둥근원 만들기 View
   
다각형 만들기 View
   
라인 만들기 View
   
  • d: 패스를 만드는 정보를 의미합니다.
  • m: Moveto(이동)
  • l: lineto(라인)
  • h: horizontal lineto(수평라인)
  • v: vertical lineto(수직라인)
  • c: curveto(곡선)
  • s: smooth curveto(부드러운 곡선)
  • q: quadratic Bezier curveto(2차 베지어 곡선)
  • t: smooth quadratic Bezier curveto(부드러운 2차 베지어 곡선)
  • a: elliptical Arc(둥근 모양)
  • z: closepath(닫힌 패스)
  • 대문자일 경우는 절대 포지션을, 소문자일 경우는 상대 포지션을 의미합니다.
패스 만들기 View
   
라인 캡 만들기 View
   
그라디언트 만들기 View
   
Clip-path View
   

SVG Text-animation1

See the Pen SVG - Text Animation by webstory (@webstoryboys) on CodePen.

SVG Text-animation2

See the Pen SVG - Text Animation2 by webstory (@webstoryboys) on CodePen.

SVG Text-animation3

See the Pen SVG - Text Animation3 by webstory (@webstoryboys) on CodePen.

SVG Text-animation4

See the Pen SVG - Text Animation4 by webstory (@webstoryboys) on CodePen.