HTML5_html5 튜토리얼 팁을 사용하여 SVG 벡터 그래픽을 그리기 위한 입문 튜토리얼

VG는 2D 그래픽을 설명하는 언어인 Scalable Vector Graphics의 약자입니다. 그래픽 애플리케이션은 XML을 사용하여 작성된 후 SVG 리더 프로그램으로 렌더링됩니다.

SVG는 원형 차트, X, Y 좌표계의 2차원 차트 등 벡터형 차트에 주로 사용됩니다.

SVG는 2003년 1월 14일 W3C 권장 사항이 되었습니다. SVG 사양 페이지에서 최신 버전의 SVG 사양을 볼 수 있습니다.

SVG 파일 보기
대부분의 웹 브라우저는 PNG, GIF 및 JPG 그래픽을 표시할 수 있는 것처럼 SVG를 표시할 수 있습니다. IE 사용자는 브라우저에서 SVG를 보려면 Adobe SVG Reader를 설치해야 할 수도 있습니다.

HTML5에 SVG 삽입
HTML5를 사용하면 __ 태그를 사용하여 SVG를 직접 삽입할 수 있습니다. 다음은 간단한 구문입니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. <svg xmlns="http://www .w3.org/2000/svg"> 
2. ... 
3. svg>

HTML5 - SVG Circle
다음은 태그를 사용하여 원을 그리는 HTML5 버전의 SVG 예제입니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. >  
2. <머리>  
3. <제목>SVG제목>  
4. <메타 문자 집합="utf- 8" />  
5. 머리>  
6. <몸>  
7. <h2>HTML5 SVG 서클 h2>  
8. <svg id="svgelem"  높이="200" xmlns="http://www.w3.org/2000/svg">  
9.     <원 ID="redcircle"  cx="50" cy="50" r="50" 채우기 ="빨간색" />  
10. svg>  
11. 몸>  
12. html>  

현재 HTML5의 최신 버전 FireFox 中会生成如下结果：

HTML5 - SVG 형식
하면是一个 SVG 示例的 HTML5 版本，용 标签绘제일个矩형：

XML/HTML 코드复复内容到剪贴板

1. >  
2. <머리>  
3. <제목>SVG제목>  
4. <메타 문자 집합="utf- 8" />  
5. 머리>  
6. <몸>  
7. <h2>HTML5 SVG 직사각형 h2>  
8. <svg id="svgelem"  높이="200" xmlns="http://www.w3.org/2000/svg">  
9.     <정렬 id="수정"  너비="300" 높이="100" 채우기="빨간색" / >  
10. svg>  
11. 몸>  
12. html>  

현재 HTML5의 최신 버전 FireFox 中会生成如下结果：

HTML5 - SVG 线条
下면是一个 SVG 示例的 HTML5 版本，용 标签绘제일个线条：

XML/HTML 코드复复内容到剪贴板

1. >  
2. <머리>  
3. <제목>SVG제목>  
4. <메타 문자 집합="utf- 8" />  
5. 머리>  
6. <몸>  
7. <h2>HTML5 SVG 라인 h2>  
8. <svg id="svgelem"  높이="200" xmlns="http://www.w3.org/2000/svg">  
9.     <라인 x1="0"  y1="0" x2="200" y2="100"  
10.           스타일="획:빨간;획-너비:2"/>  
11. svg>  
12. 몸>  
13. html>  

你可以使사용 스타일 属性给它设置额外的样式信息，比如笔画，填充color，笔画宽島等等。

현재 HTML5의 최신 버전 FireFox 中会生成如下结果：

HTML5 - SVG 椭圆
下면是一个 SVG 示例的 HTML5 版本，용 标签绘제일个椭圆：

XML/HTML 코드复复内容到剪贴板

1. >  
2. <머리>  
3. <제목>SVG제목>  
4. <메타 문자 집합="utf- 8" />  
5. 머리>  
6. <몸>  
7. <h2>HTML5 SVG Ellipse h2>  
8. <svg id="svgelem"  높이="200" xmlns="http://www.w3.org/2000/svg">  
9.     <타원 cx="100"  cy="50" rx="100" ry="50" 채우기 ="빨간색" />  
10. svg>  
11. 몸>  
12. html>  

현재 HTML5의 최신 버전 FireFox 中会生成如下结果：

HTML5 - SVG 다형형
하단 SVG 示例的 HTML5 版本，용 <다각형> 标签绘绘布一个多边형：

XML/HTML 코드复复内容到剪贴板

1. >  
2. <머리>  
3. <제목>SVG제목>  
4. <메타 문자 집합="utf- 8" />  
5. 머리>  
6. <몸>  
7. <h2>HTML5 SVG Polygon h2>  
8. <svg id="svgelem"  높이="200" xmlns="http://www.w3.org/2000/svg">  
9.     <다각형  포인트="20, 10 300,20, 170,50" 채우기="빨간색"  />  
10. svg>  
11. 몸>  
12. html>  

현재 HTML5의 최신 버전 FireFox 中会生成如下结果：

HTML5 - SVG 折线
下면是一个 SVG 示例的 HTML5 版本，용 标签绘제일个折线图：

XML/HTML 코드复复内容到剪贴板

1. >  
2. <머리>  
3. <제목>SVG제목>  
4. <메타 문자 집합="utf- 8" />  
5. 머리>  
6. <몸>  
7. <h2>HTML5 SVG 폴리라인 h2>  
8. <svg id="svgelem"  높이="200" xmlns="http://www.w3.org/2000/svg">  
9.  <폴리라인 포인트="0, 0 0,20 20,20 20,40 40,40 40,60" 채우기="빨간색" />  
10. svg>  
11. 몸>  
12. html>  

현재 HTML5의 최신 버전 FireFox 中会生成如下结果：

HTML5 - SVG 渐变
下면是一个 SVG 示例的 HTML5 版本，용 标签绘 제조사 一个椭圆，使用 标签定义一个 SVG 径向渐变。

저희는 标签创建 SVG 线性渐变。

XML/HTML 코드复复内容到剪贴板

1. >  
2. <머리>  
3. <제목>SVG제목>  
4. <메타 문자 집합="utf- 8" />  
5. 머리>  
6. <몸>  
7. <h2>HTML5 SVG 그라데이션 타원h2>  
8. <svg id="svgelem"  높이="200" xmlns="http://www.w3.org/2000/svg">  
9.    <defs>  
10.       <radialGradient id="gradient"  cx="50%" cy= "50%" r="50%"  
11.       fx="50%" fy= "50%">  
12.       <중지 오프셋="0% " 스타일="stop-color:rgb(200,200,200);   
13.       stop-opacity:0"/>  
14.       <중지 오프셋="100% " 스타일="stop-color:rgb(0,0,255);   
15.       stop-opacity:1"/>  
16.       방사형 그라데이션>  
17.    defs>  
18.  <타원 cx="100" cy="50" rx="100" 라이="50"
19.  스타일="fill:url(#gradient)" />
20. svg>
21. 몸>
22. html>

HTML5가 포함된 최신 버전의 FireFox에서는 다음 결과가 활성화되었습니다.