콘텐츠로 이동
코알라코딩

10.svg

1. 개요

섹션 제목: “1. 개요”

[SVG 예제사이트] [SVG 한글 예제사이트]

SVG(Scalable Vector Graphics) 는 웹용 벡터방식 이미지 포멧입니다.

다양한 해상도에 대응하는 웹서비스 제작시 용이하게 사용할수 있습니다.

2. 예제

섹션 제목: “2. 예제”

2.1. viewbox

섹션 제목: “2.1. viewbox”

viebox 는 일러스트레이터의 아트보드와 유사합니다

[미리보기]

<svg width="50" height="50" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="25" fill="red" />
</svg>
<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="25" fill="red" />
</svg>
<svg width="100" height="100" viewBox="0 0 50 50">
  <circle cx="50" cy="50" r="25" fill="red" />
</svg>
  1. width , height 는 svg 요소의 크기입니다
  2. viewbox 는 svg 요소의 프레임이며 속성값은 프레임의 좌표를 의미합니다.
  3. 같은 크기의 svg 이미지라도 프레임의 크기에 따라 다르게 보이기도 합니다.

2.2. svg 삽입하기

섹션 제목: “2.2. svg 삽입하기”

[미리보기]

svg이미지를 html 에 삽입하는 3가지 방법을 알아봅시다.

<img src="images/twitter_logo_original.svg" alt="" />
<div class="svg"></div>
<object type="image/svg+xml" data="images/twitter_logo_original.svg"></object>
.svg {
  width: 300px;
  height: 300px;
  background: url(images/twitter_logo_original.svg) no-repeat;
}

2.3. 자바스크립트 이벤트 넣기

섹션 제목: “2.3. 자바스크립트 이벤트 넣기”

[미리보기]

<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" fill="#D9D9D9"/>
<script>
document.querySelector('rect').onclick=function(){
  this.setAttribute('fill','red');
}
</script>
</svg>

2.4. text path 애니메이션

섹션 제목: “2.4. text path 애니메이션”

회전하는 글씨를 만들어보자

실행화면

  1. 피그마를 열고 아래와 같은 이미지를 제작한다.
  2. 원을 더블클릭하여 선택후 2->3 순서대로 클릭한다.
    • 도형 레이어를 패스로 깨는 과정이다.
  3. 프레임에서 우클릭후 번호 순서대로 클릭한다

2.5. 마퀴텍스트

섹션 제목: “2.5. 마퀴텍스트”

특정영역안에서 흐르는 텍스트애니메이트를 만들어보자

실행화면

  1. 피그마를 활용하여 마스크가 적용된 텍스트레이어를 제작한다.
  2. svg 형식으로 코드를 복사한다.
<svg width="300px" height="100px" version="1.0" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="clip">
      <rect width="300px" height="100px"/>
    </clipPath>
    <style type="text/css">
        text {
          font-size: 5rem;
          fill: #000;
        }
        .text1 {
          animation: left 10s linear infinite;
        }
        @keyframes left {
          from {
            transform: translateX(100%);
          }
          to {
            transform: translateX(-100%);
          }
        }
    </style>
  </defs>
  <rect class="bg" width="300px" height="100px" fill="red"/>
  <g class="text" clip-path="url(#clip)">
    <text class="text1" x="0" y="70">Hello SVG! Hello SVG! Hello SVG! Hello SVG! Hello SVG!</text>
  </g>


</svg>
  1. html
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>SVG</title>
  </head>


  <body>
    <svg class="the-svg">
      <style>
        .the-svg {
          width: 300px;
          height: 100px;
          background: #c348e9;
          border-radius: 30px;
        }


        .the-svg text {
          font-size: 5rem;
        }


        .text1 {
          animation: left 5s infinite linear;
        }


        @keyframes left {
          0% {
            transform: translateX(0);
          }


          100% {
            transform: translateX(-100%);
          }
        }


        #mask-circle rect {
          fill: #fff;
        }
      </style>
      <mask id="mask-circle">
        <rect width="300" height="80" />
      </mask>
      <g mask="url(#mask-circle)">
        <text class="text1" x="10" y="100">Hello SVG! Hello SVG! Hello SVG! Hello SVG! Hello SVG!</text>
      </g>
    </svg>


    <object data="marquee.svg" type="image/svg+xml"></object>
  </body>
</html>