SVG 작업

---

SVG 작업

[동적효과 svg 만드는 사이트]   :      https://www.svgator.com/

SVGator: Free SVG Animation Creator Online - No Coding

※ 무료 버전은 1계정 당 오브젝트 3개까지만 생성 가능하고 3번까지만 저장이 가능합니다.

※ 임시 이메일 생성 사이트(https://temp-mail.org/ko/)를 이용해서 필요한 만큼 계정을 만드세요.

 

[동적효과 svg 만드는 법]

1. 일러스트 파일에서 여백 없이 영역을 잡아주고, 움직일 부분을 그룹으로 묶고 네이밍해서 미리 정리해주세요. (레이어 정리)

2.동적효과를 넣을 ai 파일을 다른이름으로 저장 -> SVG로 저장합니다.(저장할 때 뜨는 옵션은 무시하고 확인)

3. SVG 사이트에서 파일 불러오기 > 애니메이션 효과 적용

4. svg 파일 내의 <script>태그 안, 제일 위에 익스플로러 작동 오류 관련 스크립트를 추가합니다.

[익스플로러 작동 오류 관련 추가 스크립트] (파란 하이라이트 부분 IE11 지원용)

 Number.isInteger = Number.isInteger || function(value) {

  return typeof value === 'number' && 

  isFinite(value) && 

  Math.floor(value) === value;

};

Number.EPSILON = Number.EPSILON || 2.220446049250313080847263336182E-16;

 

5. [웹에 SVG 사용하기]

※ svg는 그룹태그인 g태그를 이용하여 감싸줍니다. 새로운 svg나 이미지를 추가할 때도 위와 같이 g태그로 감싸서 추가하세요

※ 위와 같이 transform 속성의 matrix를 사용해 svg 위치와 크기를 잡아줍니다. 

※ 아래에 있는 g태그일수록 위로 쌓이는 형태입니다. (.floor가 .left_top 아래에 깔려 있는 형태)

※ 모바일용 파일을 svgator에서 새로 Export 해서 넣어주세요.

<svg>
    <g class="all_svg_group" transform="matrix(0.83,0,0,0.83,167,150)">   // width, height 값 조정

        <g class="floor" transform="matrix(0.936,0,0,0.936,56,30)">   // 이미지 영역

            <image width="1920" height="1080" xlink:href="/resources/img/svg/floor.png"></image>

        </g>

        <g class="left_top" transform="matrix(0.48,0,0,0.48,182,-152)">

             <image width="1920" height="1080" xlink:href="/resources/img/svg/floor.png"></image>

        </g>
    </g>

</svg>

 

 

[SVGator 튜토리얼]  https://www.svgator.com/tutorials