코드 최적화는 항상 프로그래머의 영원한 요구이며, PNG/JPG 및 기타 형식의 일부 이미지를 대체하기 위해 SVG 이미지를 합리적으로 사용하는 것은 프런트 엔드 최적화의 중요한 부분이므로 먼저 살펴보겠습니다. SVG 이미지의 장점은 무엇입니까?
SVG는 다양한 도구(예: 메모장)로 읽고 수정할 수 있습니다.
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란 무엇입니까?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,[데이터]>SVG 구문
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('右下角点好看呦')이상이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되길 바랍니다.