SVG 예제
온라인 예
다음의 예는 직접 HTML 코드에 포함 된 SVG 코드입니다.
구글 크롬, 파이어 폭스, 인터넷 Explorer9 및 Safari가 지원됩니다.
참고 : 심지어 오페라 지원 SVG 경우 다음의 예는, 오페라에서 실행되지 않습니다 - 그것은 HTML 코드에서 직접 SVG를 지원하지 않습니다.
SVG 예제
SVG 기본 도형
원
구형
불투명 한 사각형
직사각형 불투명 2
모서리가 둥근 사각형
타원형
그리고 세 개의 타원에 heaped
두 타원
라인
삼각형
사변형
스타
또 다른 스타
깨진 라인
또 다른 폴리 라인
통로
이차 베 지어 곡선
텍스트 쓰기
회전 텍스트
경로의 텍스트
텍스트의 몇 줄
텍스트 링크
선, 텍스트 또는 개요 색상을 정의 (스토크)
선폭, 문자 나 윤곽 (스트로크 폭)을 정의
스트로크 linecap 속성은 다른 유형의 열린 경로의 끝을 정의한다 :
점선의 정의 (스트로크 dasharray)
SVG 필터
feGaussianBlur - 흐림
feOffset - 혼합 오프셋 이미지의 상단 다음 사각형에 의해 상쇄하고,
feOffset - 블러 오프셋 이미지
feOffset - 그림자 검은 있도록
feOffset - 코팅 색상 음영
필터의 feBlend
필터의 feColorMatrix
필터 feComponentTransfer
feOffset, feFlood, feComposite, feMerge 및 feMergeNode
필터의 feMorphology
필터 1
필터 2
필터 (3)
필터 (4)
필터 (5)
필터 (6)
SVG 그라데이션
붉은 타원형 노란색에서 수평 선형 그라데이션
붉은 타원형 노란색에서 수직 선형 그라데이션
텍스트 내에서 빨간색 타원형 노란색에서 수평 선형 그라데이션을 추가
파란색 타원형 흰색에서 방사형 그라데이션
또 다른 파란 타원형 흰색에서 방사형 그라데이션
SVG 기타
오초는 사각형을 페이드로 반복
직사각형의 색상 변화가 커진다
그것은 세 개의 직사각형의 색깔을 바꾼다
경로 이동 텍스트를 따라 모션
모션 경로 이동을 따라, 회전 및 크기 조절 텍스트
모션 경로 이동을 따라, 회전 및 크기 조절 텍스트 + 점차적으로 확대 및 변경 색상 사각형