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 요소와 상호 작용하는 스크립트를 작성할 수 없다는 것입니다.

간단한 모양

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 객체의 속성이 변경되면 브라우저는 자동으로 그래픽을 재현할 수 있습니다.

캔버스는 픽셀 단위로 렌더링됩니다. 캔버스에서는 그래픽이 그려지면 더 이상 브라우저의 관심을 끌 수 없습니다. 위치가 변경되면 그래픽으로 가려졌을 수 있는 개체를 포함하여 전체 장면을 다시 그려야 합니다.

지속적인 학습