본문으로 바로가기

SVG를 GIF로 변환

SVG를 어디서나 보이는 GIF로 바꾸세요. 움직이는 SVG는 CSS든 SMIL이든 움직임을 그대로 유지하고, 정지 SVG는 선명한 GIF가 됩니다. 크기, 길이, 초당 프레임 수를 고르고 다운로드하세요. 무료, 브라우저에서.

선택한 파일

변환할 SVG를 여기에 놓으세요

움직이는 SVG 또는 정지 SVG

안심하고 작업하세요

  • 기기에서 직접 처리

    처리 가능한 크기와 시간은 기기 메모리, 브라우저 및 도구별 제한에 따라 달라집니다.

  • 파일 업로드 없음

    브라우저에서 처리하므로 사진과 문서를 서버에 보내지 않습니다.

  • 회원가입 없음

    계정이나 이메일 입력 없이 도구를 열어 사용하세요.

SVG는 웹에서 아이콘, 로고, 선 애니메이션에 가장 좋은 형식이지만 세상 대부분은 SVG를 보여 주지 못합니다. 메일 프로그램, 메신저, 프레젠테이션, 커뮤니티, SNS는 GIF나 동영상을 원합니다.

이 SVG GIF 변환 도구는 SVG를 브라우저와 똑같이 재생하면서 프레임 단위로 녹화합니다. 로딩 스피너, 로고 애니메이션, 아이콘, 일러스트는 움직임을 유지하고, 길이를 애니메이션 1회 반복에 맞추면 GIF가 끊김 없이 반복됩니다. SVG는 브라우저의 안전한 이미지 모드로 열리며 업로드되지 않습니다.

SVG를 GIF로 변환하는 법

  1. SVG 추가

    .svg 파일을 위 상자에 놓거나 선택하세요. 미리보기에서 재생이 시작되고, 애니메이션 여부와 1회 반복 길이가 표시됩니다.

  2. 크기와 길이 고르기

    너비를 고르면 높이는 SVG 비율을 따릅니다. 길이는 애니메이션 1회 반복에 맞춰지므로 GIF가 끊김 없이 반복됩니다.

  3. 초당 프레임 수와 배경 정하기

    초당 20프레임이면 대부분의 애니메이션이 부드럽습니다. 배경은 투명으로 두거나, 투명을 잘 표시하지 못하는 앱이라면 흰색이나 검은색을 고르세요.

  4. 변환하고 다운로드

    GIF로 변환을 누르세요. 애니메이션은 실시간으로 녹화되므로 3초짜리 SVG는 3초가 걸리고, 그다음 인코딩됩니다. 끝날 때까지 탭을 열어 두세요.

움직이는 SVG를 GIF로 변환하기

SVG가 움직이는 방법은 두 가지입니다. 파일 안의 <animate>, <animateTransform> 같은 SMIL 요소, 또는 <style> 안의 CSS @keyframes 애니메이션입니다. 브라우저가 직접 재생하므로 둘 다 브라우저에서와 똑같이 동작하고, GIF에는 미리보기에서 보이는 그대로 녹화됩니다.

깔끔하게 반복되는 GIF를 만들려면 정확히 1회 반복만큼 녹화해야 합니다. 이 도구는 SVG에 적힌 길이를 읽어 자동으로 설정합니다. 길이가 다른 여러 반복이 섞여 있다면 최대 10초까지 그 공배수를 씁니다.

스크립트, 마우스 오버, 클릭에 반응하는 움직임은 이미지 안에서 재생되지 않으므로 녹화할 수 없습니다. 저절로 시작되는 애니메이션, 즉 대부분의 움직이는 아이콘, 스피너, 로고는 됩니다.

크기, 초당 프레임 수, 용량

SVG에는 고정 해상도가 없어서 고른 너비로 선명하게 그려집니다. 확대로 인한 흐림이 없습니다. 용량은 너비와 프레임 수에 따라 커지므로 GIF가 실제로 보일 가장 작은 크기를 고르세요.

느리고 단순한 움직임은 초당 10프레임이면 충분하고, 아이콘과 스피너는 대부분 20이면 부드러우며, 빠른 움직임은 25가 좋습니다. 단색 벡터 그래픽은 GIF로 압축이 잘 되고 움직이지 않는 부분은 한 번만 저장됩니다. 그래도 크다면 GIF 압축으로 정확한 크기에 맞추세요. 커스텀 이모지로 쓰려면 GIF 이모지 만들기가 디스코드, 슬랙, 트위치 제한에 맞춰 줍니다.

투명 배경

SVG는 대개 배경이 투명하고 GIF도 투명할 수 있습니다. 다만 GIF의 투명은 픽셀마다 전부 아니면 전무라서 벡터 도형의 부드러운 가장자리가 또렷하고 살짝 계단 모양이 됩니다. 특히 어두운 배경에서 눈에 띕니다.

GIF가 어디에 쓰일지 안다면 그 색을 배경으로 고르세요. 대부분의 메일과 문서는 흰색, 다크 모드 채팅은 검은색입니다. 그러면 가장자리가 완전히 매끈하게 유지됩니다.

처음부터 안전하게

SVG는 스크립트와 다른 파일 링크를 담을 수 있는 문서입니다. 여기서는 이미지로 열립니다. 브라우저가 <img> 태그 안의 SVG에 쓰는 것과 같은 엄격한 모드라서 스크립트는 절대 실행되지 않고 파일 밖에서 아무것도 불러오지 않습니다. 그래서 SVG가 다른 사이트에서 불러오는 글꼴과 이미지는 나타나지 않고, 파일에 포함된 것은 나타납니다.

아무것도 업로드되지 않습니다. 녹화와 인코딩 모두 브라우저에서 이루어집니다.

자주 쓰는 SVG 애니메이션별 설정

시작하기 좋은 값입니다. 미리보기는 녹화될 모습 그대로 SVG를 재생합니다.

SVG너비초당 프레임 수배경
로딩 스피너240–320 px20–25페이지와 같게
움직이는 아이콘240 px20투명 또는 흰색
이메일용 로고 애니메이션480–640 px20흰색
일러스트·배너640–800 px10–20원래 배경
차트·데이터 애니메이션640 px10흰색

SVG 애니메이션을 GIF로 바꾸는 이유

  • 이메일 뉴스레터

    대부분의 메일 프로그램은 SVG를, 하물며 SVG 애니메이션은 지원하지 않습니다. GIF는 거의 어디서나 보입니다.

  • 프레젠테이션과 문서

    파워포인트, 키노트, 구글 슬라이드와 여러 문서 도구는 SVG 애니메이션이 안 되는 곳에서도 GIF를 재생합니다.

  • 채팅과 SNS

    움직이는 로고나 아이콘을 슬랙, 디스코드, 카카오톡, SNS에 공유하세요.

  • 디자인 전달과 미리보기

    이미지만 보여 주는 도구에서 클라이언트와 동료에게 움직임을 보여 주세요.

  • README와 문서

    SVG 애니메이션을 지워 버리는 문서 사이트와 저장소에서도 움직이는 다이어그램과 데모를.

  • 스티커와 이모지

    벡터 이모지와 스티커를 GIF로 바꾼 뒤 채팅 앱의 용량 제한에 맞추세요.

자주 묻는 질문

SVG의 애니메이션이 유지되나요?
네. CSS와 SMIL 애니메이션이 재생되어 GIF에 녹화됩니다. 스크립트나 마우스 오버, 클릭으로 동작하는 움직임만 담을 수 없습니다.
정지 SVG도 GIF로 바꿀 수 있나요?
네. 정지 SVG는 고른 너비로 벡터에서 선명하게 그린 1프레임 GIF가 됩니다.
변환에 애니메이션 길이만큼 시간이 걸리는 이유는?
브라우저가 재생하는 그대로 녹화하기 때문입니다. 5초짜리 SVG는 녹화에 5초, 인코딩에 잠깐이 더 걸립니다.
탭을 바꿨더니 녹화가 멈춘 이유는?
브라우저는 보고 있지 않은 탭의 애니메이션을 일시정지하는데, 그러면 GIF에 빈틈이 생깁니다. 끝날 때까지 탭을 보이게 두세요.
GIF가 끊김 없이 반복되게 하려면?
길이를 정확히 애니메이션 1회 반복에 맞추세요. SVG에 길이 정보가 있으면 도구가 자동으로 맞춥니다.
SVG가 업로드되나요?
아니요. 재생, 녹화, 인코딩 모두 내 기기의 브라우저에서 이루어집니다.
일부 글꼴이나 이미지가 빠진 이유는?
안전을 위해 SVG를 이미지로 열기 때문에 다른 사이트의 글꼴이나 이미지는 불러오지 않습니다. 변환 전에 글자를 패스로 바꾸거나 이미지를 SVG에 포함하세요.
Lottie나 JSON 애니메이션도 변환되나요?
바로는 안 됩니다. Lottie 파일은 SVG가 아니라 JSON입니다. 먼저 SVG로 내보내거나 동영상으로 녹화하세요.

함께 쓰면 좋은 도구

이미지 도구 전체