What is SVG?
SVG 란 무엇입니까?
SVG stands for Scalable Vector Graphics
SVG는 확장 가능한 벡터 그래픽
SVG is used to define graphics for the Web
SVG는 웹용 그래픽 정의에 사용됩니다.
SVG is a W3C recommendation
SVG는 W3C 권장 사항입니다.
The HTML <svg> Element
HTML <svg> 요소
The HTML <svg> element is a container for SVG graphics.
HTML <svg>요소는 SVG 그래픽의 컨테이너입니다.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
SVG에는 경로, 상자, 원, 텍스트 및 그래픽 이미지를 그리는 여러 가지 방법이 있습니다.
Browser Support
브라우저 지원
The numbers in the table specify the first browser version that fully supports the <svg> element.
표의 숫자는 <svg>요소 를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다 .
|
Element |
|||||
|---|---|---|---|---|---|
|
<svg> |
4.0 |
9.0 |
3.0 |
3.2 |
10.1 |
SVG Circle
Example
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
|
cs |
SVG Rectangle
Example
|
1
2
3
|
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
|
cs |
SVG Rounded Rectangle
Example
|
1
2
3
4
|
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
|
cs |
SVG Star
Example
|
1
2
3
4
|
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
|
cs |
SVG Logo
Example
|
1
2
3
4
5
6
7
8
9
10
11
|
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
|
cs |
Differences Between SVG and Canvas
SVG와 캔버스의 차이점
SVG is a language for describing 2D graphics in XML.
SVG는 XML의 2D 그래픽을 설명하기위한 언어입니다.
Canvas draws 2D graphics, on the fly (with a JavaScript).
캔버스는 2D 그래픽을 즉석에서 그립니다 (JavaScript 사용).
SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
SVG는 XML 기반이며, 이는 모든 요소가 SVG DOM 내에서 사용 가능하다는 것을 의미합니다. 요소에 JavaScript 이벤트 핸들러를 첨부 할 수 있습니다.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.
SVG에서 각각의 그린 된 모양은 객체로 기억됩니다. SVG 객체의 속성이 변경되면 브라우저는 자동으로 모양을 다시 렌더링합니다.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.
Canvas는 픽셀 단위로 렌더링됩니다. 캔버스에서 그래픽이 그려지면 브라우저에서이를 잊어 버립니다. 위치를 변경해야하는 경우 그래픽으로 덮여있을 수있는 모든 객체를 포함하여 전체 장면을 다시 그려야합니다.
Comparison of Canvas and SVG
캔버스와 SVG의 비교
The table below shows some important differences between Canvas and SVG:
아래 표는 Canvas와 SVG의 중요한 차이점을 보여줍니다.
| Canvas | SVG |
|
|
SVG Tutorial
To learn more about SVG, read our SVG Tutorial.
'HTML' 카테고리의 다른 글
| [R]HTML 멀티미디어(HTML Multimedia) (0) | 2018.07.15 |
|---|---|
| [R]HTML Google지도(HTML Google Maps) (0) | 2018.07.14 |
| [R]HTML5 Canvas (0) | 2018.07.12 |
| [R]HTML5 스타일 가이드 및 코딩 규칙(HTML5 Style Guide and Coding Conventions) (0) | 2018.07.11 |
| HTML5 마이그레이션(HTML5 Migration) (0) | 2018.07.10 |
