SVG 예제
- 이전 페이지 SVG 원형 변화
- 다음 페이지 SVG 참조 가이드
예제를 직접 시험해 보세요
아래의 예제는 SVG 코드를 직접 HTML 코드에 삽입합니다.
Firefox, Internet Explorer 9, Google Chrome, Opera, Safari 모두 이렇게 지원합니다.
SVG 예제
SVG 기본 모양
- 원
- 장方形
- 불투명한 사각형
- 불투명도가 2인 사각형
- 끝이 둥글은 사각형
- 원
- 세 개의 원이 서로 겹치는 것
- 두 개의 원
- 선
- 세 가지 꼭짓점을 가진 다각형
- 네 가지 꼭짓점을 가진 다각형
- 별
- 또 다른 별
- 곡선
- 또 다른 곡선
- 경로
- 이차 베塞尔 곡선
- 문장을 쓰기
- 텍스트 회전
- 다중 행 텍스트
- 링크된 텍스트
- 선, 텍스트 또는 경계선의 색상 정의 (stroke)
- 선, 텍스트 또는 경계선의 너비 정의 (stroke-width)
- 다른 종류의 개방형 경로의 끝 정의 (stroke-linecap)
- 점선 (stroke-dasharray) 정의
SVG 필터
- feGaussianBlur - 흐림 효과
- feOffset - 사각형을 변위하고 원래 이미지를 변위 이미지의 위에 복합
- feOffset - 흐림을 가진 이미지의 변위
- feOffset - 그림자를 검은색으로 만들기
- feOffset - 일정한 색상으로 그림자 처리
- feBlend 필터
- 필터 1
- 필터 2
- 필터 3
- 필터 4
- 필터 5
- 필터 6
SVG 연달아 변하는 색상
- 노랑에서 붉은색으로 수평 선형 연달아 변하는 원
- 노랑에서 붉은색으로 수직 선형 연달아 변하는 원
- 노랑에서 붉은색으로 수평 선형 연달아 변하는 원과 텍스트
- 백색에서兰색으로 방사형 연달아 변하는 원
- 백색에서兰색으로 방사형 연달아 변하는 원
SVG 다양한 항목
- 이전 페이지 SVG 원형 변화
- 다음 페이지 SVG 참조 가이드
