12월 11, 2022

SVG 이미지 자유자재로 확대와 축소 및 이동

Demo SVG

이미지 확대는 더블클릭이나 휠 버튼을 상하로 굴리고, 이동은 마우스로 드래그(Drag) 하면 되며, 마우스 오른쪽 버튼으로 새로고침을 하면 원래 이미지 크기로 복귀된다.
오른쪽 맨 아래의 아이콘을 이용해도 위와 같은 기능을 수행할 수 있다.

1020304050607080901020304050607080903040506070809020-10051015-5204540502035302513506070801009029374428ⓐⓑ

SVG 파일 형식

SVG(Scalable Vector Graphics)는 스케일러블 벡터 그래픽스의 약칭이다. 문자 그대로 변형 없이 이미지를 자유자재로 확대하고 축소할 수 있는 파일 형식이다.
2차원 벡터 그래픽을 표현하는 XML 기반이기 때문에 비트맵 방식의 JPG와 PNG 파일 형식과는 선명도 측면에서 확연하게 차별화되고, 무한대에 가까운 확대가 가능하므로 캐드 도면 등 복잡하고 세밀한 이미지 표현에 적합하다.
편집은 어도비 일러스트레이터와 잉크스케이프와 같은 벡터 드로잉 프로그램을 이용하거나 메모장과 같은 문서 편집기를 이용하면 된다.
현재 주요 웹 브라우즈들이 지원하고 있으나 확대와 축소 기능은 없어 SVG 이미지를 나타낼 웹페이지에 아래와 같이 간단한 스크립트(script)를 넣으면 이 페이지의 이미지처럼 자유자재의 확대하고 축소할 수 있다.

스크립트 넣기

블로그 HTML

블로그 html의 <head></head>영역 안에 아래의 스크립트를 넣는다.

<script src='https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.5.0/dist/svg-pan-zoom.min.js'/>

페이지 HTML

블로그 게시글 페이지(html 모드)에 아래의 스크립트를 넣으면 된다.

<script> // Don't use window.onLoad like this in production, because it can only listen to one function. window.onload = function() { svgPanZoom('#demo-tiger', { zoomEnabled: true, controlIconsEnabled: true, fit: true, center: true }); }; </script>

스크립트 수정

dblClickZoomEnabled: true//모바일 손가락 줌