initial commit

8 files changed, 1425 insertions, 0 deletions

diff --git a/files/ko/web/svg/attribute/calcmode/index.html b/files/ko/web/svg/attribute/calcmode/index.html
new file mode 100644
index 0000000000..dd2d0424f7
--- /dev/null
+++ b/files/ko/web/svg/attribute/calcmode/index.html
@@ -0,0 +1,55 @@
+---
+title: calcMode
+slug: Web/SVG/Attribute/calcMode
+translation_of: Web/SVG/Attribute/calcMode
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p>이 속성은 애니메이션의 interpolation 모드를 지정합니다. 기본 모드는 linear 이지만 속성이 linear interpolation을 지원하지 않으면(예: 문자열의 경우) calcMode 속성이 무시되고 discrete interpolation이 사용됩니다. </p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td>Animation value attribute</td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td>discrete | linear | paced | spline</td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#CalcModeAttribute" title="http://www.w3.org/TR/SVG/animate.html#CalcModeAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>discrete</dt>
+ <dd>이것은 애니메이션 함수가 interpolation 없이 하나의 값에서 다음 값으로 점프하도록 지정합니다.</dd>
+ <dt>linear</dt>
+ <dd>값 사이의 단순한 linear interpolation은 애니메이션 함수를 계산하는데 사용됩니다. {{ SVGElement("animateMotion") }}의 경우를 제외하고는 이것은 기본 값입니다.</dd>
+ <dt>paced</dt>
+ <dd>Defines interpolation to produce an even pace of change across the animation. This is only supported for values that define a linear numeric range, and for which some notion of "distance" between points can be calculated (e.g. position, width, height, etc.). If paced is specified, any {{ SVGAttr("keyTimes") }} or {{ SVGAttr("keySplines") }} will be ignored. For {{ SVGElement("animateMotion") }}, this is the default value.</dd>
+ <dt>spline</dt>
+ <dd>cubic Bézier spline에 정의된 시간 함수에 따라 {{ SVGAttr("values") }} 목록의 한 값에서 다음 값으로 interpolation 합니다. spline의 점(point)은 {{ SVGAttr("keyTimes") }} 속성에 정의되고,  각 간격의 제어점은 {{ SVGAttr("keySplines") }} 속성에 정의됩니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h2 id="Elements">Elements</h2>
+
+<p>다음 요소에서 calcMode 속성을 사용할 수 있습니다.</p>
+
+<ul>
+ <li>{{ SVGElement("animate") }}</li>
+ <li>{{ SVGElement("animateColor") }}</li>
+ <li>{{ SVGElement("animateMotion") }}</li>
+ <li>{{ SVGElement("animateTransform") }}</li>
+</ul>
diff --git a/files/ko/web/svg/attribute/cx/index.html b/files/ko/web/svg/attribute/cx/index.html
new file mode 100644
index 0000000000..74197f7843
--- /dev/null
+++ b/files/ko/web/svg/attribute/cx/index.html
@@ -0,0 +1,67 @@
+---
+title: cx
+slug: Web/SVG/Attribute/cx
+translation_of: Web/SVG/Attribute/cx
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p>{{ SVGElement("circle") }}과  {{ SVGElement("ellipse") }}엘리먼트에서 사용될 경우, 본 속성은 엘리먼트의 중심의 x축의 위치를 나타낸다. 속성이 정의되어있지 않을 경우 속성 값이 "0"일 경우와 동일한 형태를 나타내게 된다.</p>
+
+<p>{{ SVGElement("radialGradient") }} 엘리먼트의 경우에는 본 속성은 원형 그래디언트의 가장 큰 원의 x축의 위치를 나타낸다. 그래디언트는 가장 큰 원의 둘레와 일치할 수 있도록 그려질것입니다. 속성이 정의되어있지 않을 경우 속성 값이 <strong>50%</strong>일 경우와 동일한 효과를 나타내게 된다.</p>
+
+<p>Usage context</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td><a href="/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate">&lt;coordinate&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#CircleElementCXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#CircleElementCXAttribute">SVG 1.1 (2nd Edition): The circle element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCXAttribute">SVG 1.1 (2nd Edition): The ellipse element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute">SVG 1.1 (2nd Edition): The radialGradient element</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ page("/en/SVG/Content_type","Coordinate") }}</p>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: xml">  &lt;svg width="120" height="220"
+     viewPort="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+    &lt;style type="text/css" &gt;
+
+      &lt;![CDATA[
+       circle.circleClass {
+       stroke: #006600;
+       fill:   #cc0000;
+    }
+
+      ]]&gt;
+    &lt;/style&gt;
+     &lt;circle  class="circleClass"   cx="40" cy="50" r="26"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<h2 id="엘리먼트">엘리먼트</h2>
+
+<p>다음 엘리먼트에서 <code>cx</code>속성을 사용할 수 있습니다.</p>
+
+<ul>
+ <li>{{ SVGElement("circle") }}</li>
+ <li>{{ SVGElement("ellipse") }}</li>
+ <li>{{ SVGElement("radialGradient") }}</li>
+</ul>
diff --git a/files/ko/web/svg/attribute/d/index.html b/files/ko/web/svg/attribute/d/index.html
new file mode 100644
index 0000000000..19f60cdac9
--- /dev/null
+++ b/files/ko/web/svg/attribute/d/index.html
@@ -0,0 +1,575 @@
+---
+title: d
+slug: Web/SVG/Attribute/d
+translation_of: Web/SVG/Attribute/d
+---
+<div>{{SVGRef}}</div>
+
+<p><strong><code>d</code></strong>  속성은 그릴 패스를 정의합니다.</p>
+
+<p>A path definition is a list of <a href="#Path_commands">path commands</a> where each command is composed of a command letter and numbers that represent the command parameters. The commands are detailed below.</p>
+
+<p>Three elements have this attribute: {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}}</p>
+
+<div id="Example">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path fill="none" stroke="red"
+    d="M 10,30
+       A 20,20 0,0,1 50,30
+       A 20,20 0,0,1 90,30
+       Q 90,60 50,90
+       Q 10,60 10,30 z" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Example', '100%', 200)}}</p>
+</div>
+
+<h2 id="path">path</h2>
+
+<p>For {{SVGElement('path')}}, <code>d</code> is a string containing a series of path commands that define the path to be drawn.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#String">&lt;string&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><em>none</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="glyph">glyph</h2>
+
+<p class="warning"><strong>Warning:</strong> As of SVG2 {{SVGElement('glyph')}} is deprecated and shouldn't be used.</p>
+
+<p>For {{SVGElement('glyph')}}, <code>d</code> is a string containing a series of path commands that define the outline shape of the glyph.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#String">&lt;string&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><em>none</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> The point of origin (the coordinate <code>0</code>,<code>0</code>) is usually the <em>upper left corner</em> of the context. However the {{SVGElement("glyph")}} element has its origin in the <em>bottom left corner</em> of its letterbox.</p>
+
+<h2 id="missing-glyph">missing-glyph</h2>
+
+<p class="warning"><strong>Warning:</strong> As of SVG2 {{SVGElement('missing-glyph')}} is deprecated and shouldn't be used.</p>
+
+<p>For {{SVGElement('missing-glyph')}}, <code>d</code> is a string containing a series of path commands that define the outline shape of the glyph.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#String">&lt;string&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><em>none</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Path_commands">Path commands</h2>
+
+<p>Path commands are instructions that define a path to be drawn. Each command is composed of a command letter and numbers that represent the command parameters.</p>
+
+<p>SVG defines 6 types of path commands, for a total of 20 commands:</p>
+
+<ul>
+ <li>MoveTo: <code>M</code>, <code>m</code></li>
+ <li>LineTo: <code>L</code>, <code>l</code>, <code>H</code>, <code>h</code>, <code>V</code>, <code>v</code></li>
+ <li>Cubic Bézier Curve: <code>C</code>, <code>c</code>, <code>S</code>, <code>s</code></li>
+ <li>Quadratic Bézier Curve: <code>Q</code>, <code>q</code>, <code>T</code>, <code>t</code></li>
+ <li>Elliptical Arc Curve: <code>A</code>, <code>a</code></li>
+ <li>ClosePath: <code>Z</code>, <code>z</code></li>
+</ul>
+
+<p class="note"><strong>Note:</strong> Commands are case-sensitive; an upper-case command specifies its arguments as absolute positions, while a lower-case command specifies points relative to the current position.</p>
+
+<p>It is always possible to specify a negative value as an argument to a command: negative angles will be anti-clockwise; absolute x and y positions will be taken as negative coordinates; negative relative x values will move to the left; and negative relative y values will move upwards.</p>
+
+<h3 id="MoveTo_path_commands">MoveTo path commands</h3>
+
+<p><em>MoveTo</em> instructions can be thought of as picking up the drawing instrument, and setting it down somewhere else, i.e. moving the <em>current point</em> (P<sub>o</sub>; {x<sub>o</sub>, y<sub>o</sub>}). There is no line drawn between P<sub>o </sub>and the new <em>current point</em> (P<sub>n</sub>; {x<sub>n</sub>, y<sub>n</sub>}).</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Command</th>
+   <th scope="col">Parameters</th>
+   <th scope="col">Notes</th>
+  </tr>
+  <tr>
+   <th scope="row">M</th>
+   <td>(<code>x</code>, <code>y</code>)+</td>
+   <td>Move the <em>current point</em> to the coordinate <code>x</code>,<code>y</code>. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute LineTo (<code>L</code>) command(s) (<em>see below</em>). Formula: P<sub>n</sub> = {<code>x</code>, <code>y</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">m</th>
+   <td>(<code>dx</code>, <code>dy</code>)+</td>
+   <td>Move the <em>current point</em> by shifting the last known position of the path by <code>dx</code> along the x-axis and by <code>dy</code> along the y-axis. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative LineTo (<code>l</code>) command(s) (<em>see below</em>). Formula: P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Examples">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path fill="none" stroke="red"
+    d="M 10,10 h 10
+       m  0,10 h 10
+       m  0,10 h 10
+       M 40,20 h 10
+       m  0,10 h 10
+       m  0,10 h 10
+       m  0,10 h 10
+       M 50,50 h 10
+       m-20,10 h 10
+       m-20,10 h 10
+       m-20,10 h 10" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('MoveTo_path_commands', '100%', 200)}}</p>
+
+<h3 id="LineTo_path_commands">LineTo path commands</h3>
+
+<p><em>LineTo</em> instructions draw a straight line from the <em>current point</em> (P<sub>o</sub>; {x<sub>o</sub>, y<sub>o</sub>}) to the <em>end point</em> (P<sub>n</sub>; {x<sub>n</sub>, y<sub>n</sub>}), based on the parameters specified. The <em>end point </em>(P<sub>n</sub>) then becomes the <em>current point </em>for the next command (P<sub>o</sub><sup>'</sup>).</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Command</th>
+   <th scope="col">Parameters</th>
+   <th scope="col">Notes</th>
+  </tr>
+  <tr>
+   <th scope="row">L</th>
+   <td>(<code>x</code>, <code>y</code>)+</td>
+   <td>Draw a line from the <em>current point </em>to the <em>end point</em> specified by <code>x</code>,<code>y</code>. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute LineTo (<code>L</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">l</th>
+   <td>(<code>dx</code>, <code>dy</code>)+</td>
+   <td>Draw a line from the <em>current point </em>to the <em>end point,</em> which is the <em>current point</em> shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative LineTo (<code>l</code>) command(s) (<em>see below</em>). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">H</th>
+   <td><code>x</code>+</td>
+   <td>Draw a horizontal line from the <em>current point </em>to the <em>end point</em>, which is specified by the <code>x</code> parameter and the <em>current point's</em> y coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit absolute horizontal LineTo (<code>H</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, y<sub>o</sub>}</td>
+  </tr>
+  <tr>
+   <th scope="row">h</th>
+   <td><code>dx</code>+</td>
+   <td>Draw a horizontal line from the <em>current point </em>to the <em>end point,</em> which is specified by the <em>current point</em> shifted by <code>dx</code> along the x-axis and the <em>current point's</em> y coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit relative horizontal LineTo (<code>h</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub>}</td>
+  </tr>
+  <tr>
+   <th scope="row">V</th>
+   <td><code>y</code>+</td>
+   <td>Draw a vertical line from the <em>current point </em>to the <em>end point</em>, which is specified by the <code>y</code> parameter and the <em>current point's</em> x coordinate. Any subsequent values are interpreted as parameters for implicit absolute vertical LineTo (<code>V</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub>, <code>y</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">v</th>
+   <td><code>dy</code>+</td>
+   <td>Draw a vertical line from the <em>current point </em>to the <em>end point,</em> which is specified by the <em>current point</em> shifted by <code>dy</code> along the y-axis and the <em>current point's</em> x coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit relative vertical LineTo (<code>v</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o, </sub>y<sub>o</sub> + <code>dy</code>}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Examples_2">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- LineTo commands with absolute coordinates --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 10,10
+           L 90,90
+           V 10
+           H 50" /&gt;
+
+  &lt;!-- LineTo commands with relative coordinates --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 110,10
+           l 80,80
+           v -80
+           h -40" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('LineTo_path_commands', '100%', 200)}}</p>
+
+<h3 id="Cubic_Bézier_Curve">Cubic Bézier Curve</h3>
+
+<p><em>Cubic <a href="https://en.wikipedia.org/wiki/Bézier_curve">Bézier curves</a></em> are smooth curve definitions using four points:</p>
+
+<ul>
+ <li><em>starting point (current point)</em> (P<sub>o</sub> = {x<sub>o</sub>, y<sub>o</sub>})</li>
+ <li><em>end point </em>(P<sub>n</sub> = {x<sub>n</sub>, y<sub>n</sub>})</li>
+ <li><em>start control point </em> (P<sub>cs</sub> = {x<sub>cs</sub>, y<sub>cs</sub>}) (controls curvature near the start of the curve)</li>
+ <li><em>end control point </em>(P<sub>ce</sub> = {x<sub>ce</sub>, y<sub>ce</sub>}) (controls curvature near the end of the curve).</li>
+</ul>
+
+<p>After drawing, the <em>end point </em>(P<sub>n</sub>) becomes the <em>current point </em>for the next command (P<sub>o</sub>').</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Command</th>
+   <th scope="col">Parameters</th>
+   <th scope="col">Notes</th>
+  </tr>
+  <tr>
+   <th scope="row">C</th>
+   <td>(<code>x1</code>,<code>y1</code>, <code>x2</code>,<code>y2</code>, <code>x</code>,<code>y</code>)+</td>
+   <td>Draw a cubic Bézier curve from the <em>current point </em>to the <em>end point </em>specified by <code>x</code>,<code>y</code>. The <em>start control point</em> is specified by <code>x1</code>,<code>y1</code> and the <em>end control point </em>is specified by <code>x2</code>,<code>y2</code><em>.</em> Any subsequent triplet(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute cubic Bézier curve (<code>C</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>} ; P<sub>cs</sub> = {<code>x1</code>, <code>y1</code>} ; P<sub>ce</sub> = {<code>x2</code>, <code>y2</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">c</th>
+   <td>(<code>dx1</code>,<code>dy1</code>, <code>dx2</code>,<code>dy2</code>, <code>dx</code>,<code>dy</code>)+</td>
+   <td>Draw a cubic Bézier curve from the <em>current point </em>to the <em>end point,</em> which is the <em>current point</em> shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The <em>start control point </em>is the <em>current point</em> (starting point of the curve) shifted by <code>dx1</code> along the x-axis and <code>dy1</code> along the y-axis. The <em>end control point </em>is the <em>current point</em> (starting point of the curve) shifted by <code>dx2</code> along the x-axis and <code>dy2</code> along the y-axis. Any subsequent triplet(s) of coordinate pairs are interpreted as parameter(s) for implicit relative cubic Bézier curve (<code>c</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>} ; P<sub>cs</sub> = {x<sub>o</sub> + <code>dx1</code>, y<sub>o</sub> + <code>dy1</code>} ; P<sub>ce</sub> = {x<sub>o</sub> + <code>dx2</code>, y<sub>o</sub> + <code>dy2</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">S</th>
+   <td>(<code>x2</code>,<code>y2</code>, <code>x</code>,<code>y</code>)+</td>
+   <td>Draw a smooth cubic Bézier curve from the <em>current point </em>to the <em>end point</em> specified by <code>x</code>,<code>y</code>. The <em>end control point</em> is specified by <code>x2</code>,<code>y2</code>. The <em>start control point</em> is a reflection of the <em>end control point</em> of the previous curve command. If the previous command wasn't a curve, the <em>start control point </em>is the same as the curve starting point (<em>current point</em>). Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute smooth cubic Bézier curve (<code>S</code>) commands.</td>
+  </tr>
+  <tr>
+   <th scope="row">s</th>
+   <td>(<code>dx2</code>,<code>dy2</code>, <code>dx</code>,<code>dy</code>)+</td>
+   <td>Draw a smooth cubic Bézier curve from the <em>current point </em>to the <em>end point</em>, which is the <em>current point </em>shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The <em>end control point</em> is the <em>current point</em> (starting point of the curve) shifted by <code>dx2</code> along the x-axis and <code>dy2</code> along the y-axis. The <em>start control point</em> is a reflection of the <em>end control point</em> of the previous curve command. If the previous command wasn't a curve, the <em>start control point </em>is the same as the curve starting point (<em>current point</em>). Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit relative smooth cubic Bézier curve (<code>s</code>) commands.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Examples_3">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+  &lt;!-- Cubic Bézier curve with absolute coordinates --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 10,90
+           C 30,90 25,10 50,10
+           S 70,90 90,90" /&gt;
+
+  &lt;!-- Cubic Bézier curve with relative coordinates --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 110,90
+           c 20,0 15,-80 40,-80
+           s 20,80 40,80" /&gt;
+
+  &lt;!-- Highlight the curve vertex and control points --&gt;
+  &lt;g id="ControlPoints"&gt;
+
+    &lt;!-- First cubic command control points --&gt;
+    &lt;line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" /&gt;
+    &lt;circle cx="30" cy="90" r="1.5"/&gt;
+
+    &lt;line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" /&gt;
+    &lt;circle cx="25" cy="10" r="1.5"/&gt;
+
+    &lt;!-- Second smooth command control points (the first one is implicit) --&gt;
+    &lt;line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" /&gt;
+    &lt;circle cx="75" cy="10" r="1.5" fill="lightgrey"/&gt;
+
+    &lt;line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" /&gt;
+    &lt;circle cx="70" cy="90" r="1.5" /&gt;
+
+    &lt;!-- curve vertex points --&gt;
+    &lt;circle cx="10" cy="90" r="1.5"/&gt;
+    &lt;circle cx="50" cy="10" r="1.5"/&gt;
+    &lt;circle cx="90" cy="90" r="1.5"/&gt;
+  &lt;/g&gt;
+  &lt;use xlink:href="#ControlPoints" x="100" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Cubic_Bézier_Curve', '100%', 200)}}</p>
+
+<h3 id="Quadratic_Bézier_Curve">Quadratic Bézier Curve</h3>
+
+<p><em>Quadratic <a href="https://en.wikipedia.org/wiki/Bézier_curve">Bézier curves</a></em> are smooth curve definitions using three points:</p>
+
+<ul>
+ <li><em>starting point (current point)</em> (P<sub>o</sub> = {x<sub>o</sub>, y<sub>o</sub>})</li>
+ <li><em>end point </em>(P<sub>n</sub> = {x<sub>n</sub>, y<sub>n</sub>})</li>
+ <li><em>control point </em> (P<sub>c</sub> = {x<sub>c</sub>, y<sub>c</sub>}) (controls curvature)</li>
+</ul>
+
+<p> </p>
+
+<p>After drawing, the <em>end point </em>(P<sub>n</sub>) becomes the <em>current point </em>for the next command (P<sub>o</sub>').</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Command</th>
+   <th scope="col">Parameters</th>
+   <th scope="col">Notes</th>
+  </tr>
+  <tr>
+   <th scope="row">Q</th>
+   <td>(<code>x1</code>,<code>y1</code>, <code>x</code>,<code>y</code>)+</td>
+   <td>Draw a quadratic Bézier curve from the <em>current point </em>to the <em>end point </em>specified by <code>x</code>,<code>y</code>. The <em>control point</em> is specified by <code>x1</code>,<code>y1</code>. Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute quadratic Bézier curve (<code>Q</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>} ; P<sub>c</sub> = {<code>x1</code>, <code>y1</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">q</th>
+   <td>(<code>dx1</code>,<code>dy1</code>, <code>dx</code>,<code>dy</code>)+</td>
+   <td>Draw a quadratic Bézier curve from the <em>current point </em>to the <em>end point</em>, which is the <em>current point </em>shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The <em>control point </em>is the <em>current point</em> (starting point of the curve) shifted by <code>dx1</code> along the x-axis and <code>dy1</code> along the y-axis. Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit relative quadratic Bézier curve (<code>q</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>} ; P<sub>c</sub> = {x<sub>o</sub> + <code>dx1</code>, y<sub>o</sub> + <code>dy1</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">T</th>
+   <td>(<code>x</code>,<code>y</code>)+</td>
+   <td>Draw a smooth quadratic Bézier curve from the <em>current point </em>to the <em>end point </em>specified by <code>x</code>,<code>y</code>. The <em>control point</em> is a reflection of the <em>control point</em> of the previous curve command. If the previous command wasn't a curve, the <em>control point </em>is the same as the curve starting point (<em>current point</em>). Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute smooth quadratic Bézier curve (<code>T</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">t</th>
+   <td>(<code>dx</code>,<code>dy</code>)+</td>
+   <td>Draw a smooth quadratic Bézier curve from the <em>current point </em>to the <em>end point</em>, which is the <em>current point </em>shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The <em>control point </em>is a reflection of the <em>control point </em>of the previous curve command. If the previous command wasn't a curve, the <em>control point </em>is the same as the curve starting point (<em>current point</em>). Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative smooth quadratic Bézier curve (<code>t</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Examples_4">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+  &lt;!-- Quadratic Bézier curve with implicite repetition --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 10,50
+           Q 25,25 40,50
+           t 30,0 30,0 30,0 30,0 30,0" /&gt;
+
+  &lt;!-- Highlight the curve vertex and control points --&gt;
+  &lt;g&gt;
+    &lt;polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" /&gt;
+    &lt;circle cx="25" cy="25" r="1.5" /&gt;
+
+    &lt;!-- curve vertex points --&gt;
+    &lt;circle cx="10" cy="50" r="1.5"/&gt;
+    &lt;circle cx="40" cy="50" r="1.5"/&gt;
+
+    &lt;g id="SmoothQuadraticDown"&gt;
+      &lt;polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /&gt;
+      &lt;circle cx="55" cy="75" r="1.5" fill="lightgrey" /&gt;
+      &lt;circle cx="70" cy="50" r="1.5" /&gt;
+    &lt;/g&gt;
+
+    &lt;g id="SmoothQuadraticUp"&gt;
+      &lt;polyline points="70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /&gt;
+      &lt;circle cx="85" cy="25" r="1.5" fill="lightgrey" /&gt;
+      &lt;circle cx="100" cy="50" r="1.5" /&gt;
+    &lt;/g&gt;
+
+    &lt;use xlink:href="#SmoothQuadraticDown" x="60" /&gt;
+    &lt;use xlink:href="#SmoothQuadraticUp"   x="60" /&gt;
+    &lt;use xlink:href="#SmoothQuadraticDown" x="120" /&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Quadratic_Bézier_Curve', '100%', 200)}}</p>
+
+<h3 id="Elliptical_Arc_Curve">Elliptical Arc Curve</h3>
+
+<p><em>Elliptical arc curves</em> are curves define as a portion of an ellipse. It is sometimes easier than Bézier curve to draw highly regular curves.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Command</th>
+   <th scope="col">Parameters</th>
+   <th scope="col">Notes</th>
+  </tr>
+  <tr>
+   <th scope="row">A</th>
+   <td>(<code>rx</code> <code>ry</code> <code>angle</code> <code>large-arc-flag</code> <code>sweep-flag</code> <code>x</code> <code>y</code>)+</td>
+   <td>
+    <p>Draw an Arc curve from the current point to the coordinate <code>x</code>,<code>y</code>. The center of the ellipse used to draw the arc is determine automatically based on the other parameters of the command:</p>
+
+    <ul>
+     <li><code>rx</code> and <code>ry</code> are the two radii of the ellipse;</li>
+     <li><code>angle</code> represents a rotation (in degree) of the ellipse relative to the x-axis;</li>
+     <li><code>large-arc-flag</code> and <code>sweep-flag</code> allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters.
+      <ul>
+       <li><code>large-arc-flag</code> allows to chose one of the large arc (<strong>1</strong>) or small arc (<strong>0</strong>),</li>
+       <li><code>sweep-flag</code> allows to chose one of the clockwise turning arc (<strong>1</strong>) or anticlockwise turning arc (<strong>0</strong>)</li>
+      </ul>
+     </li>
+    </ul>
+    The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequent sets of parameters are considered implicit absolute arc curve (<code>A</code>) commands.</td>
+  </tr>
+  <tr>
+   <th scope="row">a</th>
+   <td>(<code>rx</code> <code>ry</code> <code>angle</code> <code>large-arc-flag</code> <code>sweep-flag</code> <code>dx</code> <code>dy</code>)+</td>
+   <td>
+    <p>Draw an Arc curve from the current point to to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The center of the ellipse used to draw the arc is determine automatically based on the other parameters of the command:</p>
+
+    <ul>
+     <li><code>rx</code> and <code>ry</code> are the two radii of the ellipse;</li>
+     <li><code>angle</code> represents a rotation (in degree) of the ellipse relative to the x-axis;</li>
+     <li><code>large-arc-flag</code> and <code>sweep-flag</code> allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters.
+      <ul>
+       <li><code>large-arc-flag</code> allows to chose one of the large arc (<strong>1</strong>) or small arc (<strong>0</strong>),</li>
+       <li><code>sweep-flag</code> allows to chose one of the clockwise turning arc (<strong>1</strong>) or anticlockwise turning arc (<strong>0</strong>)</li>
+      </ul>
+     </li>
+    </ul>
+    The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequent sets of parameters are considered implicit relative arc curve (<code>a</code>) commands.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Examples_5">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;!-- The influence of the arc flags on which arc is drawn --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 6,10
+           A 6 4 10 1 0 14,10" /&gt;
+
+  &lt;path fill="none" stroke="lime"
+        d="M 6,10
+           A 6 4 10 1 1 14,10" /&gt;
+
+  &lt;path fill="none" stroke="purple"
+        d="M 6,10
+           A 6 4 10 0 1 14,10" /&gt;
+
+  &lt;path fill="none" stroke="pink"
+        d="M 6,10
+           A 6 4 10 0 0 14,10" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Elliptical_Arc_Curve', '100%', 200)}}</p>
+
+<h3 id="ClosePath">ClosePath</h3>
+
+<p><em>ClosePath</em> instructions draw a straight line from the current position, to the first point in the path.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Command</th>
+   <th scope="col">Parameters</th>
+   <th scope="col">Notes</th>
+  </tr>
+  <tr>
+   <th scope="row">Z, z</th>
+   <td> </td>
+   <td>Close the current subpath by connecting the last point of the path with its initial point. If the two points doesn't have the same coordinates, a straight line is drawn between those two points.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> The appearance of a shape closed with closepath may be different to that of one closed by drawing a line to the origin, using one of the other commands, because the line ends are joined together (according to the {{SVGAttr('stroke-linejoin')}} setting), rather than just being placed at the same coordinates.</p>
+
+<h4 id="Examples_6">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;!--
+  An open shape with the last point of
+  the path different than the first one
+  --&gt;
+  &lt;path stroke="red"
+        d="M 5,1
+           l -4,8 8,0" /&gt;
+
+  &lt;!--
+  An open shape with the last point of
+  the path matching the first one
+  --&gt;
+  &lt;path stroke="red"
+        d="M 15,1
+           l -4,8 8,0 -4,-8" /&gt;
+
+  &lt;!--
+  An closed shape with the last point of
+  the path different than the first one
+  --&gt;
+  &lt;path stroke="red"
+        d="M 25,1
+           l -4,8 8,0
+           z" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('ClosePath', '100%', 200)}}</p>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "paths.html#DProperty", "d")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Definition for <code>&lt;path&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "fonts.html#GlyphElementDAttribute", "d")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition for <code>&lt;glyph&gt;</code> and <code>&lt;missing-glyph&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "paths.html#DAttribute", "d")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition for <code>&lt;path&gt;</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/svg/attribute/index.html b/files/ko/web/svg/attribute/index.html
new file mode 100644
index 0000000000..9cdaf4b9ec
--- /dev/null
+++ b/files/ko/web/svg/attribute/index.html
@@ -0,0 +1,461 @@
+---
+title: SVG Attribute reference
+slug: Web/SVG/Attribute
+tags:
+  - NeedsHelp
+  - NeedsTranslation
+  - SVG
+  - SVG Attribute
+  - SVG Reference
+  - TopicStub
+translation_of: Web/SVG/Attribute
+---
+<p>« <a href="/en/SVG" title="en/SVG">SVG</a> / <a href="/en/SVG/Element" title="en/SVG/Element">SVG Element reference</a> »</p>
+
+<h2 id="SVG_Attributes">SVG Attributes</h2>
+
+<div style="-moz-column-width: 14em; -webkit-columns: 14em; columns: 14em;">
+<h3 id="A">A</h3>
+
+<ul>
+ <li>{{ SVGAttr("accent-height") }}</li>
+ <li>{{ SVGAttr("accumulate") }}</li>
+ <li>{{ SVGAttr("additive") }}</li>
+ <li>{{ SVGAttr("alignment-baseline") }}</li>
+ <li>{{ SVGAttr("allowReorder") }}</li>
+ <li>{{ SVGAttr("alphabetic") }}</li>
+ <li>{{ SVGAttr("amplitude") }}</li>
+ <li>{{ SVGAttr("arabic-form") }}</li>
+ <li>{{ SVGAttr("ascent") }}</li>
+ <li>{{ SVGAttr("attributeName") }}</li>
+ <li>{{ SVGAttr("attributeType") }}</li>
+ <li>{{ SVGAttr("autoReverse") }}</li>
+ <li>{{ SVGAttr("azimuth") }}</li>
+</ul>
+
+<h3 id="B">B</h3>
+
+<ul>
+ <li>{{ SVGAttr("baseFrequency") }}</li>
+ <li>{{ SVGAttr("baseline-shift") }}</li>
+ <li>{{ SVGAttr("baseProfile") }}</li>
+ <li>{{ SVGAttr("bbox") }}</li>
+ <li>{{ SVGAttr("begin") }}</li>
+ <li>{{ SVGAttr("bias") }}</li>
+ <li>{{ SVGAttr("by") }}</li>
+</ul>
+
+<h3 id="C">C</h3>
+
+<ul>
+ <li>{{ SVGAttr("calcMode") }}</li>
+ <li>{{ SVGAttr("cap-height") }}</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("clip") }}</li>
+ <li>{{ SVGAttr("clipPathUnits") }}</li>
+ <li>{{ SVGAttr("clip-path") }}</li>
+ <li>{{ SVGAttr("clip-rule") }}</li>
+ <li>{{ SVGAttr("color") }}</li>
+ <li>{{ SVGAttr("color-interpolation") }}</li>
+ <li>{{ SVGAttr("color-interpolation-filters") }}</li>
+ <li>{{ SVGAttr("color-profile") }}</li>
+ <li>{{ SVGAttr("color-rendering") }}</li>
+ <li>{{ SVGAttr("contentScriptType") }}</li>
+ <li>{{ SVGAttr("contentStyleType") }}</li>
+ <li>{{ SVGAttr("cursor") }}</li>
+ <li>{{ SVGAttr("cx") }}</li>
+ <li>{{ SVGAttr("cy") }}</li>
+</ul>
+
+<h3 id="D">D</h3>
+
+<ul>
+ <li>{{ SVGAttr("d") }}</li>
+ <li>{{ SVGAttr("decelerate") }}</li>
+ <li>{{ SVGAttr("descent") }}</li>
+ <li>{{ SVGAttr("diffuseConstant") }}</li>
+ <li>{{ SVGAttr("direction") }}</li>
+ <li>{{ SVGAttr("display") }}</li>
+ <li>{{ SVGAttr("divisor") }}</li>
+ <li>{{ SVGAttr("dominant-baseline") }}</li>
+ <li>{{ SVGAttr("dur") }}</li>
+ <li>{{ SVGAttr("dx") }}</li>
+ <li>{{ SVGAttr("dy") }}</li>
+</ul>
+
+<h3 id="E">E</h3>
+
+<ul>
+ <li>{{ SVGAttr("edgeMode") }}</li>
+ <li>{{ SVGAttr("elevation") }}</li>
+ <li>{{ SVGAttr("enable-background") }}</li>
+ <li>{{ SVGAttr("end") }}</li>
+ <li>{{ SVGAttr("exponent") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+</ul>
+
+<h3 id="F">F</h3>
+
+<ul>
+ <li>{{ SVGAttr("fill") }}</li>
+ <li>{{ SVGAttr("fill-opacity") }}</li>
+ <li>{{ SVGAttr("fill-rule") }}</li>
+ <li>{{ SVGAttr("filter") }}</li>
+ <li>{{ SVGAttr("filterRes") }}</li>
+ <li>{{ SVGAttr("filterUnits") }}</li>
+ <li>{{ SVGAttr("flood-color") }}</li>
+ <li>{{ SVGAttr("flood-opacity") }}</li>
+ <li>{{ SVGAttr("font-family") }}</li>
+ <li>{{ SVGAttr("font-size") }}</li>
+ <li>{{ SVGAttr("font-size-adjust") }}</li>
+ <li>{{ SVGAttr("font-stretch") }}</li>
+ <li>{{ SVGAttr("font-style") }}</li>
+ <li>{{ SVGAttr("font-variant") }}</li>
+ <li>{{ SVGAttr("font-weight") }}</li>
+ <li>{{ SVGAttr("format") }}</li>
+ <li>{{ SVGAttr("from") }}</li>
+ <li>{{ SVGAttr("fx") }}</li>
+ <li>{{ SVGAttr("fy") }}</li>
+</ul>
+
+<h3 id="G">G</h3>
+
+<ul>
+ <li>{{ SVGAttr("g1") }}</li>
+ <li>{{ SVGAttr("g2") }}</li>
+ <li>{{ SVGAttr("glyph-name") }}</li>
+ <li>{{ SVGAttr("glyph-orientation-horizontal") }}</li>
+ <li>{{ SVGAttr("glyph-orientation-vertical") }}</li>
+ <li>{{ SVGAttr("glyphRef") }}</li>
+ <li>{{ SVGAttr("gradientTransform") }}</li>
+ <li>{{ SVGAttr("gradientUnits") }}</li>
+</ul>
+
+<h3 id="H">H</h3>
+
+<ul>
+ <li>{{ SVGAttr("hanging") }}</li>
+ <li>{{ SVGAttr("height") }}</li>
+ <li>{{ SVGAttr("horiz-adv-x") }}</li>
+ <li>{{ SVGAttr("horiz-origin-x") }}</li>
+</ul>
+
+<h3 id="I">I</h3>
+
+<ul>
+ <li>{{ SVGAttr("id") }}</li>
+ <li>{{ SVGAttr("ideographic") }}</li>
+ <li>{{ SVGAttr("image-rendering") }}</li>
+ <li>{{ SVGAttr("in") }}</li>
+ <li>{{ SVGAttr("in2") }}</li>
+ <li>{{ SVGAttr("intercept") }}</li>
+</ul>
+
+<h3 id="K">K</h3>
+
+<ul>
+ <li>{{ SVGAttr("k") }}</li>
+ <li>{{ SVGAttr("k1") }}</li>
+ <li>{{ SVGAttr("k2") }}</li>
+ <li>{{ SVGAttr("k3") }}</li>
+ <li>{{ SVGAttr("k4") }}</li>
+ <li>{{ SVGAttr("kernelMatrix") }}</li>
+ <li>{{ SVGAttr("kernelUnitLength") }}</li>
+ <li>{{ SVGAttr("kerning") }}</li>
+ <li>{{ SVGAttr("keyPoints") }}</li>
+ <li>{{ SVGAttr("keySplines") }}</li>
+ <li>{{ SVGAttr("keyTimes") }}</li>
+</ul>
+
+<h3 id="L">L</h3>
+
+<ul>
+ <li>{{ SVGAttr("lang") }}</li>
+ <li>{{ SVGAttr("lengthAdjust") }}</li>
+ <li>{{ SVGAttr("letter-spacing") }}</li>
+ <li>{{ SVGAttr("lighting-color") }}</li>
+ <li>{{ SVGAttr("limitingConeAngle") }}</li>
+ <li>{{ SVGAttr("local") }}</li>
+</ul>
+
+<h3 id="M">M</h3>
+
+<ul>
+ <li>{{ SVGAttr("marker-end") }}</li>
+ <li>{{ SVGAttr("marker-mid") }}</li>
+ <li>{{ SVGAttr("marker-start") }}</li>
+ <li>{{ SVGAttr("markerHeight") }}</li>
+ <li>{{ SVGAttr("markerUnits") }}</li>
+ <li>{{ SVGAttr("markerWidth") }}</li>
+ <li>{{ SVGAttr("mask") }}</li>
+ <li>{{ SVGAttr("maskContentUnits") }}</li>
+ <li>{{ SVGAttr("maskUnits") }}</li>
+ <li>{{ SVGAttr("mathematical") }}</li>
+ <li>{{ SVGAttr("max") }}</li>
+ <li>{{ SVGAttr("media") }}</li>
+ <li>{{ SVGAttr("method") }}</li>
+ <li>{{ SVGAttr("min") }}</li>
+ <li>{{ SVGAttr("mode") }}</li>
+</ul>
+
+<h3 id="N">N</h3>
+
+<ul>
+ <li>{{ SVGAttr("name") }}</li>
+ <li>{{ SVGAttr("numOctaves") }}</li>
+</ul>
+
+<h3 id="O">O</h3>
+
+<ul>
+ <li>{{ SVGAttr("offset") }}</li>
+ <li>{{ SVGAttr("onabort") }}</li>
+ <li>{{ SVGAttr("onactivate") }}</li>
+ <li>{{ SVGAttr("onbegin") }}</li>
+ <li>{{ SVGAttr("onclick") }}</li>
+ <li>{{ SVGAttr("onend") }}</li>
+ <li>{{ SVGAttr("onerror") }}</li>
+ <li>{{ SVGAttr("onfocusin") }}</li>
+ <li>{{ SVGAttr("onfocusout") }}</li>
+ <li>{{ SVGAttr("onload") }}</li>
+ <li>{{ SVGAttr("onmousedown") }}</li>
+ <li>{{ SVGAttr("onmousemove") }}</li>
+ <li>{{ SVGAttr("onmouseout") }}</li>
+ <li>{{ SVGAttr("onmouseover") }}</li>
+ <li>{{ SVGAttr("onmouseup") }}</li>
+ <li>{{ SVGAttr("onrepeat") }}</li>
+ <li>{{ SVGAttr("onresize") }}</li>
+ <li>{{ SVGAttr("onscroll") }}</li>
+ <li>{{ SVGAttr("onunload") }}</li>
+ <li>{{ SVGAttr("onzoom") }}</li>
+ <li>{{ SVGAttr("opacity") }}</li>
+ <li>{{ SVGAttr("operator") }}</li>
+ <li>{{ SVGAttr("order") }}</li>
+ <li>{{ SVGAttr("orient") }}</li>
+ <li>{{ SVGAttr("orientation") }}</li>
+ <li>{{ SVGAttr("origin") }}</li>
+ <li>{{ SVGAttr("overflow") }}</li>
+ <li>{{ SVGAttr("overline-position") }}</li>
+ <li>{{ SVGAttr("overline-thickness") }}</li>
+</ul>
+
+<h3 id="P">P</h3>
+
+<ul>
+ <li>{{ SVGAttr("panose-1") }}</li>
+ <li>{{ SVGAttr("paint-order") }}</li>
+ <li>{{ SVGAttr("pathLength") }}</li>
+ <li>{{ SVGAttr("patternContentUnits") }}</li>
+ <li>{{ SVGAttr("patternTransform") }}</li>
+ <li>{{ SVGAttr("patternUnits") }}</li>
+ <li>{{ SVGAttr("pointer-events") }}</li>
+ <li>{{ SVGAttr("points") }}</li>
+ <li>{{ SVGAttr("pointsAtX") }}</li>
+ <li>{{ SVGAttr("pointsAtY") }}</li>
+ <li>{{ SVGAttr("pointsAtZ") }}</li>
+ <li>{{ SVGAttr("preserveAlpha") }}</li>
+ <li>{{ SVGAttr("preserveAspectRatio") }}</li>
+ <li>{{ SVGAttr("primitiveUnits") }}</li>
+</ul>
+
+<h3 id="R">R</h3>
+
+<ul>
+ <li>{{ SVGAttr("r") }}</li>
+ <li>{{ SVGAttr("radius") }}</li>
+ <li>{{ SVGAttr("refX") }}</li>
+ <li>{{ SVGAttr("refY") }}</li>
+ <li>{{ SVGAttr("rendering-intent") }}</li>
+ <li>{{ SVGAttr("repeatCount") }}</li>
+ <li>{{ SVGAttr("repeatDur") }}</li>
+ <li>{{ SVGAttr("requiredExtensions") }}</li>
+ <li>{{ SVGAttr("requiredFeatures") }}</li>
+ <li>{{ SVGAttr("restart") }}</li>
+ <li>{{ SVGAttr("result") }}</li>
+ <li>{{ SVGAttr("rotate") }}</li>
+ <li>{{ SVGAttr("rx") }}</li>
+ <li>{{ SVGAttr("ry") }}</li>
+</ul>
+
+<h3 id="S">S</h3>
+
+<ul>
+ <li>{{ SVGAttr("scale") }}</li>
+ <li>{{ SVGAttr("seed") }}</li>
+ <li>{{ SVGAttr("shape-rendering") }}</li>
+ <li>{{ SVGAttr("slope") }}</li>
+ <li>{{ SVGAttr("spacing") }}</li>
+ <li>{{ SVGAttr("specularConstant") }}</li>
+ <li>{{ SVGAttr("specularExponent") }}</li>
+ <li>{{ SVGAttr("speed") }}</li>
+ <li>{{ SVGAttr("spreadMethod") }}</li>
+ <li>{{ SVGAttr("startOffset") }}</li>
+ <li>{{ SVGAttr("stdDeviation") }}</li>
+ <li>{{ SVGAttr("stemh") }}</li>
+ <li>{{ SVGAttr("stemv") }}</li>
+ <li>{{ SVGAttr("stitchTiles") }}</li>
+ <li>{{ SVGAttr("stop-color") }}</li>
+ <li>{{ SVGAttr("stop-opacity") }}</li>
+ <li>{{ SVGAttr("strikethrough-position") }}</li>
+ <li>{{ SVGAttr("strikethrough-thickness") }}</li>
+ <li>{{ SVGAttr("string") }}</li>
+ <li>{{ SVGAttr("stroke") }}</li>
+ <li>{{ SVGAttr("stroke-dasharray") }}</li>
+ <li>{{ SVGAttr("stroke-dashoffset") }}</li>
+ <li>{{ SVGAttr("stroke-linecap") }}</li>
+ <li>{{ SVGAttr("stroke-linejoin") }}</li>
+ <li>{{ SVGAttr("stroke-miterlimit") }}</li>
+ <li>{{ SVGAttr("stroke-opacity") }}</li>
+ <li>{{ SVGAttr("stroke-width") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("surfaceScale") }}</li>
+ <li>{{ SVGAttr("systemLanguage") }}</li>
+</ul>
+
+<h3 id="T">T</h3>
+
+<ul>
+ <li>{{ SVGAttr("tableValues") }}</li>
+ <li>{{ SVGAttr("target") }}</li>
+ <li>{{ SVGAttr("targetX") }}</li>
+ <li>{{ SVGAttr("targetY") }}</li>
+ <li>{{ SVGAttr("text-anchor") }}</li>
+ <li>{{ SVGAttr("text-decoration") }}</li>
+ <li>{{ SVGAttr("text-rendering") }}</li>
+ <li>{{ SVGAttr("textLength") }}</li>
+ <li>{{ SVGAttr("to") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+ <li>{{ SVGAttr("type") }}</li>
+</ul>
+
+<h3 id="U">U</h3>
+
+<ul>
+ <li>{{ SVGAttr("u1") }}</li>
+ <li>{{ SVGAttr("u2") }}</li>
+ <li>{{ SVGAttr("underline-position") }}</li>
+ <li>{{ SVGAttr("underline-thickness") }}</li>
+ <li>{{ SVGAttr("unicode") }}</li>
+ <li>{{ SVGAttr("unicode-bidi") }}</li>
+ <li>{{ SVGAttr("unicode-range") }}</li>
+ <li>{{ SVGAttr("units-per-em") }}</li>
+</ul>
+
+<h3 id="V">V</h3>
+
+<ul>
+ <li>{{ SVGAttr("v-alphabetic") }}</li>
+ <li>{{ SVGAttr("v-hanging") }}</li>
+ <li>{{ SVGAttr("v-ideographic") }}</li>
+ <li>{{ SVGAttr("v-mathematical") }}</li>
+ <li>{{ SVGAttr("values") }}</li>
+ <li>{{ SVGAttr("version") }}</li>
+ <li>{{ SVGAttr("vert-adv-y") }}</li>
+ <li>{{ SVGAttr("vert-origin-x") }}</li>
+ <li>{{ SVGAttr("vert-origin-y") }}</li>
+ <li>{{ SVGAttr("viewBox") }}</li>
+ <li>{{ SVGAttr("viewTarget") }}</li>
+ <li>{{ SVGAttr("visibility") }}</li>
+</ul>
+
+<h3 id="W">W</h3>
+
+<ul>
+ <li>{{ SVGAttr("width") }}</li>
+ <li>{{ SVGAttr("widths") }}</li>
+ <li>{{ SVGAttr("word-spacing") }}</li>
+ <li>{{ SVGAttr("writing-mode") }}</li>
+</ul>
+
+<h3 id="X">X</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("x-height") }}</li>
+ <li>{{ SVGAttr("x1") }}</li>
+ <li>{{ SVGAttr("x2") }}</li>
+ <li>{{ SVGAttr("xChannelSelector") }}</li>
+ <li>{{ SVGAttr("xlink:actuate") }}</li>
+ <li>{{ SVGAttr("xlink:arcrole") }}</li>
+ <li>{{ SVGAttr("xlink:href") }}</li>
+ <li>{{ SVGAttr("xlink:role") }}</li>
+ <li>{{ SVGAttr("xlink:show") }}</li>
+ <li>{{ SVGAttr("xlink:title") }}</li>
+ <li>{{ SVGAttr("xlink:type") }}</li>
+ <li>{{ SVGAttr("xml:base") }}</li>
+ <li>{{ SVGAttr("xml:lang") }}</li>
+ <li>{{ SVGAttr("xml:space") }}</li>
+</ul>
+
+<h3 id="Y">Y</h3>
+
+<ul>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("y1") }}</li>
+ <li>{{ SVGAttr("y2") }}</li>
+ <li>{{ SVGAttr("yChannelSelector") }}</li>
+</ul>
+
+<h3 id="Z">Z</h3>
+
+<ul>
+ <li>{{ SVGAttr("z") }}</li>
+ <li>{{ SVGAttr("zoomAndPan") }}</li>
+</ul>
+</div>
+
+<h2 id="Categories">Categories</h2>
+
+<h3 id="Animation_event_attributes">Animation event attributes</h3>
+
+<p>{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}</p>
+
+<h3 id="AnimationAttributeTarget" name="AnimationAttributeTarget">Animation attribute target attributes</h3>
+
+<p>{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}</p>
+
+<h3 id="Animation_timing_attributes">Animation timing attributes</h3>
+
+<p>{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}</p>
+
+<h3 id="Animation_value_attributes">Animation value attributes</h3>
+
+<p>{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}, {{ SVGAttr("autoReverse") }}, {{ SVGAttr("accelerate") }}, {{ SVGAttr("decelerate") }}</p>
+
+<h3 id="Animation_addition_attributes">Animation addition attributes</h3>
+
+<p>{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}</p>
+
+<h3 id="Conditional_processing_attributes">Conditional processing attributes</h3>
+
+<p>{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.</p>
+
+<h3 id="Core_attributes">Core attributes</h3>
+
+<p>{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}</p>
+
+<h3 id="Document_event_attributes">Document event attributes</h3>
+
+<p>{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}</p>
+
+<h3 id="Filter_primitive_attributes">Filter primitive attributes</h3>
+
+<p>{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}</p>
+
+<h3 id="Graphical_event_attributes">Graphical event attributes</h3>
+
+<p>{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}</p>
+
+<h3 id="Presentation_attributes">Presentation attributes</h3>
+
+<div class="note">Note that all SVG presentation attributes can be used as CSS properties.</div>
+
+<p>{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}</p>
+
+<h3 id="Transfer_function_attributes">Transfer function attributes</h3>
+
+<p>{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}</p>
+
+<h3 id="XLink_attributes">XLink attributes</h3>
+
+<p>{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}</p>
diff --git a/files/ko/web/svg/attribute/keytimes/index.html b/files/ko/web/svg/attribute/keytimes/index.html
new file mode 100644
index 0000000000..82d6ac0dba
--- /dev/null
+++ b/files/ko/web/svg/attribute/keytimes/index.html
@@ -0,0 +1,87 @@
+---
+title: keyTimes
+slug: Web/SVG/Attribute/keyTimes
+translation_of: Web/SVG/Attribute/keyTimes
+---
+<p>« <a href="/en-US/docs/Web/SVG/Attribute" title="en-US/docs/Web/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p><code>keyTimes</code> 속성은 애니메이션의 pacing을 제어하는 데 사용되는 세미콜론으로 구분 된 시간 값 목록입니다. 목록의 각 시간은 {{ SVGAttr("values") }} 속성 목록의 값에 해당하며 애니메이션에서 값이 사용되는 시기를 정의합니다. <code>keyTimes</code> 목록의 각 시간 값은 0과 1 사이의 부동 소수점 값으로 지정되며 애니메이션 요소의 지속 시간에 대한 비례 오프셋을 나타냅니다. </p>
+
+<p>만약 <code>keyTimes</code> 목록이 지정될 경우,  {{ SVGAttr("values") }} 목록에서와 같이 <code>keyTimes</code> 목록에 있는 값과 정확하게 일치해야합니다.</p>
+
+<p>각 연속적인 시간 값은 이전 시간 값보다 크거나 같아야 합니다.</p>
+
+<p><code>keyTimes</code> 목록의 semantics는 interpolation 모드에 따라 다릅니다.</p>
+
+<ul>
+ <li>For linear and spline animation, the first time value in the list must be 0, and the last time value in the list must be 1. The key time associated with each value defines when the value is set; values are interpolated between the key times.</li>
+ <li>For discrete animation, the first time value in the list must be 0. The time associated with each value defines when the value is set; the animation function uses that value until the next time defined in <code>keyTimes</code>.</li>
+</ul>
+
+<p>If the interpolation mode is <em>paced</em>, the <code>keyTimes</code> attribute is ignored.</p>
+
+<p>If the duration is indefinite, any <code>keyTimes</code> specification will be ignored.</p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td>Animation value attribute</td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td>&lt;list&gt;</td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute" title="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;?xml version="1.0"?&gt;
+&lt;svg width="120" height="120"
+     viewPort="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+    &lt;circle cx="60" cy="10" r="10"&gt;
+
+        &lt;animate attributeName="cx"
+                 attributeType="XML"
+                 dur="4s"
+                 values="60 ; 110 ; 60 ; 10 ; 60"
+                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
+                 repeatCount="indefinite"/&gt;
+
+        &lt;animate attributeName="cy"
+                 attributeType="XML"
+                 dur="4s"
+                 values="10 ; 60 ; 110 ; 60 ; 10 "
+                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
+                 repeatCount="indefinite"/&gt;
+
+    &lt;/circle&gt;
+&lt;/svg&gt;</pre>
+
+<p><strong>Live sample</strong></p>
+
+<p>{{ EmbedLiveSample('Example','120','120') }}</p>
+
+<h2 id="Elements">Elements</h2>
+
+<p>The following elements can use the <code>keyTimes</code> attribute</p>
+
+<ul>
+ <li>{{ SVGElement("animate") }}</li>
+ <li>{{ SVGElement("animateColor") }}</li>
+ <li>{{ SVGElement("animateMotion") }}</li>
+ <li>{{ SVGElement("animateTransform") }}</li>
+</ul>
diff --git a/files/ko/web/svg/attribute/values/index.html b/files/ko/web/svg/attribute/values/index.html
new file mode 100644
index 0000000000..6a83963056
--- /dev/null
+++ b/files/ko/web/svg/attribute/values/index.html
@@ -0,0 +1,86 @@
+---
+title: values
+slug: Web/SVG/Attribute/values
+translation_of: Web/SVG/Attribute/values
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p><code>values</code> 속성은 사용하는 맥락에 따라 크게 두 가지 의미가 있습니다.</p>
+
+<p>애니메이션 요소의 경우, values 속성은 세미콜론으로 구분된 하나 이상의 값 목록입니다. 애니메이션은 애니메이션 과정에서 순서대로 값을 적용합니다. 값 목록이 지정되면  {{ SVGAttr("from") }}, {{ SVGAttr("to") }} 그리고 {{ SVGAttr("by") }} 속성 값은 무시됩니다.</p>
+
+<p>{{ SVGElement("feColorMatrix") }} 요소의 경우 값의 내용은 {{ SVGAttr("type") }} 속성의 값에 따라 다릅니다: </p>
+
+<ul>
+ <li>For <code>type="matrix"</code>, <code>values</code> is a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 ... a34), separated by whitespace and/or a comma.</li>
+ <li>For <code>type="saturate"</code>, <code>values</code> is a single real number value (0 to 1).</li>
+ <li>For <code>type="hueRotate"</code>, <code>values</code> is a single one real number value (degrees).</li>
+ <li>For <code>type="luminanceToAlpha"</code>, <code>values</code> is not applicable.</li>
+</ul>
+
+<p>If the attribute is not specified, then the default behavior depends on the value of attribute {{ SVGAttr("type") }}.</p>
+
+<ul>
+ <li>If <code>type="matrix"</code>, then this attribute defaults to the identity matrix.</li>
+ <li>If <code>type="saturate"</code>, then this attribute defaults to the value 1, which results in the identity matrix.</li>
+ <li>If <code>type="hueRotate"</code>, then this attribute defaults to the value 0, which results in the identity matrix.</li>
+</ul>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<h3 id="For_animation_elements">For animation elements</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td>Animation value attribute</td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td>&lt;list&gt;</td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute" title="http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="For_the_SVGElement(feColorMatrix)_element">For the {{ SVGElement("feColorMatrix") }} element</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td><em>None</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td>&lt;list&gt; | <a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Paint">&lt;number&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixValuesAttribute" title="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixValuesAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<h2 id="Elements">Elements</h2>
+
+<p>The following elements can use the <code>values</code> attribute</p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a> »</li>
+ <li>{{ SVGElement("feColorMatrix") }}</li>
+</ul>
diff --git a/files/ko/web/svg/attribute/version/index.html b/files/ko/web/svg/attribute/version/index.html
new file mode 100644
index 0000000000..07e553eb02
--- /dev/null
+++ b/files/ko/web/svg/attribute/version/index.html
@@ -0,0 +1,35 @@
+---
+title: version
+slug: Web/SVG/Attribute/version
+translation_of: Web/SVG/Attribute/version
+---
+<p> </p>
+
+<p><strong><code>version</code></strong> 속성은 해당 SVG 문서가 어떤 명세를 따르고 있는지 표시하기 위해 사용됩니다. 이는 오직 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg">&lt;svg&gt;</a>  요소 내에서만 사용되며 순전히 사용되는 버전의 알림을 위한 용도로 프로세싱이나 렌더링에는 영향을 미치지 않습니다.</p>
+
+<p>버전을 명시하기 위해 어떤 숫자든지 입력할 수 있지만, 현재로써 유효하게 사용되는 버전은 1.0과 1.1 두 버전만이 유일합니다.</p>
+
+<p> </p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td><a href="/en/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number">&lt;number&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a href="http://www.w3.org/TR/SVG11/struct.html#SVGElementVersionAttribute" rel="external" title="http://www.w3.org/TR/SVG11/struct.html#SVGElementVersionAttribute">SVG 1.1 (2nd Edition): version attribute</a></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/svg/attribute/viewbox/index.html b/files/ko/web/svg/attribute/viewbox/index.html
new file mode 100644
index 0000000000..49f5cd3a51
--- /dev/null
+++ b/files/ko/web/svg/attribute/viewbox/index.html
@@ -0,0 +1,59 @@
+---
+title: viewBox
+slug: Web/SVG/Attribute/viewBox
+tags:
+  - SVG
+  - viewBox
+translation_of: Web/SVG/Attribute/viewBox
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p><code>viewBox</code> 속성은 특수한 container element 에 fit 하기 위한 주어진 graphics stretch 의 set 을 명시한다.</p>
+
+<p><code>viewBox </code>속성의 값은 whitespace and/or a comma 로 나뉘어진 <code>min-x</code>, <code>min-y</code>, <code>width,</code> <code>height </code>4가지 number list 이다. 이는 주어진 element 에 의해 설정된 viewport 의 bounds 에 맵핑되어야 하는 user space 내의 rectangle 을 명시하며, {{ SVGAttr("preserveAspectRatio") }} 속성과 관계가 있다.</p>
+
+<p>음수로 이루어진 width 또는 height 는 허용되지 않으며 zero 값은 element rendering 이 불가하다.</p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td><em>See above</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute" title="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<h2 id="Elements">Elements</h2>
+
+<p>아래 element 들은 <code>viewBox</code> 속성을 사용할 수 있다.</p>
+
+<ul>
+ <li>{{ SVGElement("svg") }}</li>
+ <li>{{ SVGElement("symbol") }}</li>
+ <li>{{ SVGElement("image") }}</li>
+ <li>{{ SVGElement("marker") }}</li>
+ <li>{{ SVGElement("pattern") }}</li>
+ <li>{{ SVGElement("view") }}</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/SVG/Tutorial/Positions" title="https://developer.mozilla.org/en/SVG/Tutorial/Positions">SVG Getting Started: Positions</a></li>
+</ul>