UltKit

SVG GIF 변환

SVG를 원하는 너비의 GIF 이미지로 그려, GIF는 받지만 벡터 파일은 표시하지 못하는 곳에 쓸 수 있게 합니다. 결과물은 최대 256색 팔레트의 정지 이미지이며, SVG에서 아무것도 그려지지 않은 부분은 투명하게 남습니다.

이미지 변환

또는 JPG, JPEG, JPE … 파일을 여기에 끌어다 놓으세요 ·

파일당 최대 95 MB· 최대 20개 파일· 30분 뒤 삭제

출력

파일은 UltKit 서버에서 처리되며 30분 뒤 삭제됩니다.

사용 방법

  1. 1

    SVG 파일 업로드

    컴퓨터에서 고르거나 업로드 영역에 끌어다 놓아 .svg 파일을 최대 20개, 파일당 95 MB까지 추가하십시오.

  2. 2

    픽셀 너비 지정

    이 페이지는 벡터를 600 px 너비로 그립니다. 고급 설정의 출력 이미지 크기 조절에서 숫자를 바꾸십시오. 높이는 그림의 비율에 맞춰 정해집니다.

  3. 3

    GIF로 변환

    GIF로 변환을 누르고 이미지를 하나씩 내려받거나 전체를 ZIP으로 받으십시오. 사용하기 전에 실제로 놓일 배경 위에서 파일 하나를 확인해 보십시오.

SVG를 GIF로 변환하면 해상도에 구애받지 않는 그림이 최대 256색의 고정된 픽셀 격자로 바뀝니다. 단색 로고와 아이콘에는 괜찮지만 그라데이션에는 잘 맞지 않습니다.

필요한 너비로 SVG GIF 변환하기

SVG는 명령의 모음입니다. 이 경로를 그리고, 이 색으로 채우고, 이 텍스트를 배치하라는 식입니다. GIF는 정반대로, 각 픽셀이 최대 256개의 팔레트 항목 중 하나를 가리키는 픽셀 격자입니다. 변환이란 이 명령을 정해진 픽셀 너비로 한 번 그려 결과를 저장하는 것이므로, 여기서는 출력 이미지 크기 조절의 너비가 다른 어떤 설정보다 중요합니다. 이 페이지는 600 px에서 시작합니다.

GIF는 1987년 CompuServe가 발표한 형식이며, 1989년 개정판인 GIF89a에서 투명도와 프레임 지연이 추가되었습니다. 오늘날에는 이 오랜 역사가 가장 큰 장점입니다. 오래된 포럼 엔진부터 일부 메일 클라이언트와 광고 네트워크까지, 새 형식을 거부하는 소프트웨어도 GIF는 여전히 표시합니다. 반면 SVG는 스크립트를 담을 수 있는 XML이라는 이유로 많은 업로드 양식에서 차단됩니다.

원본이 벡터이므로 어떤 너비로 그려도 선명도가 떨어지지 않습니다. GIF가 실제로 표시될 크기를 고르십시오. 작은 GIF를 나중에 확대하면 SVG에는 없던 흐릿함이 다시 생깁니다.

from ↓ · to →투명 배경부드러운 반투명 가장자리256색 초과애니메이션
GIFGIF to 투명 배경: yes– GIF to 부드러운 반투명 가장자리: no– GIF to 256색 초과: noGIF to 애니메이션: yes
PNGPNG to 투명 배경: yesPNG to 부드러운 반투명 가장자리: yesPNG to 256색 초과: yes– PNG to 애니메이션: no
WEBPWEBP to 투명 배경: yesWEBP to 부드러운 반투명 가장자리: yesWEBP to 256색 초과: yesWEBP to 애니메이션: yes
JPG– JPG to 투명 배경: no– JPG to 부드러운 반투명 가장자리: noJPG to 256색 초과: yes– JPG to 애니메이션: no
supported not offeredSVG를 그려 넣은 뒤 각 래스터 형식이 담을 수 있는 요소입니다. 256색 팔레트와 켜짐/꺼짐 투명도로 제한되는 것은 GIF뿐입니다.

SVG

SVG 벡터 그래픽(Scalable Vector Graphics)

SVG는 2001년 W3C가 표준화한 XML 기반 벡터 형식입니다. 픽셀 대신 도형, 패스, 텍스트를 기술하므로 어떤 크기에서도 선명하고, 로고와 아이콘은 보통 용량이 아주 작습니다. 투명도, CSS 스타일, 스크립트, 애니메이션을 지원하며 모든 브라우저가 기본으로 렌더링합니다. SVG는 사진에는 맞지 않고, 복잡한 일러스트는 렌더링이 느려질 수 있습니다. Illustrator, Inkscape, Figma와 브라우저에서 열고 편집할 수 있습니다.

압축 방식
–
투명도
예
애니메이션
예
도입 연도
2001 · W3C
SVG 변환

GIF

그래픽 교환 형식(GIF)

GIF는 1987년 CompuServe가 도입한 형식으로, 지금도 짧게 반복되는 애니메이션을 가장 폭넓게 지원하는 형식입니다. 무손실이지만 프레임마다 256색 팔레트로 제한되어 사진과 그라데이션에서 계단 현상과 디더링이 보입니다. 투명도는 켜고 끄는(1비트) 방식만 지원해 곡선 가장자리가 들쭉날쭉해집니다. 움직이는 GIF는 같은 영상을 MP4나 WebP로 만든 것보다 훨씬 큰 경우가 많습니다. 모든 브라우저, 채팅 앱, SNS 플랫폼에서 GIF가 재생됩니다.

압축 방식
무손실
투명도
예
애니메이션
예
도입 연도
1987 · CompuServe
GIF 변환

SVG를 GIF로 변환하는 것은 이메일 서명, 오래된 포럼, 광고 슬롯처럼 GIF밖에 받지 않아 벡터 로고의 작은 단색 이미지가 필요한 곳 때문입니다. 반대로 GIF를 SVG로 바꾸는 것은 확대 가능한 그림을 되찾기 위한 트레이싱 작업입니다.

움직이는 SVG GIF 변환: 변환되지 않는 것

SMIL, CSS, 스크립트 애니메이션은 제외됩니다

animate 요소, CSS 키프레임, JavaScript로 브라우저에서 움직이는 SVG는 시작 상태를 보여 주는 정지 GIF 프레임 하나가 됩니다. 움직이는 GIF가 필요하다면 애니메이션을 동영상으로 녹화한 뒤 동영상 GIF 변환 도구로 변환하십시오.

256색과 1비트 투명도의 실제 영향

대부분의 SVG 로고는 몇 가지 단색만 쓰므로 팔레트 제한으로 잃는 것이 없습니다. 문제가 되는 곳은 안티앨리어싱된 가장자리와 그라데이션입니다. 렌더링된 SVG의 곡선 가장자리에는 모두 부분적으로 투명한 중간 픽셀이 있는데, GIF는 이 픽셀을 완전히 보이거나 완전히 투명하게 만들어야 하므로 윤곽이 계단처럼 보이거나 옅은 테두리가 남을 수 있습니다.

해결책은 변환하기 전에 배경을 정하는 것입니다. GIF가 흰색 이메일 본문에 놓인다면 SVG에 흰색 배경 사각형을 넣고, 어두운 포럼 테마라면 그 테마의 색을 쓰십시오. 그러면 가장자리 픽셀이 알맞은 색과 섞여 윤곽이 매끄럽게 유지됩니다. 미리 알 수 없다면 PNG가 더 안전합니다.

SVG GIF 변환 자주 묻는 질문

SVG 로고를 PNG가 아니라 GIF로 바꾸는 이유는 무엇입니까?

오래된 CMS, 포럼 서명, 이미지 형식으로 GIF를 지정한 광고 템플릿처럼 받는 쪽이 GIF를 요구할 때만 그렇습니다. PNG는 부드러운 가장자리와 제한 없는 색상을 유지하므로, 둘 다 허용된다면 SVG PNG 변환이 더 나은 기본 선택입니다.

움직이는 SVG가 움직이는 GIF가 됩니까?

아닙니다. 변환기는 SVG를 시작 상태로 한 번만 그리므로 SMIL 애니메이션 요소, CSS 키프레임, 스크립트는 실행되지 않고 정지 프레임 하나만 나옵니다. 움직임을 담으려면 브라우저에서 재생되는 애니메이션을 동영상으로 녹화한 뒤 동영상 GIF 변환을 이용하십시오.

로고 가장자리가 들쭉날쭉하거나 밝은 테두리가 생기는 이유는 무엇입니까?

GIF의 투명도는 픽셀마다 켜짐 또는 꺼짐뿐이므로, SVG의 부드럽고 반투명한 가장자리 픽셀은 남기거나 버리거나 둘 중 하나가 되어야 합니다. 한 배경에 맞춰 섞인 가장자리는 다른 배경 위에서 테두리처럼 보입니다. 변환하기 전에 대상 페이지 색의 배경 사각형을 추가하면 가장자리가 깔끔하게 섞입니다.

SVG의 그라데이션은 어떻게 됩니까?

GIF 팔레트는 최대 256색까지만 담으므로 부드러운 그라데이션은 근사치로 표현됩니다. 짧은 그라데이션은 문제없어 보이지만, 넓고 미묘한 그라데이션은 계단 현상이나 점무늬 디더링이 나타납니다. SVG에 흔한 단색 로고와 아이콘은 팔레트 안에 쉽게 들어갑니다.

GIF를 이메일 서명에 쓸 수 있습니까?

네. 사람들이 이 변환을 찾는 주된 이유 중 하나입니다. Gmail과 Outlook은 메일 본문의 SVG 이미지를 표시하지 않지만, GIF는 수십 년 전부터 이메일 클라이언트에서 표시되어 왔습니다. 서명이 가볍도록 너비는 300–600 px 정도로 적당히 유지하십시오.

변환기는 SVG의 어떤 크기 설정을 읽습니까?

그림의 width, height, viewBox로 비율을 계산한 뒤 지정한 픽셀 너비로 그립니다. 원본이 벡터이므로 너비를 크게 해도 선명도는 떨어지지 않고 용량만 늘어납니다.