HTML5-SVG

SVG는 Scalable V엑터 Graphics는 XML로 2D 그래픽 및 그래픽 애플리케이션을 설명하는 언어이며 XML은 SVG 뷰어에 의해 렌더링됩니다.

SVG는 원형 차트, X, Y 좌표계의 2 차원 그래프 등과 같은 벡터 유형 다이어그램에 주로 유용합니다.

SVG 2003 년 14 1월 W3C의 권고안이되었고, 당신은에서 SVG 사양의 최신 버전을 확인할 수 있습니다 SVG 사양 .

SVG 파일보기

대부분의 웹 브라우저는 PNG, GIF 및 JPG를 표시 할 수있는 것처럼 SVG를 표시 할 수 있습니다. Internet Explorer 사용자는 브라우저에서 SVG를 보려면 Adobe SVG Viewer 를 설치해야 할 수 있습니다.

HTML5에 SVG 포함

HTML5는 다음을 사용하여 SVG를 직접 포함 할 수 있습니다. <svg>...</svg> 다음과 같은 간단한 구문이있는 태그-

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

Firefox 3.7은 다음 단계를 사용하여 HTML5를 활성화 할 수있는 구성 옵션 ( "about : config")도 도입했습니다.

  • 유형 about:config Firefox 주소 표시 줄에서.

  • "조심 할게요 약속 해요!" 표시되는 경고 메시지에서 버튼을 클릭합니다 (준수해야합니다!).

  • 유형 html5.enable 페이지 상단의 필터 표시 줄에

  • 현재는 비활성화되어 있으므로 클릭하여 값을 true로 전환합니다.

이제 Firefox HTML5 파서를 활성화하고 다음 예제를 실험 할 수 있습니다.

HTML5-SVG 서클

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

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Circle</h2>
		
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
      </svg>
   </body>
</html>

이것은 HTML5가 활성화 된 최신 버전의 Firefox에서 다음과 같은 결과를 생성합니다.

HTML5-SVG 직사각형

다음은 <rect> 태그를 사용하여 직사각형을 그리는 SVG 예제의 HTML5 버전입니다.

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Rectangle</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <rect id = "redrect" width = "300" height = "100" fill = "red" />
      </svg>
   </body>
</html>

이것은 HTML5가 활성화 된 최신 버전의 Firefox에서 다음과 같은 결과를 생성합니다.

HTML5-SVG 라인

다음은 <line> 태그를 사용하여 선을 그리는 SVG 예제의 HTML5 버전입니다.

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Line</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <line x1 = "0" y1 = "0" x2 = "200" y2 = "100" 
            style = "stroke:red;stroke-width:2"/>
      </svg>
   </body>
</html>

사용할 수 있습니다 style 획 및 채우기 색상, 획 너비 등과 같은 추가 스타일 정보를 설정할 수있는 속성입니다.

이것은 HTML5가 활성화 된 최신 버전의 Firefox에서 다음과 같은 결과를 생성합니다.

HTML5-SVG 타원

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

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Ellipse</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <ellipse cx = "100" cy = "50" rx = "100" ry = "50" fill = "red" />
      </svg>
		
   </body>
</html>

이것은 HTML5가 활성화 된 최신 버전의 Firefox에서 다음과 같은 결과를 생성합니다.

HTML5-SVG 다각형

다음은 <polygon> 태그를 사용하여 다각형을 그리는 SVG 예제의 HTML5 버전입니다.

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polygon</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polygon  points = "20,10 300,20, 170,50" fill = "red" />
      </svg>
   </body>
</html>

이것은 HTML5가 활성화 된 최신 버전의 Firefox에서 다음과 같은 결과를 생성합니다.

HTML5-SVG 폴리 라인

다음은 <polyline> 태그를 사용하여 폴리 라인을 그리는 SVG 예제의 HTML5 버전입니다.

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polyline</h2>
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polyline points = "0,0 0,20 20,20 20,40 40,40 40,60" fill = "red" />
      </svg>
   </body>
</html>

이것은 HTML5가 활성화 된 최신 버전의 Firefox에서 다음과 같은 결과를 생성합니다.

HTML5-SVG 그라디언트

다음은 <ellipse> 태그를 사용하여 타원을 그리고 SVG 방사형 그래디언트를 정의하기 위해 <radialGradient> 태그를 사용하는 SVG 예제의 HTML5 버전입니다.

마찬가지로 <linearGradient> 태그를 사용하여 SVG 선형 그래디언트를 만들 수 있습니다.

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Gradient Ellipse</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <defs>
            <radialGradient id="gradient" cx = "50%" cy = "50%" r = "50%" fx = "50%" 
               fy = "50%">
               <stop offset = "0%" style = "stop-color:rgb(200,200,200); stop-opacity:0"/>
               <stop offset = "100%" style = "stop-color:rgb(0,0,255); stop-opacity:1"/>
            </radialGradient>
         </defs>
         <ellipse cx = "100" cy = "50" rx = "100" ry = "50" 
            style = "fill:url(#gradient)" />
      </svg>
		
   </body>
</html>

이것은 HTML5가 활성화 된 최신 버전의 Firefox에서 다음과 같은 결과를 생성합니다.

HTML5-SVG 별

다음은 <polygon> 태그를 사용하여 별을 그리는 SVG 예제의 HTML5 버전입니다.

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>	
      <h2 align = "center">HTML5 SVG Star</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polygon points = "100,10 40,180 190,60 10,60 160,180" fill = "red"/>
      </svg>
    </body>
</html>

이것은 HTML5가 활성화 된 최신 버전의 Firefox에서 다음과 같은 결과를 생성합니다.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved