애니메이션 SVG 수출

2 min read

웹 embedding 및 확장 가능한 그래픽을위한 SVG 파일로 애니메이션을 내보내십시오.

SVG를 사용할 때

SVGs는 때 이상적입니다:

웹 사이트의 Embedding 애니메이션
무한 확장성
작은 파일 크기는 중요합니다
편집 가능한 벡터 출력이 필요합니다

SVG로 수출

을 클릭합니다 수출 헤더에
애니메이션 SVG
수출
파일 다운로드 즉시

애니메이션 지원

완전 지원 ✅

한국어	SVG 산출
제품정보	사이트맵
제품정보	사이트맵
이름 *	사이트맵
이름 *	사이트맵
뚱 베어	사이트맵
기타 제품	사이트맵
Rise 소개	사이트맵

지원되지 않음 ❌

제품 정보	레아슨
회사 소개	자주 묻는 질문
효과 (Sparkle, 폭발)	프레임 기반 애니메이션
패턴 교체	onFrame 기반
복합 키프레임	제한 SMIL 지원

사이트맵

Browser 지원 : SVG 애니메이션은 Chrome, Firefox, Safari 및 Edge에서 지원되는 SMIL를 사용합니다. 몇몇 오래된 브라우저는 정체되는 SVG를 보여줄지도 모릅니다.

사이트맵

웹 사이트에 Embedding

직접 Embed

<img src="animation.svg" alt="Animated graphic">

인라인 SVG

더 많은 통제를 위해, 직접 풀 SVG 부호:

<svg viewBox="0 0 800 600">
  <!-- SVG content -->
</svg>

CSS 배경

.element {
  background-image: url('animation.svg');
}

수출 후에 주문화

SVG 파일은 편집 가능한 XML입니다. 당신은 할 수 있습니다:

텍스트 편집기에서 열기
색상 변경, 크기, 타이밍
CSS 스타일링 추가
Embed 사용자 정의 JavaScript

수출되는 것

제품정보	수출된 것과 같이
이름 *	`<text>` 요소
연락처	`<path>`, `<circle>` 등.
이름 *	`<rect>` 와 채우기
한국어	SMIL `<animate>` 태그

파일 크기

SVG 파일은 일반적으로 매우 작습니다 :

간단한 애니메이션: 2-10 KB
복잡한 장면: 20-50 KB
GIF 또는 MP4 보다는 훨씬 작습니다

제품 정보

사이트맵

SVG 팁 :

SVG를 사용하여 웹에 대한 품질이 중요한 곳
효과 및 typewriter 애니메이션 방지
대상 브라우저에서 테스트
SVGs는 embedding 후에 CSS로 작풍될 수 있습니다

사이트맵

지원되지 않은 애니메이션을위한 Fallback

당신의 디자인은 unsupported 특징을 이용합니다:

애니메이션 버전 MP4 또는 GIF로 내보내기
정체되는 fallback를 위한 PNG로 수출하십시오
진보적인 증진을 위한 <picture> 성분을 사용하십시오