aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/svg/tutorial
diff options
context:
space:
mode:
Diffstat (limited to 'files/ko/web/svg/tutorial')
-rw-r--r--files/ko/web/svg/tutorial/index.html36
-rw-r--r--files/ko/web/svg/tutorial/introduction/index.html49
-rw-r--r--files/ko/web/svg/tutorial/paths/index.html216
-rw-r--r--files/ko/web/svg/tutorial/patterns/index.html72
-rw-r--r--files/ko/web/svg/tutorial/svg_image_tag/index.html35
-rw-r--r--files/ko/web/svg/tutorial/svg_in_html_introduction/index.html73
-rw-r--r--files/ko/web/svg/tutorial/기본_도형/index.html141
-rw-r--r--files/ko/web/svg/tutorial/시작하기/index.html94
-rw-r--r--files/ko/web/svg/tutorial/위치/index.html45
9 files changed, 761 insertions, 0 deletions
diff --git a/files/ko/web/svg/tutorial/index.html b/files/ko/web/svg/tutorial/index.html
new file mode 100644
index 0000000000..1cc6c1f8d5
--- /dev/null
+++ b/files/ko/web/svg/tutorial/index.html
@@ -0,0 +1,36 @@
+---
+title: SVG 튜토리얼
+slug: Web/SVG/Tutorial
+tags:
+ - SVG
+ - 'SVG:튜토리얼'
+ - 중급
+translation_of: Web/SVG/Tutorial
+---
+<p>확장 가능한 벡터 그래픽(Scalable Vector Graphics), <a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a>는 그래픽을 마크업하기 위한 W3C XML의 특수언어(dialect)입니다. SVG는 파이어폭스, 오페라, 웹킷 브라우저, 인터넷 익스플로러 및 기타 여러 브라우저에서 부분적으로 지원하고 있습니다.</p>
+
+<p>본 튜토리얼의 목적은 SVG 내부 구조를 설명하는 데 있으며, 기술적인 세부 사항을 다룹니다. 만약 그저 아름다운 이미지를 그리려고 한다면, <a class="external external-icon" href="http://inkscape.org/doc/" title="http://inkscape.org/doc/">Inkscape's documentation page</a>에서 더 많은 유용한 소스들을 찾을 수 있습니다. SVG에 관한 또 다른 소개는 W3C의 <a class="external external-icon" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG Primer</a>에서 제공됩니다.</p>
+
+<div class="note">본 튜토리얼은 개발 초기 단계에 있습니다. 가능하다면, 본 문서 작성에 참여하여, 한 두 단락을 작성하여 도움을 주기 바랍니다. 한 페이지 전체를 작성한다면 더욱 좋습니다!</div>
+
+<h5 id="SVG_소개_목록">SVG 소개 목록</h5>
+
+<ul>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Introduction" title="ko/docs/Web/SVG/Tutorial/Introduction">소개</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Getting_Started" title="ko/docs/Web/SVG/Tutorial/Getting_Started">시작하기</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Positions" title="ko/docs/Web/SVG/Tutorial/Positions">위치</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Basic_Shapes" title="ko/docs/Web/SVG/Tutorial/Basic_Shapes">기본 형태</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Paths" title="ko/docs/Web/SVG/Tutorial/Paths">패스</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Fills_and_Strokes" title="ko/docs/Web/SVG/Tutorial/Fills_and_Strokes">채우기 및 선 그리기</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Gradients" title="ko/docs/Web/SVG/Tutorial/Gradients">그라디언트</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Patterns" title="ko/docs/Web/SVG/Tutorial/Patterns">패턴</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Texts" title="ko/docs/Web/SVG/Tutorial/Texts">텍스트</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Basic_Transformations" title="ko/docs/Web/SVG/Tutorial/Basic_Transformations">기본 변형</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Clipping_and_masking" title="ko/docs/Web/SVG/Tutorial/Clipping_and_masking">클리핑 및 마스킹</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Other_content_in_SVG" title="ko/docs/Web/SVG/Tutorial/Other content in SVG">SVG 안의 다른 컨텐츠</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Filter_effects" title="ko/docs/Web/SVG/Tutorial/Filter effects">필터 효과</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/SVG_fonts" title="ko/docs/Web/SVG/Tutorial/SVG fonts">SVG 폰트</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/SVG_Image_Tag" title="ko/docs/Web/SVG/Tutorial/SVG Image Tag">SVG 이미지 태그</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Tools_for_SVG" title="ko/docs/Web/SVG/Tutorial/Tools_for_SVG">SVG를 위한 도구들</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/SVG_and_CSS">SVG와 CSS</a></li>
+</ul>
diff --git a/files/ko/web/svg/tutorial/introduction/index.html b/files/ko/web/svg/tutorial/introduction/index.html
new file mode 100644
index 0000000000..05041323fa
--- /dev/null
+++ b/files/ko/web/svg/tutorial/introduction/index.html
@@ -0,0 +1,49 @@
+---
+title: 소개
+slug: Web/SVG/Tutorial/Introduction
+tags:
+ - SVG
+ - 'SVG:튜토리얼'
+ - 가이드
+ - 초보자
+ - 튜토리얼
+translation_of: Web/SVG/Tutorial/Introduction
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right;"><a href="/ko/SVG" title="ko/SVG">SVG</a>는 <a href="/ko/XHTML" title="ko/XHTML">XHTML</a>과 비슷한 <a href="/ko/XML" title="ko/XML">XML</a> 언어로 오른쪽에 있는 것과 같은 그래픽을 그리는 데 사용된다. SVG 이미지는 필요한 모든 선과 모양을 직접 일일이 지정하거나, 이미 존재하는 래스터 이미지를 수정하거나, 이 두 가지 방법을 조합해서 만들 수 있다. 이미지와 그 구성요소들은 변형되고, 조합되고, 필터링될 수 있으며, 이를 통해 원래의 형태를 완전히 바꿀 수도 있다.</p>
+
+<p>SVG는 비슷한 경쟁 포맷들이 <a class="external" href="http://www.w3.org" title="ko/W3C">W3C</a>에 제출되었지만 완전히 승인되지는 않았던 1999년에 등장했다. 명세는 오랫동안 존재해 왔지만 웹 브라우저에서 느리게 받아들여졌기 때문에, 웹 문서에서 바로 SVG를 포함하는 컨텐츠는 2009년까지도 많지 않았다. 사용할 수 있는 구현조차도 경쟁기술인 <a href="/ko/HTML/Canvas" title="ko/HTML/Canvas">HTML5 캔버스</a>나 (애플리케이션 인터페이스로서) 어도비 플래시보다 느린 편이다. SVG는 캔버스나 플래시와 비교했을 때 <a href="/ko/docs/Web/API">DOM 인터페이스</a>를 사용할 수 있는 점과 서드파티 확장을 필요로 하지 않는 이점을 가지고 있다. SVG를 활용할 지는 사용자의 목적에 달려있다.</p>
+
+<p><a href="https://caniuse.com/#feat=svg">Can I Use...</a>에서 확인할 수 있듯이, SVG 지원은 2009년부터 확대되어 왔다.</p>
+
+<h3 id="기본적인_요소들">기본적인 요소들</h3>
+
+<p><a href="/ko/docs/Web/HTML">HTML</a>은 헤더, 문단, 표와 같은 요소들을 제공한다. SVG도 마찬가지로 원, 사각형, 간단한 곡선과 복잡한 곡선을 그릴 수 있는 요소들을 제공한다. 간단한 SVG 문서는 {{ SVGElement('svg') }} 루트 요소와 그래픽을 구성하기 위한 몇몇 기본 도형들로 구성된다. 또한 {{ SVGElement('g') }} 요소를 통해 간단한 모양들을 조합할 수 있다.</p>
+
+<p>이를 통해서 SVG 이미지는 아주 복잡해질 수도 있다. SVG는 그라디언트, 회전, 필터 효과, 애니메이션, 자바스크립트를 통한 조작을 지원한다. 하지만 SVG의 이러한 추가적인 기능들은 그래픽 영역을 정의하는 비교적 작은 요소들의 집합에 의존하고 있다.</p>
+
+<h3 id="Before_you_start" name="Before_you_start">시작하기 전에</h3>
+
+<p><a class="external" href="http://www.inkscape.org/">잉크스케이프(Inkscape)</a>를 비롯해 SVG를 네이티브 포맷으로 활용하는 무료 드로잉 애플리케이션들이 있다. 하지만 이 튜토리얼에서는 순수하게 XML과 (독자가 선택한) 텍스트 에디터만을 사용한다. 이는 SVG의 내부 구조에 대한 이해를 돕기 위함이며, 이렇게 하기 위해서는 직접 마크업 언어를 경험해보는 것이 무엇보다 중요하다. SVG를 배우는 이유를 되새겨보자. 모든 SVG 뷰어가 같은 방식으로 구현되어 있지는 않기 때문에, 어떤 애플리케이션에서 잘 보여지도록 작성된 SVG가 다른 애플리케이션에서는 의도한 대로 작동하지 않을 수도 있다. 이는 SVG 명세나 SVG와 함께 사용되는 <a href="/ko/JavaScript">자바스크립트</a>나 <a href="/ko/CSS" title="ko/CSS">CSS</a>를 지원하는 수준이 서로 상이하기 때문에 발생하는 문제이다.</p>
+
+<p>SVG는 모든 모던 웹 브라우저에서 지원하고 있으며, 이전부터 지원해오던 경우도 있다. <a href="http://caniuse.com/svg">Can I use</a>에서 SVG 지원 현황을 표로 확인할 수 있다. 파이어폭스는 1.5 버전에서부터 SVG를 지원해오고 있으며, 매 버전이 나올 때마다 SVG 지원 범위도 넓어지고 있다. 바라건대 이 튜토리얼과 MDN 문서가 개발자들이 Gecko와 다른 주요 구현체들의 차이를 이해하는 데 도움이 되길 바란다.</p>
+
+<p>SVG를 시작하기에 앞서, 기초적인 XML 문법이나 <abbr title="HyperText Markup Language">HTML</abbr> 같은 다른 마크업 언어를 이해할 필요가 있다. XML에 익숙하지 않다면 다음 사항들을 유념하기 바란다.</p>
+
+<ul>
+ <li>XML은 (HTML과 달리) 대소문자를 구분하는 언어이므로 SVG 요소와 속성은 반드시 예제에 보이는 대로 입력해야 한다.</li>
+ <li>SVG에서 속성 값은 숫자라고 할지라도 반드시 따옴표로 둘러싸야 한다.</li>
+</ul>
+
+<p>SVG의 명세는 아주 길다. 이 튜토리얼에서는 기초적인 부분만을 다룬다. 이미 SVG에 익숙하다면 <a href="/ko/SVG/Element" title="ko/SVG/Element">요소 레퍼런스</a>나 <a href="/ko/docs/DOM/DOM_Reference#SVG_interfaces" title="ko/SVG/Interface">인터페이스 레퍼런스</a>에서 필요한 부분을 찾아보면 된다.</p>
+
+<h3 id="SVG의_종류">SVG의 종류</h3>
+
+<p>2003년에 권고가 된 후 최신의 완전한(full) SVG 버전은 1.1이다. 1.1은 1.0을 기반으로 작성되었으나 구현을 쉽게 하기 위해 좀 더 모듈화되었다. <a href="http://www.w3.org/TR/SVG/">SVG 1.1 두번째 에디션</a>은 2011년에 권고되었다. 완전한 SVG 1.2가 SVG의 다음 주요 릴리즈였다. 1.2 대신 현재 활발히 개발중인 <a href="http://www.w3.org/TR/SVG2/">SVG 2.0</a>으로 넘어갈 것이다. SVG 2.0에서는 CSS 3과 마찬가지로 구성요소들이 느슨히 결합된 명세들로 분리될 것이다.</p>
+
+<p>완전한 SVG 권고와는 별도로 W3C 워킹 그룹에서는 2003년에 SVG Tiny와 SVG Basic을 내놓았다. SVG Tiny와 SVG Basic은 모바일 기기를 위한 것이다. 먼저 SVG Tiny에 따르면 적은 리소스를 가진 작은 기기에서도 그래픽을 생성할 수 있어야 한다. SVG Basic은 완전한 SVG 명세의 많은 부분을 지원하지만 구현하기 어렵거나 애니메이션과 같이 무거운 렌더 작업은 포함하지 않는다. 2008년에는 SVG Tiny 1.2가 W3C 권고가 되었다.</p>
+
+<p>다중 페이지 지원 및 더 나은 색상 관리를 위한 SVG 프린트 명세도 계획되어 있었다. 이 작업은 현재 진행되지 않고 있다.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p>
diff --git a/files/ko/web/svg/tutorial/paths/index.html b/files/ko/web/svg/tutorial/paths/index.html
new file mode 100644
index 0000000000..4280d78df0
--- /dev/null
+++ b/files/ko/web/svg/tutorial/paths/index.html
@@ -0,0 +1,216 @@
+---
+title: 패스
+slug: Web/SVG/Tutorial/Paths
+tags:
+ - SVG
+ - 학습서
+translation_of: Web/SVG/Tutorial/Paths
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>
+
+<p><a href="/en-US/Web/SVG/Element/path"><code>&lt;path&gt;</code></a> 엘리먼트는 SVG <a href="/ko/docs/Web/SVG/Tutorial/Basic_Shapes">기본 도형</a> 라이브러리에서 가장 강력한 엘리먼트이다. 선과 곡선, 호 등 다양한 형태를 그릴 수 있다.</p>
+
+<p>패스는 여러 개의 직선과 곡선을 합쳐서 복잡한 도형을 그릴 수 있게 해준다. 직선으로만 이루어진 복잡한 도형은 <a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes#Polyline">polylines</a>으로도 그릴 수 있지만, 곡선을 묘사할 때 polylines은 패스로 그린 도형에 비해 더 많은 직선이 필요에 확대가 잘 되지 않을 수 있다. 그렇기에 SVG를 그릴 때 패스에 대해 이해하는 것은 매우 중요하다고 할 수 있다. 복잡한 패스를 XML 편집기 또는 일반적인 텍스트 에디터로 그리는 것은 권장하지 않지만, SVG가 표시될 때 문제점을 찾고 고치는 데는 충분히 도움이 될 것이다.</p>
+
+<p>패스의 모양은 {{ SVGAttr("d") }} 속성 하나로 정의된다(<a href="/en-US/docs/">basic shapes</a> 참조). <code>"d"</code> 속성은 여러 개의 명령어와 그 파라미터들로 이루어진다.</p>
+
+<p>각각 명령은 특정 알파벳으로 시작한다. 예를 들면 현재 그려지는 위치를 XY 좌표계의 (10, 10)으로 이동할 때 "Move To" 명령을 사용하게 되는데, 이 명령은 알파벳 M으로 호출한다. SVG 처리기가 이 문자를 읽게 되면 다른 위치로 이동하라는 명령으로 이해하게 된다. 즉, (10, 10)으로 이동하려면 명령어 "M 10 10"을 쓰면 된다. 이후에 처리기는 다음 명령어를 읽기 시작한다.</p>
+
+<p>모든 명령어는 2가지 변형이 존재하는데, 알파벳이 <strong>대문자</strong>일 경우(예를 들면 대문자 M), 뒤따르는 좌표는 페이지의 절대 좌표를 참조하며, <strong>소문자</strong> 알파벳(m)일 경우 마지막 위치에 대한 상대적 좌표로 참조된다.</p>
+
+<p>"d" 속성의 좌표는<strong> 절대 단위가 붙지 않으며,</strong> 패스의 위치나 형태가 어떻게 변형될 수 있는지는 나중에 배우도록 한다.</p>
+
+<h2 id="선(Line)_명령어">선(Line) 명령어</h2>
+
+<p><code>&lt;path&gt;</code> 노드에는 다섯 개의 선 명령어가 있다. 이름에서 알 수 있듯이 각각의 명령어는 두 점 사이에 선을 그리는 역할을 한다. 첫 번째 명령어는 'Move To(이동하기)' 혹은 'M' 이다. 이 명령어는 두 개의 파라미터로 x와 y 좌표를 받는다. 그리기 커서가 이미 페이지의 다른 곳에 있었더라도 두 점 사이에 점이 그려지지는 않는다. 'Move To' 명령어는 다음과 같이 패스의 맨 처음에 와서 그리기를 시작할 위치를 지정한다:</p>
+
+<pre> M x y
+</pre>
+
+<p>혹은</p>
+
+<pre> m dx dy</pre>
+
+<p>아래의 예제에서는 좌표 (10,10)에만 점을 찍었다. 일반적으로 패스를 그릴 때는 이 점이 나타나지 않는다는 점에 주의해야 한다.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"&gt;
+
+ &lt;path d="M10 10"/&gt;
+
+ &lt;!-- 점 --&gt;
+ &lt;circle cx="10" cy="10" r="2" fill="red"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>선을 그리는 명령어는 세 가지가 있다. 가장 일반적인 것은 'L'이라 부르는 "Line To(선 그리기)" 명령어이다. L 명령어는 x, y라는 두 개의 파라미터를 받아서 현재 위치에서 새 위치로 선을 긋는다.</p>
+
+<pre> L x y (혹은 l dx dy)
+</pre>
+
+<p>가로선과 세로선을 그리는 축약 명령어도 있다. 'H'는 가로선을 그리고, 'V'는 세로선을 그릴 수 있다. 두 명령어는 한 좌표축으로만 이동하므로 하나의 파라미터만을 받는다.</p>
+
+<pre> H x (혹은 h dx)
+ V y (혹은 v dy)
+</pre>
+
+<p>도형 그리기부터 시작해 보자. 사각형을 그려볼 텐데(<code>&lt;rect&gt;</code>를 이용해 쉽게 그릴 수도 있다), 시작점부터 가로, 세로선도 함께 사용되었다.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"&gt;
+
+ &lt;path d="M10 10 H 90 V 90 H 10 L 10 10"/&gt;
+
+ &lt;!-- 점 --&gt;
+ &lt;circle cx="10" cy="10" r="2" fill="red"/&gt;
+ &lt;circle cx="90" cy="90" r="2" fill="red"/&gt;
+ &lt;circle cx="90" cy="10" r="2" fill="red"/&gt;
+ &lt;circle cx="10" cy="90" r="2" fill="red"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>'Z'라는 "Close Path(패스 닫기)" 명령어를 통해 쉽게 패스를 마무리할 수 있다. 이 명령어는 현 위치에서 시작점으로 직선을 그린다. 항상은 아니지만 패스의 끝에 자주 쓰인다. 대문자와 소문자 사이의 차이는 없다.</p>
+
+<pre> Z (혹은 z)
+</pre>
+
+<p>위 코드를 짧게 줄여보면:</p>
+
+<pre class="brush: xml">&lt;path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/&gt;
+</pre>
+
+<p>위의 형태를 상대좌표로도 표현해볼 수 있다. 상대좌표 명령어는 앞서 기술된 바와 같이 소문자로 되어 있는 명령어인데, 패스를 움직일 때 정확한 위치를 지정해주는 것이 아니라 현재 위치로부터 얼마나 움직여야 하는지를 기술해준다. 예를 들면 위 80x80 상자를 아래와 같이 표현할 수 있다.</p>
+
+<pre class="brush: xml">&lt;path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/&gt;
+</pre>
+
+<p>여기서 패스는 (10,10)에서 시작하여 수평으로 80포인트<strong>만큼 오른쪽</strong>으로 움직이고 수직으로 80포인트<strong>만큼 아래로</strong> 이동하고 다시 시작점으로 이동하게 된다.</p>
+
+<p>위 예제의 모양을 만드는 데는 &lt;polygon&gt; 태그나 &lt;polyline&gt; 태그가 더 간편해보일 수 있지만, 패스는 SVG를 그릴 때 자주 사용되므로 개발자 입장에서 더 편할 수도 있다. 성능 면에서는 둘 모두 비슷비슷하니, 편한 것으로 사용하자.</p>
+
+<h2 id="곡선_(Curve)_명령어">곡선 (Curve) 명령어</h2>
+
+<p>부드러운 곡선을 그릴 수 있는 세 가지 명령어가 있다. 이 중 두 가지는 '베지어 곡선'이며, 나머지 하나는 원의 조각인 '호'이다. 베지어 곡선은 아마 일러스트레이터나 포토샵, 잉크스케이프 등의 벡터 그래픽 기반의 툴을 통해서 경험해봤을 것이다. 베지어 곡선의 수학적 배경은 <a class="external" href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">위키피디아</a>를 참조하길 바란다. 베지어 곡선의 종류는 무한하지만, 패스 엘리먼트에서는 가장 간단한 두 종류만을 지원한다. 하나는 'C'라고 부르는 3차(Cubic) 베지어 곡선이고, 다른 하나는 'Q'로 사용되는 2차(Quadratic) 베지어 곡선이다.</p>
+
+<h3 id="베지어_곡선">베지어 곡선</h3>
+
+<p>3차 베지어 곡선인 'C'는 조금 복잡한 곡선이다. 3차 베지어 곡선은 선을 잇는 두 점에 하나씩 제어점을 가지고 있다. 그러므로 3차 베지에 곡선을 그리려면 총 세 개의 좌표가 필요하다.</p>
+
+<pre> C x1 y1, x2 y2, x y (혹은 c dx1 dy1, dx2 dy2, dx dy)
+</pre>
+
+<p>마지막으로 지정된 좌표 (x, y)는 곡선의 끝점이다. 나머지 두 개는 제어점이며, 첫 번째 제어점은 (x1, y1), 두 번째 제어점은 (x2, y2)이다. 제어점은 기본적으로 시작점과 끝점에서 곡선의 방향을 기술한다. 베지어 함수는 각 제어점의 방향을 이용해 부드러운 곡선을 만드는 기능을 한다.</p>
+
+<p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+
+ &lt;path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/&gt;
+ &lt;path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/&gt;
+ &lt;path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/&gt;
+ &lt;path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/&gt;
+ &lt;path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/&gt;
+ &lt;path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/&gt;
+ &lt;path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/&gt;
+ &lt;path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/&gt;
+ &lt;path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>위 예제에서는 아홉 개의 베지어 곡선을 그린다. 왼쪽으로 갈수록 곡선이 수평에 가까워지고, 오른쪽으로 갈수록 제어점이 원점에서 멀어진다. 여기서 주목해야 할 점은 곡선이 첫 번째 제어점 방향으로 시작한 다음, 두 번째 제어점 방향으로 구부러지고 있다는 것이다.</p>
+
+<p>여러 베지어 곡선을 연결하여 확장된 곡선 형태를 만들 수도 있다. 한 선의 제어점을 다른 선의 제어점과 반대 방향으로 그어서 완만한 경사를 만들어야 할 때가 많은데, 이 경우에는 간단한 형태의 3차 베지어 곡선 명령어인 'S' (혹은 's')를 사용해서 구현할 수 있다.</p>
+
+<pre> S x2 y2, x y (혹은 s dx2 dy2, dx dy)
+</pre>
+
+<p><code>S</code>는 위와 같은 형태의 곡선을 그리지만, 다른 <code>S</code>나 <code>C</code> 명령어 다음에 올 경우 첫 번째 제어점은 이전에 사용했던 제어점을 뒤집은 것으로 간주된다. <code>S</code> 명령어가 다른 <code>S</code>나 <code>C</code> 명령어 다음에 오지 않을 경우에는 현재 커서 위치가 첫 번째 제어점으로 사용되며, 이 경우에 그려지는 결과는 Q 명령어로 같은 파라미터를 사용해서 그린 결과와 같게 된다. 아래에 이 명령어의 예제가 있으며, 왼쪽의 미리보기에서 패스에 명시적으로 표시된 제어점은 빨간색, 생략된 제어점은 파란색으로 표시한다.</p>
+
+<p><img alt="ShortCut_Cubic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10405/ShortCut_Cubic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>3차 베지어 곡선보다 간단한 다른 형태의 곡선은 'Q'라고 부르는 2차 베지어 곡선이며, 하나의 제어점이 시작점과 끝점의 방향을 모두 결정한다. 이 명령어는 매개변수로 제어점과 곡선의 끝점 2개를 받는다.</p>
+
+<pre> Q x1 y1, x y (혹은 q dx1 dy1, dx dy)
+</pre>
+
+<p><img alt="Quadratic Bézier with grid" class="internal" src="https://mdn.mozillademos.org/files/10403/Quadratic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>3차 베지어 곡선과 같이 2차 베지어 곡선을 연결하는 단축 명령어가 있으며, T라고 부른다.</p>
+
+<pre> T x y (혹은 t dx dy)
+</pre>
+
+<p>이 축약 명령어는 이전에 사용한 제어점으로부터 새로운 제어점을 만들어낸다. 즉, 처음에 제어점 하나만을 기술하면 끝점만을 계속 이어서 꽤 복잡한 도형을 만들 수 있다.</p>
+
+<div class="note">
+<p>Q나 T 명령어 다음에 올 때만 적용된다. 그렇지 않을 경우 제어점은 시작점의 좌표로 간주되며, 직선만 그릴 수 있게 된다.</p>
+</div>
+
+<p><img alt="Shortcut_Quadratic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10407/Shortcut_Quadratic_Bezier_with_grid.png" style="float: right; height: 158px; width: 188px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>두 종류의 곡선이 비슷한 결과를 만들어내긴 하지만, 3차 곡선의 경우 모양을 더 자유롭게 수정할 수 있다. 둘 중 어느 것이 좋은지는 그때그때 다르며, 선 모양이 얼마나 대칭적인지에 따라 달라진다.</p>
+
+<h3 id="Arcs" name="Arcs">원호</h3>
+
+<p>SVG로 그릴 수 있는 다른 형태의 곡선으로는 A라고 부르는 호(arc)가 있다. 호는 원이나 타원의 일부분을 말한다. x, y축 반지름이 주어졌을 때, (두 점이 충분히 가깝다고 가정할 때) 두 점을 연결할 수 있는 타원은 2개가 있으며, 각각의 타원에서 두 점을 잇는 경로 또한 2개씩 있기 때문에 어떤 상황에서든 네 종류의 호를 그릴 수 있다. 이러한 성질 때문에 호 명령어는 꽤 많은 파라미터를 받는다:</p>
+
+<pre> A rx ry x축-회전각 큰-호-플래그 쓸기-방향-플래그 x y
+ a rx ry x축-회전각 큰-호-플래그 쓸기-방향-플래그 dx dy
+</pre>
+
+<p>A 명령어는 일단 x축, y축 반지름을 매개변수로 받는다. 혹시 필요하다면 <a href="/ko/docs/Web/SVG/Element/ellipse">ellipse</a> 문서에서 두 매개변수가 어떻게 작동하는지 확인해볼 수 있다. 세 번째 매개변수는 호의 회전각을 기술한다. 이는 아래 예제에서 잘 확인할 수 있다.</p>
+
+<p><img alt="SVGArcs_XAxisRotation_with_grid" class="internal" src="https://mdn.mozillademos.org/files/10409/SVGArcs_XAxisRotation_with_grid.png" style="float: right; height: 201px; width: 200px;"></p>
+
+<pre class="brush: xml">&lt;svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;path d="M10 315
+ L 110 215
+ A 30 50 0 0 1 162.55 162.45
+ L 172.55 152.45
+ A 30 50 -45 0 1 215.1 109.9
+ L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>이 예제는 페이지를 대각선으로 가로질러 이동하는 패스인데, 그 중간에 두 개의 타원형 호가 절단되어 있다(x축 반지름 = 30, y축 반지름 = 50). 첫 번째는 x축 회전각이 0이므로 호의 기준이 되는 타원(회색으로 표시)은 위아래로 똑바로 서 있다. 두 번째 호는 x축 회전각이 -45도이므로 회전을 해서 예제에서 보이는 것처럼 타원의 단축과 패스 방향이 나란해졌다.</p>
+
+<p>위에서 언급한 네 가지 경로는 이어지는 두 개의 매개변수 플래그에 의해 결정된다. 앞서 언급했듯이, 두 점을 잇는 타원도 2개, 각각 취할 수 있는 방향도 2개이므로 모두 네 가지 경로가 가능하다. 첫 번째 인수는 큰 호 플래그(large-arc-flag)이며, 중심각이 180도 이상이 될지를 결정한다. 결국, 이 플래그는 호가 주어진 원의 어느 방향을 따라 돌지를 결정한다. 두 번째 인수는 쓸기 방향 플래그(sweep-flag)이며, 호가 이동해야 할 각이 음인지 양인지를 결정한다. 이 각은 본질적으로 두 개의 원 중 어느 쪽을 따를지를 결정한다. 아래 예는 네 가지 가능한 조합을 각 사례별로 두 개의 원과 함께 표시하고 있다.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="325" height="325" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;path d="M80 80
+ A 45 45, 0, 0, 0, 125 125
+ L 125 80 Z" fill="green"/&gt;
+ &lt;path d="M230 80
+ A 45 45, 0, 1, 0, 275 125
+ L 275 80 Z" fill="red"/&gt;
+ &lt;path d="M80 230
+ A 45 45, 0, 0, 1, 125 275
+ L 125 230 Z" fill="purple"/&gt;
+ &lt;path d="M230 230
+ A 45 45, 0, 1, 1, 275 275
+ L 275 230 Z" fill="blue"/&gt;
+&lt;/svg&gt;</pre>
+
+<p><span id="result_box" lang="ko"><span>마지막 두 개의 매개변수는 호가 끝나는 x와 y 좌표를 지정한다. </span><span>호는 도면에서 원 또는 타원 조각을 쉽게 만들 수 있는 방법이다. </span><span>예를 들어 원그래프는 각 조각마다 다른 호가 필요하다.</span></span></p>
+
+<p>원을 한 바퀴 도는 패스의 경우 시작점과 끝점이 같으므로 선택할 수 있는 원이 무한히 있으며, 그러므로 실제 패스가 정의되지 않는다. 이때는 시작점과 끝점을 살짝 비뚤어지게 배치하고 이 둘을 다른 패스 선으로 마저 이음으로써 비슷하게 만들 수 있지만, 이때는 실제 원이나 타원 노드를 쓰는 것이 쉬울 때가 많다.</p>
+
+<p><a href="/ko/docs/Web/HTML/Canvas">캔버스</a>에서 SVG로 넘어오는 사람에게는 호가 가장 배우기 어려울 수도 있지만, 그런 만큼 강력하기도 하다. 다음 반응형 예제를 보면 SVG 호의 개념을 이해하는 데 도움이 될 것이다. <a href="http://codepen.io/lingtalfi/pen/yaLWJG">http://codepen.io/lingtalfi/pen/yaLWJG</a> (크롬과 파이어폭스로만 테스트했으므로 일부 브라우저에서 동작하지 않을 수 있음)</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>
diff --git a/files/ko/web/svg/tutorial/patterns/index.html b/files/ko/web/svg/tutorial/patterns/index.html
new file mode 100644
index 0000000000..025c9ad3c8
--- /dev/null
+++ b/files/ko/web/svg/tutorial/patterns/index.html
@@ -0,0 +1,72 @@
+---
+title: 패턴
+slug: Web/SVG/Tutorial/Patterns
+tags:
+ - 패턴
+translation_of: Web/SVG/Tutorial/Patterns
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}</p>
+
+<h2 id="패턴">패턴</h2>
+
+<p>패턴은 SVG에 사용할 보다 복잡한 채움 형태의 하나다.  또한 강력하다, 그래서 관련해서 얘기하고 적어도 기본을 익히는 것은 가치가 있다. 색퍼짐(gradients)처럼, 이 {{SVGElement('pattern')}} 요소도 SVG 파일의 <code>&lt;defs&gt;</code> 섹션에 놓여야 한다.</p>
+
+<pre class="brush: html">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+    &lt;linearGradient id="Gradient1"&gt;
+      &lt;stop offset="5%" stop-color="white"/&gt;
+      &lt;stop offset="95%" stop-color="blue"/&gt;
+    &lt;/linearGradient&gt;
+    &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"&gt;
+      &lt;stop offset="5%" stop-color="red"/&gt;
+      &lt;stop offset="95%" stop-color="orange"/&gt;
+    &lt;/linearGradient&gt;
+
+    &lt;pattern id="Pattern" x="0" y="0" width=".25" height=".25"&gt;
+      &lt;rect x="0" y="0" width="50" height="50" fill="skyblue"/&gt;
+      &lt;rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/&gt;
+      &lt;circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+    &lt;/pattern&gt;
+  &lt;/defs&gt;
+
+  &lt;rect fill="url(#Pattern)" stroke="black" width="200" height="200"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('Patterns','220','220','/files/725/SVG_Pattern_Example.png') }}</p>
+
+<p>패턴 요소 안에는 앞서 포함시킨 다른 기본 도형(shape)의 뭐라도 포함시킬 수 있다. 그리고 그것 각각에 앞서 배운 색퍼짐(gradients)이나 투명(opacity) 등으로 스타일을 줄 수 있다. 여기서 우리는 두개의 사각형(둘은 겹쳐 있고, 하나가 다른 것보다 2배 크기다. 이것이 패턴 전체를 채운다)과 하나의 동그라미를 그려 넣었다.</p>
+
+<p>패턴 관련 복잡한 작업이 단위 체계와 그 크기를 정하는 일이다. 위 예제에서, 우리는 패턴의 <code>폭(width)</code>과 <code>높이(height)</code> 속성을 정의했다. 이것들은 반복되는 패턴들이 서로 얼마나 떨어지는지를 나타내는 값이다. 이 사각형의 시작위치가 도면의 어딘가로부터 원하는 만큼 밀려나도록 하는 <code>x</code>와 <code>y</code> 속성도 가능한다. 이들이 여기에 사용된 이유는 아래에서 설명한다.</p>
+
+<p>패턴에도 앞서 봤던 <code>gradientUnits</code>같은 속성이 있다. <code>patternUnits</code>는 단위를 명시한다. 기본값은 마찬가지로 "objectBoundingBox"이다. 그래서 패턴이 적용될 객체의 폭/높이가 1로 표현된다. 그러므로 이 경우, 폭과 높이가 0.25로 설정되었으므로 우리가 원한 것은 수평과 수직으로 패턴이 4번 반복되는 것이다. 그 말은 패턴의 크기는 전체 박스 크기의 단지 0.25만큼이라는 것이다.</p>
+
+<p>색퍼짐(gradients)과 달리 패턴은 두번째 속성인 <code>patternContentUnits</code>을 가진다. 이것은 패턴 요소 내부의 기본 도형에 적용되는 단위 체계다. 기본값은 "userSpaceOnUse"로 <code>patternUnits</code> 속성과 반대다. 이 말은 이들 속성들(<code>patternContentUnits</code>과 <code>patternUnits</code>)을 따로 지정하지 않으면, 우리가 패턴 내부에 그리는 도형들은 패턴 요소가 사용하는 것과 다른 좌표 체계로 그려진다는 것이다. 이것은 직접 작성할 때 살짝 혼란스러울 수 있다는 것이다. 위 예제에서 이 일을 제대로 하려면, 우리의 박스 크기(200픽셀)와 우리가 수평과 수직으로 4번 반복되기를 원한다는 것을 감안해야 한다. 이 말은 각 패턴은 50x50의 정사각형이라는 것이다. 그래서 패턴 안, 두개의 사각형과 하나의 동그라미는 50x50 박스에 맞는 크기로 됐던 것이다. 이 박스 바깥에 그려지는 것들은 그게 뭐든 보이지 않을 것이다. 이 패턴은 또한 10 픽셀 만큼 밀려나야 한다 그래서 이것은 우리의 상자 왼쪽 위에서 시작할 것이다. 그래서 패턴의 x와 y 속성은 10/200 = 0.05로 조정 되어져야 한다.<br>
+ (역주: 예제의 x, y는 0인데, 설명은 계속 10인 것처럼 하고 있다. 뭔가 오류가 있는 것 같다)</p>
+
+<p>여기서 주의사항은 객체가 크기를 바꾸면 패턴도 그에 맞게 조정되지만, 그 내부는 그렇지 않다는 거다. 그래서 우리는 여전히 4번 반복된 패턴을 가지겠지만 내부의 객체들은 같은 크기를 유지할 것이고 그들 간에 커다란 빈 공간을 직면할 것이다. <code>patternContentUnits</code> 속성을 바꿔서 우리는 모든 요소가 같은 단위 체계에 놓이도록 할 수 있다:</p>
+
+<pre class="brush: xml"> &lt;pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"&gt;
+ &lt;rect x="0" y="0" width=".25" height=".25" fill="skyblue"/&gt;
+ &lt;rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/&gt;
+ &lt;circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+ &lt;/pattern&gt;
+</pre>
+
+<p>이제 패턴 내용물은 패턴과 같은 단위 체계라, 패턴이 바른 위치에서 시작하게 하려면 시작위치를 밀어내지 않아야 한다. 그리고 객체의 크기가 더 커지면 패턴은 자동적으로 조정되어 같은 수의 객체와 같은 회수로 반복될 것이다. 이것은 객체의 크기가 변했을 때, 패턴의 크기를 그대로 유지하면서 그냥 반복을 더해서 박스를 채우는 "userSpaceOnUse" 체계와 대조적이다.</p>
+
+<p><span id="result_box" lang="ko"><span>Gecko에서 반지름이 0.075보다 작은 동그라미를 </span></span><span lang="ko"><span>그리는 데 어려움이 있다(현재 이것이 패턴 요소에서의 버그인지 아닌지는 알 수 없다).</span> <span>이 문제를 해결하려면 </span>꼭 해야 하는 것이 아니라면 <span>"objectBoundingBox" 단위에서 그리는 것을 피하는 것이 아마 최선일 것이다.</span></span></p>
+
+<p><span id="result_box" lang="ko"><span>어느 것도 패턴을 생각할 때 일반적으로 생각하는 것이 아닙니다.</span> <span>패턴은 보통 크기가 정해지고, 객체의 모양과는 독립적으로 반복됩니다.</span> <span>이런 식으로 만들려면 패턴과 내용 둘다 현재의 사용자 공간에서 그려져야 한다. 객체를 다음처럼 하고, 도형을 바꾸지 않는다.</span></span></p>
+
+<pre class="brush: xml"> &lt;pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"&gt;
+ &lt;rect x="0" y="0" width="50" height="50" fill="skyblue"/&gt;
+ &lt;rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/&gt;
+ &lt;circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+ &lt;/pattern&gt;
+</pre>
+
+<p>물론 나중에 개체 크기를 변경해도 패턴의 크기는 조정되지 않는다. 위의 세 가지 예는 아래 높이를 300px로 약간 늘린 직사각형에 보이고 있지만 이게 완벽한 그림이 아니고, 시스템에 따라 가능한 다른 요인이 있음을 밝혀 둔다.</p>
+
+<p><img alt="Image:SVG_Pattern_Comparison_of_Units.png" class="internal" src="/@api/deki/files/349/=SVG_Pattern_Comparison_of_Units.png"></p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}</p>
diff --git a/files/ko/web/svg/tutorial/svg_image_tag/index.html b/files/ko/web/svg/tutorial/svg_image_tag/index.html
new file mode 100644
index 0000000000..1fa061c57f
--- /dev/null
+++ b/files/ko/web/svg/tutorial/svg_image_tag/index.html
@@ -0,0 +1,35 @@
+---
+title: SVG 이미지 요소
+slug: Web/SVG/Tutorial/SVG_Image_Tag
+tags:
+ - 이미지
+ - 학습서
+translation_of: Web/SVG/Tutorial/SVG_Image_Tag
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p>
+
+<p>SVG {{ SVGElement("image") }} 요소는 비트맵 이미지를 SVG 객체와 함께 표시할 수 있도록 해 준다.</p>
+
+<p>이 기본 예제에서, {{ SVGAttr("href") }} 속성으로 참조된 a .jpg 이미지는 SVG 객체 내부에 표시될 것이다:</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+&lt;svg width="5cm" height="4cm" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"&gt;
+ &lt;image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>다음 몇가지를 주의하라(<a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElement" title="http://www.w3.org/TR/SVG/struct.html#ImageElement">W3 specs</a> 참조):</p>
+
+<ul>
+ <li>
+ <p>x 또는 y 속성을 설정하지 않으면 0이 된다.</p>
+ </li>
+ <li>
+ <p>height 또는 width 속성을 설정하지 않으면, 0이 된다.</p>
+ </li>
+ <li>height 또는 width 속성이 0이면 이미지는 표시되지 않을 것이다.</li>
+</ul>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p>
diff --git a/files/ko/web/svg/tutorial/svg_in_html_introduction/index.html b/files/ko/web/svg/tutorial/svg_in_html_introduction/index.html
new file mode 100644
index 0000000000..4e06135569
--- /dev/null
+++ b/files/ko/web/svg/tutorial/svg_in_html_introduction/index.html
@@ -0,0 +1,73 @@
+---
+title: SVG In HTML Introduction
+slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction
+tags:
+ - SVG
+translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction
+---
+<p> </p>
+<h3 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h3>
+<p>이 문서와 관련된 예제는 form의 배경 그림을 제공하기 위해서 inline <a href="ko/SVG">SVG</a>를 어떻게 사용하는지를 보여줍니다. 정규 XHTML을 작성하는 것과 같은 방식으로 그 그림들을 조작하기 위해 <a href="ko/JavaScript">JavaScript</a>와 <a href="ko/CSS">CSS</a>의 사용법도 설명합니다. 예제들은 XHTML(HTML이 아님)과 SVG integration을 지원하는 웹브라우져에서만 동작함을 유의하시기 바랍니다.</p>
+<h3 id=".EC.86.8C.EC.8A.A4" name=".EC.86.8C.EC.8A.A4">소스</h3>
+<p>예제에 대한 소스는 <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml">여기</a>:</p>
+<pre>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+&lt;head&gt;
+ &lt;title&gt;XTech SVG Demo&lt;/title&gt;
+ &lt;style&gt;
+ stop.begin { stop-color:yellow; }
+ stop.end { stop-color:green; }
+ body.invalid stop.end { stop-color:red; }
+ #err { display:none; }
+ body.invalid #err { display:inline; }
+ &lt;/style&gt;
+ &lt;script&gt;
+ function signalError() {
+ document.getElementById('body').setAttribute("class", "invalid");
+ }
+ &lt;/script&gt;
+&lt;/head&gt;
+&lt;body id="body"
+ style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"&gt;
+ &lt;form&gt;
+ &lt;fieldset&gt;
+ &lt;legend&gt;HTML Form&lt;/legend&gt;
+ &lt;p&gt;&lt;label&gt;Enter something:&lt;/label&gt;
+ &lt;input type="text"/&gt;
+ &lt;span id="err"&gt;Incorrect value!&lt;/span&gt;&lt;/p&gt;
+ &lt;p&gt;&lt;button onclick="signalError();"&gt;Activate!&lt;/button&gt;&lt;/p&gt;
+ &lt;/fieldset&gt;
+ &lt;/form&gt;
+ &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
+ style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"&gt;
+ &lt;linearGradient id="gradient"&gt;
+ &lt;stop class="begin" offset="0%"/&gt;
+ &lt;stop class="end" offset="100%"/&gt;
+ &lt;/linearGradient&gt;
+ &lt;rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /&gt;
+ &lt;circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /&gt;
+ &lt;/svg&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+<h3 id="Discussion" name="Discussion">Discussion</h3>
+<p>위 페이지는 주로 정규 XHTML, CSS, JavaScript입니다. 다만 흥미로운 부분은 위 페이지에 포함되어 있는 &lt;svg&gt;원소입니다. 이 원소와 그 자식들은 SVG 네임스페이스 상에서 선언되어 있습니다. 이 원소는 하나의 색변화도(그라데이션)와 이 색변화도에 따라 내부가 채워진 두개의 도형을 포함하고 있습니다. 색변화도의 양끝의 색깔은 CSS에서 지정된 색을 가집니다. 만약 사용자가 form에 잘못된 내용을 입력하였다면 스크립트는 &lt;body&gt;태그에 <code>invalid</code>속성을 설정하고 스타일 규칙은 색변화도의 <code>end-stop</code>색을 빨간색으로 변경합니다. (나머지 스타일 규칙에 따라 에러 메시지가 출력됩니다.)</p>
+<p>이 방식은 수고면에서 다음과 같은 특징을 가집니다:</p>
+<ul>
+ <li>우리는 기존의 웹사이트들에서 이전부터 사용되어온 정규 XHTML의 form을 사용했으며 여기에 매력적이고 인터랙티브한 배경그림까지도 추가했습니다.</li>
+ <li>이 방식은 SVG를 지원하지 않는 웹브라우져와 하위 호완성을 가집니다; 단순히 이들 웹브라우져에서는 배경그림만 없을 뿐입니다.</li>
+ <li>단순한 방식이며 아주 잘 동작합니다.</li>
+ <li>그림은 동적으로 필요한 크기에 따라 영리하게 스스로 크기를 변경합니다.</li>
+ <li>HTML과 SVG 모두에게 적용될 수 있는 선언적 스타일 규칙들을 가질 수 있습니다.</li>
+ <li>같은 스크립트가 HTML과 SVG 모두를 조작할 수 있습니다.</li>
+ <li>문서는 완전히 표준에 기반하고 있습니다.</li>
+</ul>
+<h3 id="Details" name="Details">Details</h3>
+<p><code>viewBox</code>속성은 SVG 그림의 좌표계에 상대적인 논리적 좌표계를 생성합니다. 이 경우 그림은 100x100크기의 뷰포트에 놓여집니다.</p>
+<p><code>preserveAspectRatio</code>속성은 주어진 크기내에 그림을 넣을때 그림의 높이나 폭을 최대로 해서 주어진 크기에 맞게 그림을 맞추고 넘어가는 부분들을 잘라냄으로써 그림의 비율이 보존되도록 지정합니다.</p>
+<p><code>style</code>속성은 SVG 원소를 form의 배경에 고정시킵니다.</p>
+<h3 id="Related_Links" name="Related_Links">Related Links</h3>
+<ul>
+ <li>Another SVG in XHTML example: <a href="ko/SVG/Namespaces_Crash_Course/Example">A swarm of motes</a></li>
+ <li><a class="external" href="http://svg-whiz.com/wiki/index.php?title=Inline_SVG">Inline SVG</a> page on SVG wiki</li>
+</ul>
+<p>{{ languages( { "pl": "pl/SVG_w_XHTML_-_Wprowadzenie", "fr": "fr/Introduction_\u00e0_SVG_dans_HTML", "ja": "ja/SVG_In_HTML_Introduction" } ) }}</p>
diff --git a/files/ko/web/svg/tutorial/기본_도형/index.html b/files/ko/web/svg/tutorial/기본_도형/index.html
new file mode 100644
index 0000000000..8169e4c890
--- /dev/null
+++ b/files/ko/web/svg/tutorial/기본_도형/index.html
@@ -0,0 +1,141 @@
+---
+title: 기본 도형
+slug: Web/SVG/Tutorial/기본_도형
+translation_of: Web/SVG/Tutorial/Basic_Shapes
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</p>
+
+<p>SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적은 이름에서 명백하게 알 수 있다. 도형들의 위치와 크기를 지정하는 몇몇 속성들은 주어지지만, 여기에서 다뤄지지 않는 다른 속성들과 함께 더 정확하고 완전한 설명이 있는 레퍼런스를 첨부해 두겠다. 그러나, 대부분의 SVG 문서에서 사용되기 때문에 몇 가지 소개를 해줘야한다.</p>
+
+<h2 id="Basic_shapes" name="Basic_shapes">기본적인 도형들</h2>
+
+<p>도형을 삽입하기 위해서는 당신은 문서안에 요소를 만들어야 한다. 서로다른 요소들은 다른 모양에 해당하며, 서로 다른 속성들을 사용하여 해당 모양의 크기와 위치를 나타낸다. 일부는 다른 모양으로 생성 될 수 있다는 점에서 약간 중복되지만, 사용자의 편의를 위해 SVG 문서를 가능한 짧고 가독성있게 유지하기 위해서 모두 제공된다. 모든 기본 도형은 오른쪽 이미지에 표시된다. 기본 도형을 생성하는 코드는 다음과 같다:</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/359/=Shapes.png" style="float: right;"></p>
+
+<pre class="brush:xml">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+
+ &lt;rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/&gt;
+ &lt;rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/&gt;
+
+ &lt;circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/&gt;
+ &lt;ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/&gt;
+
+ &lt;line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/&gt;
+ &lt;polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
+ stroke="orange" fill="transparent" stroke-width="5"/&gt;
+
+ &lt;polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
+ stroke="green" fill="transparent" stroke-width="5"/&gt;
+
+ &lt;path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/&gt;
+&lt;/svg&gt;</pre>
+
+<div class="note"><strong>Note:</strong> <code>stroke</code>, <code>stroke-width</code> 그리고 <code>fill</code> 속성들은 튜토리얼 뒤쪽에서 설명한다.</div>
+
+<h3 id="Rectangles" name="Rectangles">Rectangles 사각형</h3>
+
+<p><a href="/en-US/Web/SVG/Element/rect" title="en-US/Web/SVG/Element/rect">rect</a> 요소는 당신이 생각하는 것과 일치하며 화면에 사각형을 그린다. 여기에는 화면상에서 직사각형의 위치와 모양을 제어하는 6가지 기본 속성만 있다. 앞서 보여준 이미지는 두 개의 rect 요소를 보여주며 약간 중복된다. 오른쪽에 있는 이미지는 rx 와  ry 속성이 설정되어 있어서 모서리가 둥글다. rx 와 ry 가 설정되지 않은 경우에는 기본값 0으로 들어간다.</p>
+
+<pre class="brush:xml">&lt;rect x="10" y="10" width="30" height="30"/&gt;
+&lt;rect x="60" y="10" rx="10" ry="10" width="30" height="30"/&gt;</pre>
+
+<dl>
+ <dt>x</dt>
+ <dd>사각형의 좌측 상단의 x 값을 의미한다.</dd>
+ <dt>y</dt>
+ <dd>사각형의 좌측 상단의 y 값을 의미한다.</dd>
+ <dt>width</dt>
+ <dd>사각형의 폭을 나타낸다.</dd>
+ <dt>height</dt>
+ <dd>사각형의 높이를 나타낸다. </dd>
+ <dt>rx</dt>
+ <dd>사각형의 둥근 꼭짓점의 x 방향으로의 반지름이다.</dd>
+ <dt>ry</dt>
+ <dd>사각형의 둥근 꼭짓점의 y 방향으로의 반지름이다.</dd>
+</dl>
+
+<h3 id="Circle" name="Circle">Circle 원</h3>
+
+<p>당신이 추측한 것 처럼, <a href="/en-US/Web/SVG/Element/circle" title="en-US/Web/SVG/Element/circle">circle</a> 요소는 화면에 원을 그린다. circle 요소에 실제로 적용할 수 있는 속성은 세 가지 뿐이다.</p>
+
+<pre class="brush:xml;gutter:false;">&lt;circle cx="25" cy="75" r="20"/&gt;</pre>
+
+<dl>
+ <dt>r</dt>
+ <dd>원의 반지름을 의미한다.</dd>
+ <dt>cx</dt>
+ <dd>원의 중심 중 x 값을 의미한다.</dd>
+ <dt>cy</dt>
+ <dd>원의 중심 중 y 값을 의미한다.</dd>
+</dl>
+
+<h3 id="Ellipse" name="Ellipse">Ellipse 타원</h3>
+
+<p><a href="/en-US/Web/SVG/Element/ellipse" title="en-US/Web/SVG/Element/ellipse">Ellipse</a>s은 원의 x와 y 반경 (수학자들은 장반경, 단반경 이라고 함)을 개별적으로 확장 할 수 있는 circle 요소의 좀 더 일반적인 형태이다.</p>
+
+<pre class="brush:xml;gutter:false;">&lt;ellipse cx="75" cy="75" rx="20" ry="5"/&gt;</pre>
+
+<dl>
+ <dt>rx</dt>
+ <dd>타원의 x 방향으로의 반지름의 길이를 의미한다.</dd>
+ <dt>ry</dt>
+ <dd>타원의 y 방향으로의 반지름의 길이를 의미한다.</dd>
+ <dt>cx</dt>
+ <dd>타원의 중심 중 x 값을 의미한다.</dd>
+ <dt>cy</dt>
+ <dd>타원의 중심 중 y 값을 의미한다.</dd>
+</dl>
+
+<h3 id="Line" name="Line">Line 선</h3>
+
+<p><a href="/en-US/Web/SVG/Element/line" title="en-US/Web/SVG/Element/line">Line</a>s은 단지 직선이다. line 요소는 선의 시작과 끝 지점을 지정하는 두 점을 속성으로 갖는다.</p>
+
+<pre class="brush:xml;gutter:false;">&lt;line x1="10" x2="50" y1="110" y2="150"/&gt;</pre>
+
+<dl>
+ <dt>x1</dt>
+ <dd>점 1의 x 값이다.</dd>
+ <dt>y1</dt>
+ <dd>점 1의 y 값이다.</dd>
+ <dt>x2 </dt>
+ <dd>점 2의 x 값이다.</dd>
+ <dt>y2</dt>
+ <dd>점 2의 y 값이다.</dd>
+</dl>
+
+<h3 id="Polyline" name="Polyline">Polyline</h3>
+
+<p><a href="/en-US/Web/SVG/Element/polyline" title="en-US/Web/SVG/Element/polyline">Polyline</a>s은 연결된 직선들의 그룹이다. 그 목록(직선들)은 꽤 길어질 수 있기 때문에 모든 포인트가 하나의 속성에 포함된다.</p>
+
+<pre class="brush:xml;gutter:false;">&lt;polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/&gt;</pre>
+
+<dl>
+ <dt>points</dt>
+ <dd>포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다.</dd>
+</dl>
+
+<h3 id="Polygon" name="Polygon">Polygon 다각형</h3>
+
+<p><a href="/en-US/Web/SVG/Element/polygon" title="en-US/Web/SVG/Element/polygon">Polygon</a>s은 점을 연결하는 직선으로 구성된다는 점에서 polyline과 매우 유사하다. 하지만 다각형의 경우, 자동으로 마지막 포인트로부터 첫 번째 포인트로 직선을 만들어서 닫힌 모양을 만든다. 사각형은 다각형의 하나이므로, 융통성있는 사각형을 필요로 하는 경우 polygon 요소를 사용해서 rect 요소를 만들 수 있다.</p>
+
+<pre class="brush:xml;gutter:false;">&lt;polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/&gt;</pre>
+
+<dl>
+ <dt>points</dt>
+ <dd>포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다. 그러면 (2,2)에서 (0,0)으로 최종 직선이 그려져서 다각형이 완성된다.</dd>
+</dl>
+
+<h3 id="Path" name="Path">Path</h3>
+
+<p><a href="/en-US/Web/SVG/Element/path" title="en-US/Web/SVG/Element/path">Path</a> 는 아마 SVG에서 사용할 수 있는 가장 일반적인 형태일 것이다. path 요소를 사용해서 당신은 사각형(둥근 모서리가 있거나 없는), 원, 타원, 폴리라인 및 다각형을 그릴 수 있다. 기본적으로 다른 모든 종류의 모양, 베지에 곡선, 2차원 곡선 등이 가능하다. 그러한 이유로, paths 는 튜토리얼의 <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">the next section</a> 에 들어가지만, 지금은 모양을 제어하는 데 사용되는 단일 속성이 있음을 알려주겠다.</p>
+
+<pre class="brush:xml;gutter:false;">&lt;path d="M 20 230 Q 40 205, 50 230 T 90230"/&gt;</pre>
+
+<dl>
+ <dt>d</dt>
+ <dd>A list of points and other information about how to draw the path. See the <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Paths</a> section for more information.</dd>
+</dl>
+
+<div>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</div>
diff --git a/files/ko/web/svg/tutorial/시작하기/index.html b/files/ko/web/svg/tutorial/시작하기/index.html
new file mode 100644
index 0000000000..8a0b5c82b7
--- /dev/null
+++ b/files/ko/web/svg/tutorial/시작하기/index.html
@@ -0,0 +1,94 @@
+---
+title: 시작하기
+slug: Web/SVG/Tutorial/시작하기
+tags:
+ - SVG
+ - 'SVG:Tutorial'
+ - 초보자
+ - 튜토리얼
+translation_of: Web/SVG/Tutorial/Getting_Started
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p>
+
+<h3 id="A_Simple_Example" name="A_Simple_Example">간단한 예제</h3>
+
+<p>다음의 코드와 같이 간단한 예제로 시작해보겠습니다.</p>
+
+<pre class="brush: xml">&lt;svg version="1.1"
+ baseProfile="full"
+ width="300" height="200"
+ xmlns="http://www.w3.org/2000/svg"&gt;
+
+ &lt;rect width="100%" height="100%" fill="red" /&gt;
+
+ &lt;circle cx="150" cy="100" r="80" fill="green" /&gt;
+
+ &lt;text x="150" y="125" font-size="60" text-anchor="middle" fill="white"&gt;SVG&lt;/text&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>코드를 복사하여 demo1.svg로 저장하고, 파이어폭스 에서 실행해 봅시다. 아래와 같은 화면이 그려질 것입니다.(파이어 폭스 사용자 : <a href="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml">링크</a>)</p>
+
+<p><img alt="svgdemo1.png" class="default internal" src="/@api/deki/files/4928/=svgdemo1.png"></p>
+
+<p>화면이 그려지는 과정은 다음과 같습니다.</p>
+
+<ol>
+ <li>SVG 루트 요소(Element)부터 시작합니다.
+ <ul>
+ <li>DTD기반의 SVG유효성 검사는 해결할 수 있는 것보다 많은 문제를 야기하기 때문에 (X)HTML로 알려진 Doctype 선언은 사용하지 않습니다.</li>
+ <li>다른 유형의 유효성 검사를 위해 SVG버전을 식별하려면 항상 version과 baseProfile 속성(Attribute)을 사용해야 합니다.</li>
+ <li>XML 특수언어(dialect)로서 SVG는 (xmlsn 속성에서) 항상 네임 스페이스(namespace)를 올바르게 바인딩 해야합니다. 자세한 내용은<a href="/en/docs/Web/SVG/Namespaces_Crash_Course"> 네임 스페이스 충돌 과정</a> 페이지를 참조하십시오.</li>
+ </ul>
+ </li>
+ <li>전체 이미지 영역을 포함하는 사각형 &lt;rect /&gt;을 그려 배경을 빨간색으로 설정합니다.</li>
+ <li>빨간색 직사각형의 중앙에 반경 80px의 녹색 원 &lt;circle /&gt;이 그려집니다</li>
+ <li>텍스트 "SVG"가 그려집니다. 각 문자의 내부는 흰색으로 채워집니다. 텍스트는 중심점이 되고자 하는 지점에 앵커를 설정하여 배치됩니다.이 경우 중심점은 녹색 원의 중심에 일치해야합니다. 글꼴 크기와 수직 위치를 미세 조정하여 심미적으로 뛰어난 최종 결과를 얻을 수 있습니다.</li>
+</ol>
+
+<h3 id="SVG_파일의_기본_속성">SVG 파일의 기본 속성</h3>
+
+<ul>
+ <li>가장 먼저 주목해야 할 것은 요소를 렌더링하는 순서입니다. SVG 파일 전체에서 유효한 규칙은, 내용의 <em>위에서 부터 아래로</em> 렌더링된다는 것입니다. 요소는 아래에 위치할수록 더 잘보이게 됩니다.</li>
+ <li>웹의 SVG 파일은 브라우저에 직접 표시되거나 HTML파일에 여러가지 방법을 통해 포함될 수 있습니다:
+ <ul>
+ <li>HTML이 XHTML이고 application/xhtml+xml 유형으로 제공되는 경우 SVG는 XML 소스에 직접 포함될 수 있습니다.</li>
+ <li>HTML이 HTML5이고 브라우저가 HTML5 브라우저를 준수하는 경우 SVG를 직접 삽입 할 수도 있습니다. 그러나 HTML5 사양을 준수하는 데 필요한 구문 변경이 있을 수 있습니다.</li>
+ <li>SVG 파일은 object 요소로 참조 할 수 있습니다:
+ <pre> &lt;object data="image.svg" type="image/svg+xml" /&gt;</pre>
+ </li>
+ <li>마찬가지로 iframe 요소로 사용할 수 있습니다:
+ <pre> &lt;iframe src="image.svg"&gt;&lt;/iframe&gt;</pre>
+ </li>
+ <li>이론적으로, img 요소로 사용될 수 있습니다만 4.0 이전의 Firefox에서는 작동하지 않습니다.</li>
+ <li>마지막으로 SVG는 JavaScript로 동적으로 생성되어 HTML DOM에 삽입 될 수 있습니다. 이는 SVG를 처리 할 수없는 브라우저에서 대체하여 구현할 수 있다는 장점이 있습니다.</li>
+ </ul>
+ 이 주제에 대해 깊이있게 다루기 위해 <a href="/en-US/docs/SVG_In_HTML_Introduction">이 문서</a>를 참조하십시오.</li>
+ <li>SVG에서 크기와 단위를 처리하는 방법에 대해서는 <a href="/en-US/Web/SVG/Tutorial/Positions">다음 페이지</a>에서 설명 할 것입니다.</li>
+</ul>
+
+<h3 id="SVG_File_Types" name="SVG_File_Types">SVG 파일 형식</h3>
+
+<p>SVG 파일은 두 가지 형태로 제공됩니다. 일반 SVG 파일은 SVG 마크업이 포함 된 간단한 텍스트 파일입니다. 이러한 파일의 권장 파일 확장자는 소문자로 ".svg"입니다.</p>
+
+<p>일부 응용 프로그램 (예 : 지리적 응용 프로그램)에 사용될 때 매우 큰 크기의 SVG 파일이 있을 수 있기 때문에 SVG 사양에서는 gzip으로 압축 된 SVG 파일을 허용합니다. 이러한 파일의 권장 파일 확장자는 소문자로 ".svgz"입니다. 하지만 안타깝게도 gzip으로 압축 된 SVG 파일을 Microsoft IIS 서버에서 서비스 할 때 모든 SVG 가능 브라우저(사용자 에이전트)에서 안정적으로 작동하게 하려면 문제가 많습니다. 그리고 Firefox는 로컬 컴퓨터에서 gzip으로 압축 된 SVG를 로드 할 수 없습니다. 웹 서버에 게시 할 때를 제외하고는 gzip으로 압축 된 SVG를 피하십시오 (아래 참조).</p>
+
+<h3 id="A_Word_on_Webservers" name="A_Word_on_Webservers">웹서버 관련 한 마디</h3>
+
+<p>이제 기본 SVG 파일을 만드는 방법에 대해 알아봤으므로 다음 단계는 웹 서버에 업로드하는 것입니다. 이 단계에서는 몇 가지 문제가 있습니다. 보통, SVG 파일의 경우 서버는 다음과 같이 HTTP 헤더를 보내야합니다.</p>
+
+<pre>Content-Type: image/svg+xml
+Vary: Accept-Encoding</pre>
+
+<p>gzip으로 압축 된 SVG 파일의 경우, 서버는 다음과 같이 HTTP 헤더를 보내야합니다.</p>
+
+<pre>Content-Type: image/svg+xml
+Content-Encoding: gzip
+Vary: Accept-Encoding</pre>
+
+<p>네트워크 모니터 패널이나 <a href="http://web-sniffer.net/">web-sniffer.net</a>과 같은 사이트를 사용하여 서버가 SVG 파일과 함께 올바른 HTTP 헤더를 보내고 있는지 확인할 수 있습니다. SVG 파일 중 하나의 URL을 전송하고 HTTP 응답 헤더를 확인해 보십시오. 서버가 위의 값으로 헤더를 보내지 않으면 웹 호스트에 문의해야합니다. 서버에 SVG를 올바르게 구성하도록하는 데 문제가 있으면 직접 할 수있는 방법이있을 수 있습니다. 다양한 간단한 솔루션에 대해서는 w3.org의 <a href="https://www.w3.org/services/svg-server/">서버 구성 페이지</a>를 참조하십시오.</p>
+
+<p>SVG를 사용하는데 있어 서버 구성 오류가 SVG로드에 실패하는 가장 일반적인 이유이기에 확인하십시오. 서버가 SVG 파일을 제공하면서 올바른 헤더를 보내도록 설정되어 있지 않다면 Firefox는 SVG파일의 마크업을 텍스트 또는 인코딩된 의미없는 값으로 표시하거나 뷰어에게 열어 볼 응용 프로그램을 선택하도록 요청할 가능성이 큽니다.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p>
diff --git a/files/ko/web/svg/tutorial/위치/index.html b/files/ko/web/svg/tutorial/위치/index.html
new file mode 100644
index 0000000000..391765175c
--- /dev/null
+++ b/files/ko/web/svg/tutorial/위치/index.html
@@ -0,0 +1,45 @@
+---
+title: 위치
+slug: Web/SVG/Tutorial/위치
+translation_of: Web/SVG/Tutorial/Positions
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p>
+
+<h2 id="The_grid" name="The_grid">그리드</h2>
+
+<p><img alt="" class="internal" src="/@api/deki/files/78/=Canvas_default_grid.png" style="float: right;">모든 요소(Element)에 대해 SVG는 <a href="https://developer.mozilla.org/en/HTML/Canvas">캔버스</a>를 포함한 컴퓨터에서 무언가 그리고자 할때 많이 사용되는 것과 유사한 좌표계 또는 그리드 시스템을 사용합니다. 즉, 문서의 왼쪽 위 모서리는 (0,0)으로 간주되며 한 지점의 위치는 왼쪽 상단 모서리에서 픽셀 단위로 표시되고 X축의 양의 방향은 오른쪽, Y축의  양의 방향은 아래쪽으로 향하게됩니다. 어린시절 배웠던 그래프와는 반대라는 점을 기억하세요. 그러나 이것은 HTML의 요소가 배치되는 것과는 같은 방법입니다 (기본적으로 LTR 문서는 X를 오른쪽에서 왼쪽으로 배치하는 RTL 문서가 아닙니다).</p>
+
+<h4 id="예제">예제:</h4>
+
+<p>아래 요소는</p>
+
+<pre>&lt;rect x="0" y="0" width="100" height="100" /&gt;
+</pre>
+
+<p>왼쪽 상단에서 100px의 정사각형을 정의합니다.</p>
+
+<h3 id="픽셀이란">"픽셀"이란?</h3>
+
+<p>기본적으로 SVG 문서에서 1픽셀은 출력 장치(화면)의 1픽셀에 매핑됩니다. 하지만 이러한 방식만 가능했다면 SVG의 이름에 "확장성(Scalable)"이란 단어가 들어가 있지는 않았겠죠. CSS의 절대 및 상대 글꼴 크기와 매우 흡사하게 SVG는 절대적인 단위 ( "pt"또는 "cm"와 같은 식별자가있는 것)를 정의하고 이것을 사용자 단위(User Unit)로 명칭하며, 이것은 별도의 식별자 없이 숫자 그대로를 사용합니다.</p>
+
+<p>별도로 명시하지 않았다면, 사용자 단위와 화면 단위는 1:1의 비율로 동작합니다. SVG에는 이 비율을 변경하기 위한 몇가지 방법이 있습니다.</p>
+
+<pre>&lt;svg width="100" height="100"&gt;
+</pre>
+
+<p>위 요소는 100x100px 의 SVG 캔버스를 정의합니다. 사용자 단위와 화면 단위는 1:1의 비율로 동작합니다.</p>
+
+<pre>&lt;svg width="200" height="200" <strong>viewBox="0 0 100 100"</strong>&gt;
+</pre>
+
+<p>SVG 캔버스 전체 크기는 200x200 픽셀입니다. 그러나 viewBox속성을 사용하여 (0,0)에서 시작하는 100x100px의 화면을 200x200px의 화면에 출력합니다. 이렇게하면 100x100 단위 영역을 효과적으로 확대하고 이미지를 두 배 크기로 확대 할 수 있습니다.</p>
+
+<p>이러한 요소 혹은 전체 이미지의 사용자 단위와 화면 단위의 매핑을 사용자 좌표계(User coordinate system)이라고 합니다. 스케일링 외에도 회전, 기울이기, 뒤집기가 가능합니다. 기본 사용자 좌표계는 하나의 사용자 픽셀을 하나의 장치 픽셀에 매핑합니다. SVG파일에서 "in"또는 "cm"과 같은 특정 치수는 결과 이미지에서 1:1로 보이도록 계산됩니다.</p>
+
+<p>SVG 1.1 스펙에서는 다음과 같이 인용합니다:</p>
+
+<blockquote>
+<p>[...] 사용자 환경에서 "1px"이 "0.2822222mm" 에 대응한다고 가정했을때(90dpi), SVG는 다음과 같이 처리한다: [...] "1cm"는 "35.43307px"과 같다. (그리고 35.43307 사용자 단위와 같다.)</p>
+</blockquote>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p>