SVG
SVG(SVG) 위젯은 크기를 키우거나 줄여도 품질이 깨지지 않는 벡터 그래픽(SVG)을 화면에 표시하는 위젯입니다.
아이콘·로고·일러스트처럼 어떤 크기에서도 선명함이 중요한 이미지에 사용합니다.
정의 / 역할
SVG 위젯은 asset·네트워크·파일·문자열 등 다양한 소스의 SVG를 불러와 그려줍니다. SVG 전체에 색을 덧입히거나(color), 영역에 맞추는 방식(fit)·정렬을 조정할 수 있고, 애니메이션 SVG는 재생·일시정지·정지로 제어할 수 있습니다. 소스가 비어 있거나 찾지 못하면 자리표시자 이미지를 대신 표시합니다.
- 카테고리: Contents
- 기본 상태: 소스가 비어 있으면 자리표시자(placeholder) 이미지 표시
기능
| 기능 | 설명 |
|---|---|
| 벡터 렌더링 | 크기와 무관하게 선명하게 표시됩니다. 확대·축소해도 품질이 깨지지 않습니다. |
| 소스 로드 | asset·네트워크·파일·문자열 등에서 SVG를 불러옵니다. |
| 색 덧입힘 | color와 colorBlendMode로 SVG 전체에 색을 입힙니다. |
| 맞춤·정렬 | fit·alignment로 영역 안에서 배치되는 방식을 조정합니다. |
| 애니메이션 | animated를 켜면 애니메이션 SVG를 재생하며, repeat로 반복 여부를 지정합니다. |
| 자리표시자 | 소스가 없거나 로드에 실패하면 placeholder 이미지를 표시합니다. |
사용 방법
- 왼쪽 위젯 팔레트에서 Contents 카테고리를 엽니다.
- SVG 항목을 캔버스로 끌어다 놓습니다.
- 오른쪽 속성 패널에서 표시할 SVG 소스를 지정합니다.
- 필요하면 색(
color)·맞춤(fit)·크기(Size)를 조정합니다. - 애니메이션 SVG라면
animated를 켜고repeat로 반복 여부를 정합니다.
속성 (Property)
| 속성 | 설명 | 기본값 | 값 / 타입 |
|---|---|---|---|
svgLoader | 표시할 SVG 소스(asset·네트워크·파일·문자열 등) | 빈 소스 | SVG 로더 |
placeholder | 소스가 없을 때 표시할 대체 이미지 이름 | 미지정 | 문자열(asset 이름) |
Size | 위젯 크기 - 너비·높이 (펼치면 width·height) | 미지정 | 숫자(px) |
fit | 영역 안에서 SVG를 맞추는 방식 | contain | fill·contain·cover·fitWidth·fitHeight·none·scaleDown |
alignment | 영역 안 정렬 | 가운데(center) | 정렬 값 |
matchTextDirection | 텍스트 방향(RTL)에 맞춰 좌우 반전 | false | 참/거짓 |
allowDrawingOutsideViewBox | viewBox 밖 영역까지 그리기 허용 | false | 참/거짓 |
color | SVG에 덧입힐 색(틴트) | 미지정 | 색상 |
colorBlendMode | color를 SVG에 합성하는 방식 | srcIn | 블렌드 모드 |
semanticsLabel | 접근성(스크린리더) 라벨 | 미지정 | 문자열 |
excludeFromSemantics | 접근성 트리에서 제외 | false | 참/거짓 |
clipBehavior | 영역 밖 클리핑 방식 | hardEdge | none·hardEdge·antiAlias·antiAliasWithSaveLayer |
cacheColorFilter | 색 필터 캐싱 여부 | false | 참/거짓 |
animated | 애니메이션 SVG 재생 여부 | false | 참/거짓 |
repeat | 애니메이션 반복 여부 (animated가 켜져 있을 때) | true | 참/거짓 |
주의 / 팁
팁
animated는 작성 시점에 정하는 값입니다. 켜져 있을 때만 애니메이션 SVG를 재생하며, 정적 SVG는 꺼 두면 별도 렌더링 비용이 들지 않습니다.
노트
소스가 비어 있거나 asset을 찾지 못하면 지정한 placeholder 이미지(없으면 기본 자리표시자)가 대신 표시됩니다.
더 알아보기
팁
이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 SVG (SVG) Widget Control 문서에서 확인하세요.