HTML5 인라인 SVG
SVG란 무엇입니까?
SVG는 Scalable Vector Graphics를 나타냅니다.
SVG는 웹용 벡터 기반 그래픽을 정의하는 데 사용됩니다.
SVG는 XML 형식 정의 그래픽을 사용합니다
SVG 이미지는 확대하거나 크기를 변경해도 그래픽 품질을 잃지 않습니다
SVG는 World Wide Web Consortium의 표준입니다
SVG를 사용하면 많은 그리기 작업을 수행할 수 있습니다. Canvas API 유형과 동일하지만 Canvas 요소에 텍스트를 그릴 때 문자는 픽셀 단위로 고정됩니다. 텍스트는 이미지의 일부가 되며 캔버스 그리기 영역을 다시 그리지 않으면 텍스트 내용을 변경할 수 없습니다. 이로 인해 Canvas의 텍스트는 검색 엔진에서 검색할 수 없지만 SVG의 텍스트는 검색 가능합니다. 예를 들어 Google은 웹에 있는 SVG 콘텐츠의 텍스트에 대한 색인을 생성합니다.
SVG의 장점
다른 이미지 형식(예: JPEG, GIF)과 비교할 때 SVG 사용의 장점은 다음과 같습니다.
SVG 이미지는 텍스트 편집기로 생성 및 수정 가능
SVG 이미지는 검색, 색인화, 스크립팅 또는 압축 가능
SVG는 확장 가능
SVG 이미지는 가능 모든 해상도에서 고품질로 인쇄
이미지 품질 저하 없이 SVG를 확대할 수 있습니다
페이지에 SVG 추가
인라인 모드: 다른 모드처럼 사용 HTML, JavaScript 및 SVG의 대화형 응용 프로그램을 작성할 수 있는 HTML의 요소입니다.
<body> <svg width="200" height="200"> </svg> </body>
아웃바운드 방법: <img> 요소를 통해 HTML의 외부 SVG 파일을 가져옵니다. 단점은 SVG 요소와 상호 작용하는 스크립트를 작성할 수 없다는 것입니다.
<img src="example.svg" />
간단한 모양
SVG에는 다음과 같은 기본 모양 요소가 포함되어 있습니다. 직사각형, 원 및 타원. 모양 요소의 크기와 위치는 속성으로 정의됩니다. 직사각형의 속성은 너비와 높이입니다. 원에는 반경을 나타내는 r 속성이 있습니다. 그들은 모두 CSS 구문을 사용하여 거리를 표현하므로 단위에는 px, point, em 등이 포함됩니다.
직사각형: x="50" y="20"은 직사각형의 시작점이 (50,20)임을 의미합니다.
<body> <svg width="200" height="200"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> </svg> </body>
SVG 그리기 전환 개체는 나타나는 순서대로 수행됩니다. 개체 문서. 직사각형을 그린 후 원을 그리면 직사각형 위에 원이 나타납니다.
원 추가:
<body> <svg width="200" height="200"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"> </rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </svg> </body>
SVG 요소 변환
SVG에서는 여러 요소를 결합하여 그룹을 형성하고 전체가 될 수 있습니다.
<g> 요소는 "그룹"을 나타내며 여러 관련 요소를 결합하는 데 사용할 수 있습니다. 그룹 구성원은 ID로 참조할 수 있습니다. 또한 그룹 전체를 변형할 수도 있습니다. 그룹에 변환 속성을 추가하면 그룹의 모든 콘텐츠가 변환됩니다. 변형 속성에는 회전, 변형, 크기 조정 및 베벨링이 포함됩니다.
<svg width="200" height="200"> <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </g> </svg>
콘텐츠 재사용
SVG의 <defs> 요소는 향후 사용을 위해 예약된 콘텐츠를 정의하는 데 사용됩니다. <use> 요소를 사용하여 <defs>에 의해 정의된 콘텐츠를 표시해야 하는 위치에 연결할 수 있습니다. 이 두 가지 요소를 사용하면 동일한 콘텐츠를 여러 번 재사용하고 중복성을 제거할 수 있습니다.
<svg width="200" height="200"> <defs> <g id="ShapeGroup"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </g> </defs> <use xlink:href="#ShapeGroup" transform="translate(60,0) scale(0.4)"></use> <use xlink:href="#ShapeGroup" transform="translate(120,80) scale(0.75)"></use> <use xlink:href="#ShapeGroup" transform="translate(20,60) scale(0.25)"></use> </svg>
패턴 및 그라데이션
<svg> <defs> <pattern id="GravelPattern" patternContentUnits="userSpaceOnUse" x="0" y="0" width="100" height="67" viewBox="0 0 100 67"> <image x="0" y="0" width="100" height="67" xlink:href="gravel.jpg" /> </pattern> <%--渐变--%> <linearGradient id="RedBlackGradient"> <stop offset="0%" stop-color="#000"></stop> <stop offset="100%" stop-color="#f00"></stop> </linearGradient> </defs> <rect x="0" y="20" width="100" height="80" stroke="red" fill="url(#RedBlackGradient)" /> <circle cx="120" cy="80" r="40" stroke="#00f" stroke-width="8" fill="url(#GravelPattern)" /> </svg>
Path
<path> 경로를 정의합니다.
<path> 태그
<path> 태그는 경로를 정의하는 데 사용됩니다.
경로 데이터에는 다음 명령을 사용할 수 있습니다.
M = moveto
L = lineto
H = horizon lineto
V = 수직선to
C = 곡선to
S = 부드러운 곡선to
Q = 2차 벨지어 곡선
T = 부드러운 2차 벨지어 곡선
A = 타원형 호
Z = closepath
참고: 위의 모든 명령은 소문자를 허용합니다. 대문자는 절대 위치를 의미하고, 소문자는 상대 위치를 의미합니다.
SVG에는 단순한 모양과 자유 형식 경로가 포함되어 있습니다. path 요소에는 경로 데이터를 나타내는 d 속성이 있습니다. d 값에서 M은 Move to, L은 Line to, Q는 2차 곡선, Z는 닫힌 경로를 나타냅니다.
<svg width="200" height="200"> <path d="M25,50 L10,80 L20,80 L5,110,L15,110,L20,80 Z" /> </svg>
텍스트
SVG의 텍스트는 CSS의 스타일 정의와 약간 다릅니다
<svg width="200" height="200"> <text x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#00f" font-size="40px" font-weight="bold">Hello SVG</text> </svg>
두 SVG 모두
SVG는 XML을 사용해 2D 그래픽을 기술하는 언어입니다.
Canvas는 JavaScript를 사용하여 2D 그래픽을 그립니다.
SVG는 XML을 기반으로 하며 이는 SVG DOM의 모든 요소를 사용할 수 있음을 의미합니다. JavaScript 이벤트 핸들러를 요소에 연결할 수 있습니다.
SVG에서는 그려진 모든 모양이 객체로 간주됩니다. SVG 객체의 속성이 변경되면 브라우저는 자동으로 그래픽을 재현할 수 있습니다.
캔버스는 픽셀 단위로 렌더링됩니다. 캔버스에서는 그래픽이 그려지면 더 이상 브라우저의 관심을 끌 수 없습니다. 위치가 변경되면 그래픽으로 가려졌을 수 있는 개체를 포함하여 전체 장면을 다시 그려야 합니다.
