HTML5에서 SVG를 사용하는 방법의 예

코드 최적화는 항상 프로그래머의 영원한 요구이며, PNG/JPG 및 기타 형식의 일부 이미지를 대체하기 위해 SVG 이미지를 합리적으로 사용하는 것은 프런트 엔드 최적화의 중요한 부분이므로 먼저 살펴보겠습니다. SVG 이미지의 장점은 무엇입니까?

SVG는 다양한 도구(예: 메모장)로 읽고 수정할 수 있습니다.

• SVG는 JPEG 및 GIF 이미지보다 작고 압축률이 높습니다.
• SVG는 확장 가능합니다
• SVG 이미지는 어떤 해상도에서도 고품질로 인쇄할 수 있습니다.
• 이미지 품질 저하 없이 SVG를 확대할 수 있습니다.
• SVG 이미지의 텍스트는 선택 사항이며 검색 가능합니다(지도 제작에 적합).
• SVG는 Java 기술로 실행 가능
• SVG는 개방형 표준입니다
• SVG 파일은 순수 XML입니다.

SVG 이미지의 몇 가지 작은 예:

세 번째 공유 아이콘의 코드를 살펴보겠습니다.

 <svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox=0 0 20 20> <g 스트로크=#AAB0BA fill=none fill-rule=evenodd> <path d=M10 .524 3.413v8.235 스트로크-라인 조인=라운드/> <경로 d=M13.027 7.508c.813 0 1.678-.01 1.678-.01.449 0 .812.376.812.826l-.005 6.36a.819.819 0 0 1-.811.826H6.31a.822.822 0 0 1-.811-.826l.005-6.36c0-.456.36-.825.812-.825l1.689.006M8.373 5.111l2.143-2.09 2.143 2.07/> </g></svg>

SVG를 이해하지 못하는 학생들은 이제 처음 만났을 때처럼 물음표가 떠있을 거에요. 걱정하지 마세요. 기본부터 시작해보세요.

SVG는 XML 구문을 기반으로 한 이미지 형식이며 전체 이름은 Scalable Vector Graphics입니다. 다른 이미지 형식은 픽셀 처리를 기반으로 하며 SVG는 이미지의 모양에 대한 설명이므로 기본적으로 크기가 작은 텍스트 파일이며 몇 번 확대해도 왜곡되지 않습니다. 또한 SVG는 World Wide Web Consortium의 표준으로, SVG는 DOM, XSL 등 W3C 표준과 통합되어 있습니다.

HTML5에서는 위의 작은 빨간색 하트와 같은 SVG 요소를 HTML 페이지에 직접 포함할 수 있습니다.

 <본문> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink width=20 height=20 viewBox=0 0 20 20> <defs> <Rect id=ay=54 width=60 height=25 rx=1/> <mask id=bx=0 y=0 width=60 height=25 fill=#fff> <use xlink:href=#a/> </mask> </defs> <g 변환=translate(-9 -56) fill=none fill-rule=evenodd> <use 스트로크= #EDEEEF 마스크=url(#b) 스트로크 너비=2 xlink:href=#a/> <경로 d=M19.05 62.797c-.208-.268-1.776-2.188-3.629-1.725-.662.165-1.439.44-2.009 1.463-2.18 3.913 4.965 8.983 5.615 9.433V72l.023-.016.023.016v-.032c.65-.45 7.795-5.52 5.615-9.433-.57-1.023-1.347-1.298-2.009-1.463-1.853-.463-3.42 1.457-3.629 1.725z fill=red/> </g> </svg></body>

SVG 코드는 .svg로 끝나는 파일에 작성된 다음 <img> , <object> , <embed> 및 <iframe> 과 같은 태그를 사용하여 웹 페이지에 삽입할 수도 있습니다.

 <img src=search.svg><object id=object data=search.svg type=image/svg+xml></object><embed id=embed src=search.svg type=image/svg+xml><iframe id=iframe src=search.svg></iframe>

CSS는 svg도 사용할 수 있습니다

 .logo { 배경: url(logo.svg);}

SVG 파일은 BASE64 인코딩으로 변환된 다음 웹 페이지에 데이터 URI로 기록될 수도 있습니다.

 <img src=데이터:이미지/svg+xml;base64,[데이터]>

1. <svg> 태그

SVG 코드는 최상위 태그 <svg> 에 배치됩니다. 아래는 예시입니다.

 <svg 너비=100% 높이=100%> <circle id=mycircle cx=50 cy=50 r=50 /></svg>

<svg> 의 너비 및 높이 속성은 HTML 요소에서 SVG 이미지의 너비와 높이를 지정합니다. 상대단위 외에 절대단위(단위:픽셀)도 사용할 수 있습니다. 이 두 속성을 지정하지 않으면 SVG 이미지의 기본 크기는 300픽셀(너비) x 150픽셀(높이)입니다.

SVG 이미지의 일부만 표시하려면 viewBox 속성을 지정하세요.

 <svg width=100 height=100 viewBox=50 50 50 50> <circle id=mycircle cx=50 cy=50 r=50 /></svg>

<viewBox> 속성의 값에는 왼쪽 위 모서리의 가로 좌표와 세로 좌표, 뷰포트의 너비와 높이 등 4개의 숫자가 있습니다. 위 코드에서 SVG 이미지는 너비 100픽셀 x 높이 100픽셀이고 viewBox 속성은 뷰포트가 지점(50, 50)에서 시작하도록 지정합니다. 따라서 실제로 보이는 것은 오른쪽 하단 모서리에 있는 1/4원입니다.

뷰포트는 해당 공간에 맞아야 합니다. 위 코드에서 뷰포트의 크기는 50 x 50 입니다. SVG 이미지의 크기가 100 x 100 이므로 뷰포트는 SVG 이미지의 크기에 맞게, 즉 4배로 확대됩니다. .

width 속성과 height 속성을 지정하지 않고 viewBox 속성만 지정하면 SVG 이미지의 가로세로 비율만 주는 것과 같습니다. 이 경우 SVG 이미지의 기본 크기는 포함된 HTML 요소의 크기와 같습니다.

2. <circle> 태그

<circle> 태그는 원을 나타냅니다.

 <svg 너비=300 높이=180> <circle cx=30 cy=50 r=25 /> <circle cx=90 cy=50 r=25 클래스=red /> <circle cx=150 cy=50 r=25 클래스 =멋지다 /></svg>

위의 코드는 세 개의 원을 정의합니다. <circle> 태그의 cx, cy, r 속성은 각각 가로 좌표, 세로 좌표, 반지름이며 단위는 픽셀입니다. 좌표는 <svg> 캔버스의 왼쪽 상단 모서리 원점을 기준으로 합니다.

class 속성은 해당 CSS 클래스를 지정하는 데 사용됩니다.

 .red { 채우기: 빨간색;}.fancy { 채우기: 없음; 획: 검정;

SVG의 CSS 속성은 웹 요소의 CSS 속성과 다릅니다.

채우기: 채우기 색상

획: 획 색상

스트로크 너비: 테두리 너비

3. <line> 태그

<line> 태그는 직선을 그리는 데 사용됩니다.

 <svg 너비=300 높이=180> <line x1=0 y1=0 x2=200 y2=0 스타일=스트로크:rgb(0,0,0);스트로크 너비:5 /></svg>

위 코드에서 <line> 태그의 x1 속성과 y1 속성은 선분의 시작점의 가로 좌표와 세로 좌표를 나타냅니다. x2 속성과 y2 속성은 선분의 끝점의 가로 좌표와 세로 좌표를 나타냅니다. 선분; 스타일 속성은 선분의 스타일을 나타냅니다.

4. <polyline> 태그

<polyline> 태그는 폴리라인을 그리는 데 사용됩니다.

 <svg width=300 height=180> <polyline points=3,3 30,28 3,53 fill=none 스트로크=검정 /></svg>

<polyline> 의 points 속성은 각 끝점의 좌표를 지정합니다. 가로 좌표와 세로 좌표는 쉼표로 구분되며 점은 공백으로 구분됩니다.

5. <rect> 태그

<rect> 태그는 직사각형을 그리는 데 사용됩니다.

 <svg 너비=300 높이=180> <ect x=0 y=0 높이=100 너비=200 스타일=획: #70d5dd 채우기: #dd524b /></svg>

<rect> 의 x 속성과 y 속성은 직사각형의 왼쪽 위 모서리 끝점의 가로 좌표와 세로 좌표를 지정하고, 너비와 높이 속성은 직사각형의 너비와 높이(단위 픽셀)를 지정합니다.

6. <ellipse> 태그

<ellipse> 태그는 타원을 그리는 데 사용됩니다.

 <svg width=300 height=180> <ellipse cx=60 cy=60 ry=40 rx=20 스트로크=블랙 스트로크-폭=5 fill=silver/></svg>

<ellipse> 의 cx 속성과 cy 속성은 타원 중심의 가로 좌표와 세로 좌표(단위 픽셀)를 지정하고, rx 속성과 ry 속성은 타원의 가로 및 세로 축의 반경(단위 픽셀)을 지정합니다.

7. <polygon> 태그

<polygon> 태그는 다각형을 그리는 데 사용됩니다.

 <svg width=300 height=180> <다각형 채우기=녹색 스트로크=주황색 스트로크-너비=1 포인트=0,0 100,0 100,100 0,100 0,0/></svg>

<polygon> 의 points 속성은 각 끝점의 좌표를 지정하며, 가로좌표와 세로좌표는 쉼표로 구분되고, 점은 공백으로 구분됩니다.

8. <path> 태그

<path> 태그는 경로를 지정하는 데 사용됩니다.

 <svg width=300 height=180><경로 d= M 18,3 L 46,3 L 46,40 L 61,40 L 32,68 L 3,40 L 18,40 Z></path></svg >

<path> 의 d 속성은 그리기 순서를 나타냅니다. 각 문자는 그리기 동작을 나타내며 그 뒤에 좌표가 표시됩니다.

M: 이동 (이동)

L: (lineto)에 직선을 그립니다.

Z: 닫힌 경로

9. <text> 태그

<text> 태그는 텍스트를 그리는 데 사용됩니다.

 <svg width=300 height=180> <text x=50 y=25>사客足球</text></svg>

<text> 의 x 및 y 속성은 텍스트 블록 기준선 시작점의 가로 좌표와 세로 좌표를 나타냅니다. 클래스 또는 스타일 속성을 사용하여 텍스트 스타일을 지정할 수 있습니다.

10. <use> 태그

<use> 태그는 도형을 복사하는 데 사용됩니다.

 <svg viewBox=0 0 30 10 xmlns=http://www.w3.org/2000/svg> <circle id=myCircle cx=5 cy=5 r=4/> <use href=#myCircle x=10 y =0 fill=blue /> <use href=#myCircle x=20 y=0 fill=white 스트로크=blue /></svg>

<use> 의 href 속성은 복사할 노드를 지정하고, x 속성과 y 속성은 <use> 의 왼쪽 상단 좌표입니다. 또한 너비와 높이 좌표를 지정할 수도 있습니다.

11. <g> 태그

<g> 태그는 쉽게 재사용할 수 있도록 여러 도형을 하나의 그룹으로 그룹화하는 데 사용됩니다.

 <svg width=300 height=100> <g id=myCircle> <text x=25 y=20>원</text> <circle cx=50 cy=50 r=20/> </g> <use href = #myCircle x=100 y=0 채우기=파랑 /> <use href=#myCircle x=200 y=0 채우기=흰색 스트로크=파랑 /></svg>

12. <defs> 태그

<defs> 태그는 사용자 정의 모양에 사용됩니다. 내부 코드는 표시되지 않으며 참조용으로만 사용됩니다.

 <svg width=300 height=100> <defs> <g id=myCircle> <text x=25 y=20>원</text> <circle cx=50 cy=50 r=20/> </g> < /defs> <use href=#myCircle x=0 y=0 /> <use href=#myCircle x=100 y=0 fill=blue /> <사용 href=#myCircle x=200 y=0 fill=white 스트로크=파란색 /></svg>

13. <pattern> 태그

<pattern> 태그는 영역 타일링에 참조할 수 있는 모양을 사용자 정의하는 데 사용됩니다.

 <svg width=500 height=500> <defs> <pattern id=dots x=0 y=0 width=100 height=100 PatternUnits=userSpaceOnUse> <circle fill=#bee9e8 cx=50 cy=50 r=35 /> </pattern> </defs> <사각형 x=0 y=0 너비=100% 높이=100% fill=url(#dots) /></svg>

위 코드에서 <pattern> 태그는 원을 점 패턴으로 정의합니다. patternUnits=userSpaceOnUse <pattern> 의 너비와 길이가 실제 픽셀 값임을 의미합니다. 그런 다음 이 모드를 할당하여 아래쪽 직사각형을 채웁니다.

14. <image> 태그

<image> 태그는 이미지 파일을 삽입하는 데 사용됩니다.

 <svg viewBox=0 0 100 100 너비=100 높이=100> <image xlink:href=path/to/image.jpg 너비=50% 높이=50%/></svg>

위 코드에서 <image> 의 xlink:href 속성은 이미지의 소스를 나타냅니다.

15. <animate> 태그

<animate> 태그는 애니메이션 효과를 생성하는 데 사용됩니다.

 <svg width=500px height=500px> <ect x=0 y=0 width=100 height=100 fill=#feac5e> <animate attributeName=x from=0 to=500 dur=2speatCount=inlimited /> </ect ></svg>

위의 코드에서 사각형은 계속 움직이며 애니메이션 효과를 생성합니다.

<animate> 속성의 의미는 다음과 같습니다.

attributeName: 애니메이션 효과가 발생하는 속성의 이름입니다.

from: 단일 애니메이션의 초기 값입니다.

to: 단일 애니메이션의 최종 값입니다.

dur: 단일 애니메이션의 지속 시간입니다.

RepeatCount: 애니메이션 루프 모드.

애니메이션은 여러 속성에 정의될 수 있습니다.

 <animate attributeName=x from=0 to=500 dur=2speatCount=inlimited /><animate attributeName=width to=500 dur=2speatCount=inlimited />

16. <animateTransform> 태그

<animate> 태그는 CSS 변환 속성에 영향을 미치지 않습니다. 변환이 필요한 경우 <animateTransform> 태그를 사용해야 합니다.

 <svg width=500px height=500px> <ect x=250 y=250 width=50 height=50 fill=#4bc0c8> <animateTransform attributeName=transform type=rotate start=0s dur=10s from=0 200 200 to=360 400 400 반복 횟수=무한 /> </ect></svg>

위 코드에서 <animateTransform> 의 효과는 회전입니다. 이때, from과 to 속성 값은 3개의 숫자를 가지며, 두 번째와 세 번째 값은 각도 값입니다. 회전 중심. from=0 200 200은 처음에 각도가 0이고 회전이 (200, 200) 주위에서 시작됨을 의미합니다. to=360 400 400은 끝에서 각도가 360이고 회전이 (400) 주위에서 시작됨을 의미합니다. , 400).

1. DOM 작업

SVG 코드가 HTML 웹페이지에 직접 작성되면 웹페이지 DOM의 일부가 되며 DOM을 사용하여 직접 조작할 수 있습니다.

 <svg id=mysvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 800 600 presentsAspectRatio=xMidYMid Meet> <circle id=mycircle cx=400 cy=300 r=50 /><svg>

위 코드를 웹페이지에 삽입한 후 CSS를 사용하여 스타일을 맞춤설정할 수 있습니다.

 원 { 스트로크 너비: 5; 스트로크: #f00;} 원: 호버 { 스트로크: #f8f8f8;}

그런 다음 SVG를 JavaScript 코드로 조작할 수 있습니다.

 var mycircle = document.getElementById('mycircle');mycircle.addEventListener('click', function(e) { console.log('원 클릭 - 확대'); mycircle.setAttribute('r', 60);}, 거짓);

위 코드는 그래픽을 클릭하면 원 요소의 r 속성이 다시 작성되도록 지정합니다.

2. SVG DOM 얻기

<object> , <iframe> , <embed> 태그를 사용하여 SVG 파일을 삽입하여 SVG DOM을 얻습니다.

 var svgObject = document.getElementById('object').contentDocument; var svgIframe = document.getElementById('iframe').contentDocument; var svgEmbed = document.getElementById('embed').getSVGDocument();

<img> 태그를 사용하여 SVG 파일을 삽입하면 SVG DOM을 가져올 수 없습니다.

3. SVG 소스 코드 읽기

SVG 파일은 XML 텍스트이므로 XML 코드를 읽으면 SVG 소스 코드를 읽을 수 있습니다.

 <div id=svg-container> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink xml:space=preserve 너비=500 height=440 > <!-- svg 코드 --> </svg></div>

XMLSerializer 인스턴스의 serializeToString() 메서드를 사용하여 SVG 요소의 코드를 가져옵니다.

 var svgString = new XMLSerializer() .serializeToString(document.querySelector('svg'));

4. SVG 이미지를 캔버스 이미지로 변환

먼저, 새로운 Image 객체를 생성하고 SVG 이미지를 Image 객체의 src 속성에 할당해야 합니다.

 var img = new Image();var svg = new Blob([svgString], {type: image/svg+xml;charset=utf-8});var DOMURL = self.URL || self.webkitURL || var url = DOMURL.createObjectURL(svg);img.src = url;

그런 다음 이미지가 로드되면 <canvas> 요소에 그립니다.

 img.onload = function () { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0);};

SVG는 그 이상을 할 수 있습니다. SVG를 사용하여 만든 애니메이션 효과와 텍스트 효과에 대해서는 나중에 자세히 설명하겠지만 오늘은 여기까지만 하겠습니다.

 console.log('右下角点好看呦')

이상이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되길 바랍니다.