1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
---
title: 'SVG: Scalable Vector Graphics'
slug: Web/SVG
tags:
- 2D Graphics
- Graphics
- Icons
- Images
- Reference
- Responsive Design
- SVG
- Scalable Graphics
- Scalable Images
- Vector Graphics
- Web
- l10n:priority
translation_of: Web/SVG
---
<div>{{SVGRef}}</div>
<h2 id="getting_started_with_svg">SVG 시작하기</h2>
<p>
<span class="seoSummary"
><strong>SVG(Scalable Vector Graphics)</strong>는 2차원 <a href="https://w.wiki/3cVf">벡터 그래픽</a>을 서술하는
<a href="/ko/docs/Web/XML">XML</a> 기반의 마크업 언어입니다.</span
>
SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술하며
<a href="/ko/docs/Web/CSS">CSS</a>, <a href="/ko/docs/Web/API/Document_Object_Model">DOM</a>,
<a href="/ko/docs/Web/JavaScript">JavaScript</a>, <a href="/ko/docs/Web/SVG/SVG_animation_with_SMIL">SMIL</a> 등 다른
웹 표준과도 잘 동작하도록 설계됐습니다. SVG는 달리 말하자면 <a href="/ko/docs/Web/HTML">HTML</a>과 텍스트의 관계를
그래픽에 적용한 것입니다.
</p>
<p>
SVG 이미지와 그 동작 방식은 <a href="/ko/docs/Web/XML">XML</a> 텍스트 파일로 정의합니다. 따라서 검색, 색인, 스크립트
적용, 그리고 압축이 가능하며, 그래픽 도구 외에도 아무 텍스트 편집기로 생성 및 편집이 가능합니다.
</p>
<p>
{{Glossary("JPEG")}}와 {{Glossary("PNG")}} 등 고전적인 비트맵 이미지 형식과 비교했을 때, SVG 형식의 벡터 이미지는
손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하며 현지화 역시 그래픽 편집기 없이도 파일 내의 텍스트를 수정해서
쉽게 처리할 수 있습니다. 적절한 라이브러리를 함께 사용하면 SVG 파일을 필요에 따라 즉각 현지화하는 것도 가능합니다.
</p>
<p>SVG는 <a href="https://www.w3.org/">World Wide Web Consortium(W3C)</a>가 1999년부터 개발하고 있습니다.</p>
<p><a href="/ko/docs/Web/SVG/Tutorial">SVG 자습서</a>도 방문해보세요.</p>
<h2 id="documentation">문서</h2>
<dl>
<dt><a href="/ko/docs/Web/SVG/Element">SVG 요소 참고서</a></dt>
<dd>각각의 SVG 요소에 대한 세부 정보입니다.</dd>
<dt><a href="/ko/docs/Web/SVG/Attribute">SVG 특성 참고서</a></dt>
<dd>각각의 SVG 특성에 대한 세부 정보입니다.</dd>
<dt><a href="/ko/docs/Web/API/Document_Object_Model#svg_interfaces">SVG DOM 인터페이스 참고서</a></dt>
<dd>JavaScript 상호작용을 위한 SVG DOM 인터페이스의 세부 정보입니다.</dd>
<dt><a href="/ko/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">HTML 콘텐츠에 SVG 효과 적용하기</a></dt>
<dd>
SVG는 {{Glossary("HTML")}}, {{Glossary("CSS")}}, {{Glossary("JavaScript")}}와 사용할 수 있습니다. SVG를 사용해서
<a href="/ko/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction">평범한 HTML 페이지나 웹 어플리케이션을 향상하세요</a>.
</dd>
</dl>
<h2 id="tools">도구</h2>
<ul>
<li><a href="https://github.com/w3c/svgwg/wiki/Testing">SVG 테스트 도구모음</a></li>
<li><a href="https://validator.w3.org/#validate_by_input">마크업 검증기</a></li>
</ul>
<h2 id="examples">예제</h2>
<ul>
<li><a href="https://jwatt.org/svg/authoring/">SVG 저작 가이드라인</a></li>
<li><a href="/ko/docs/Web/SVG/SVG_as_an_Image">이미지로서의 SVG</a></li>
<li><a href="/ko/docs/Web/SVG/SVG_animation_with_SMIL">SMIL을 사용한 SVG 애니메이션</a></li>
<li><a href="https://plurib.us/1shot/2007/svg_gallery/">SVG 아트 갤러리</a></li>
<li><a href="https://d3js.org">D3</a> (JavaScript를 사용해서 데이터를 HTML, SVG, CSS로 시각화하는 라이브러리)</li>
</ul>
|
