initial commit

6 files changed, 746 insertions, 0 deletions

diff --git a/files/ko/web/svg/element/a/index.html b/files/ko/web/svg/element/a/index.html
new file mode 100644
index 0000000000..8fa3e7f585
--- /dev/null
+++ b/files/ko/web/svg/element/a/index.html
@@ -0,0 +1,149 @@
+---
+title: <a>
+slug: Web/SVG/Element/a
+tags:
+  - Element
+  - SVG
+  - SVG Anchor 엘리먼트
+translation_of: Web/SVG/Element/a
+---
+<div>{{SVGRef}}</div>
+
+<p>The <strong>&lt;a&gt;</strong> SVG element creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.</p>
+
+<p>In SVG, the <code>&lt;a&gt;</code> element is a container, meaning, you can create a link around text, like in HTML, but you can also create a link around any shape.</p>
+
+<div id="Exemple">
+<div class="hidden">
+<pre class="brush: css">@namespace svgns url(http://www.w3.org/2000/svg);
+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" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;!-- A link around a shape --&gt;
+  &lt;a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle"&gt;
+    &lt;circle cx="50" cy="40" r="35"/&gt;
+  &lt;/a&gt;
+
+  &lt;!-- A link around a text --&gt;
+  &lt;a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle"&gt;
+    &lt;text x="50" y="90" text-anchor="middle"&gt;
+      &amp;lt;circle&amp;gt;
+    &lt;/text&gt;
+  &lt;/a&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: css">/* As SVG does not provide a default visual style for links,
+   it's considered best practice to add some */
+
+@namespace svgns url(http://www.w3.org/2000/svg);
+
+svgns|a {
+  cursor: pointer;
+}
+
+svgns|a text {
+  fill: blue; /* Even for text, SVG use fill over color */
+  text-decoration: underline;
+}
+
+svgns|a:hover, svgns|a:active {
+  outline: dotted 1px blue;
+}</pre>
+
+<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p>
+</div>
+
+<div class="warning">
+<p>Since this element shares its tag name with <a href="/en-US/docs/Web/HTML/Element/a">HTML's <code>&lt;a&gt;</code> element</a>, selecting "<code>a</code>" with CSS or <a href="/en-US/docs/Web/API/Document/querySelector"><code>querySelector</code></a> may apply to the wrong kind of element. Try <a href="/en-US/docs/Web/CSS/@namespace">the <code>@namespace</code> rule</a> to distinguish between the two.</p>
+</div>
+
+<h2 id="Attributes">Attributes</h2>
+
+<dl>
+ <dt>{{htmlattrxref("download", "a")}} {{experimental_inline}}</dt>
+ <dd>This attribute instructs browsers to download a {{Glossary("URL")}} instead of navigating to it, so the user will be prompted to save it as a local file.<br>
+ <small><em>Value type</em>: <strong>&lt;string&gt;</strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd>
+ <dt>{{SVGAttr("href")}}</dt>
+ <dd>This attribute contains the {{Glossary("URL")}} or URL fragment that the hyperlink points to.<br>
+ <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#URL">&lt;URL&gt;</a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{htmlattrxref("hreflang", "a")}}</dt>
+ <dd>This attribute contains the URL or URL fragment that the hyperlink points to.<br>
+ <small><em>Value type</em>: <strong>&lt;string&gt;</strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{htmlattrxref("ping", "a")}} {{experimental_inline}}</dt>
+ <dd>This attribute contains a space-separated list of URLs to which, when the hyperlink is followed, <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST" title="The HTTP POST method sends data to the server. The type of the body of the request is indicated by the Content-Type header."><code>POST</code></a> requests with the body <code>PING</code> will be sent by the browser (in the background). Typically used for tracking.  For a more widely-supported feature addressing the same use cases, see <a href="/en-US/docs/Web/API/Navigator/sendBeacon">Navigator.sendBeacon()</a>.<br>
+ <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts">&lt;list-of-URLs&gt;</a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd>
+ <dt>{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}</dt>
+ <dd>This attribute indicates which <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer">referrer</a> to send when fetching the {{Glossary("URL")}}.<br>
+ <small><em>Value type</em>: <code>no-referrer</code>|<code>no-referrer-when-downgrade</code>|<code>same-origin</code>|<code>origin</code>|<code>strict-origin</code>|<code>origin-when-cross-origin</code>|<code>strict-origin-when-cross-origin</code>|<code>unsafe-url</code> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd>
+ <dt>{{htmlattrxref("rel", "a")}} {{experimental_inline}}</dt>
+ <dd>This attribute specifies the relationship of the target object to the link object.<br>
+ <small><em>Value type</em>: <strong><a href="/docs/Web/HTML/Link_types">&lt;list-of-Link-Types&gt;</a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("target")}}</dt>
+ <dd>This attribute specifies where to display the linked {{Glossary("URL")}}.<br>
+ <small><em>Value type</em>: <code>_self</code>|<code>_parent</code>|<code>_top</code>|<code>_blank</code>|<strong>&lt;name&gt;</strong> ; <em>Default value</em>: <code>_self</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{htmlattrxref("type", "a")}}</dt>
+ <dd>This attribute specifies the media type in the form of a {{Glossary("MIME type")}} for the linked URL.<br>
+ <small><em>Value type</em>: <strong>&lt;string&gt;</strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt>
+ <dd>This attribute contains the URL or URL fragment that the hyperlink points to.<br>
+ <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#URL">&lt;URL&gt;</a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+</dl>
+
+<h3 id="Global_attributes">Global attributes</h3>
+
+<dl>
+ <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Event Attributes</dt>
+ <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">Document element event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
+ <dt>XLink Attributes</dt>
+ <dd><small>Most notably: {{SVGAttr("xlink:title")}}</small></dd>
+ <dt>ARIA Attributes</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Specifications">Specifications</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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Added the <code>referrerpolicy</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "linking.html#Links", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Replaced {{SVGAttr("xlink:href")}} attribute by {{SVGAttr("href")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "linking.html#Links", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("svg.elements.a")}}</p>
diff --git a/files/ko/web/svg/element/altglyph/index.html b/files/ko/web/svg/element/altglyph/index.html
new file mode 100644
index 0000000000..5da1e1848c
--- /dev/null
+++ b/files/ko/web/svg/element/altglyph/index.html
@@ -0,0 +1,79 @@
+---
+title: <altGlyph>
+slug: Web/SVG/Element/altGlyph
+tags:
+  - Element
+  - SVG
+  - "altGlyph\_엘리먼트"
+translation_of: Web/SVG/Element/altGlyph
+---
+<div>{{SVGRef}}{{deprecated_header}}</div>
+
+<p><code>altGlyph</code> 엘리먼트는 하위 문자 데이타를 랜더링 하기 위해 사용되는 매우복잡한 상형문자의 섹션을 허용한다.</p>
+
+<h2 id="사용예_컨텍스트">사용예 컨텍스트</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="속성들">속성들</h2>
+
+<h3 id="글로벌_속성들">글로벌 속성들</h3>
+
+<ul>
+ <li><a href="/en-US/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en-US/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en-US/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li><a href="/en-US/SVG/Attribute#XLink">XLink attributes</a> »</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="특정_속성들">특정 속성들</h3>
+
+<ul>
+ <li>{{SVGAttr("x")}}</li>
+ <li>{{SVGAttr("y")}}</li>
+ <li>{{SVGAttr("dx")}}</li>
+ <li>{{SVGAttr("dy")}}</li>
+ <li>{{SVGAttr("rotate")}}</li>
+ <li>{{SVGAttr("glyphRef")}}</li>
+ <li>{{SVGAttr("format")}}</li>
+ <li>{{SVGAttr("xlink:href")}}</li>
+</ul>
+
+<h2 id="DOM_인터페이스">DOM 인터페이스</h2>
+
+<p>이 엘리먼트는 <code><a href="/en-US/docs/Web/API/SVGAltGlyphElement">SVGAltGlyphElement</a></code> 인터페이스를 구현한다..</p>
+
+<h2 id="명세서들">명세서들</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세서</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'text.html#AltGlyphElement', '&lt;altGlyph&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>초기화 선언</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("svg.elements.altGlyph")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{SVGElement("tspan")}}</li>
+ <li>{{SVGElement("glyph")}}</li>
+ <li>{{SVGElement("altGlyphDef")}}</li>
+</ul>
diff --git a/files/ko/web/svg/element/circle/index.html b/files/ko/web/svg/element/circle/index.html
new file mode 100644
index 0000000000..bfeaab30ac
--- /dev/null
+++ b/files/ko/web/svg/element/circle/index.html
@@ -0,0 +1,95 @@
+---
+title: <circle>
+slug: Web/SVG/Element/circle
+translation_of: Web/SVG/Element/circle
+---
+<div>{{SVGRef}}</div>
+
+<p><code>circle(원)은</code> 엘리먼트는 중심점과 반지름에 기초하여 원을 생성하는데 사용되는  SVG의 기본 모양이다. </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;circle cx="50" cy="50" r="50"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Example', 100, 100)}}</p>
+</div>
+
+<h2 id="사용예_컨텍스트">사용예 컨텍스트</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;svg viewBox="0 0 120 120" version="1.1"
+  xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;circle cx="60" cy="60" r="50"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>» <a href="https://mdn.mozillademos.org/files/7707/circle2.svg">circle.svg</a></p>
+
+<h2 id="속성들">속성들</h2>
+
+<h3 id="글로벌_속성들">글로벌 속성들</h3>
+
+<ul>
+ <li><a href="/en-US/SVG/Attribute#Conditional_processing_attributes">조건부 처리 속성들</a> »</li>
+ <li><a href="/en-US/SVG/Attribute#Core_attributes">주요 속성들</a> »</li>
+ <li><a href="/en-US/SVG/Attribute#Graphical_event_attributes">그래픽 이벤트 속성들</a> »</li>
+ <li><a href="/en-US/SVG/Attribute#Presentation_attributes">표현 속성들</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="특정_속성들">특정 속성들</h3>
+
+<ul>
+ <li>{{ SVGAttr("cx") }}</li>
+ <li>{{ SVGAttr("cy") }}</li>
+ <li>{{ SVGAttr("r") }}</li>
+</ul>
+
+<h2 id="DOM_인터페이스">DOM 인터페이스</h2>
+
+<p>이 엘리먼트는 {{ domxref("SVGCircleElement") }} 를 구현한다..</p>
+
+<h2 id="명세서들">명세서들</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세서</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'shapes.html#CircleElement', '&lt;circle&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'shapes.html#CircleElement', '&lt;circle&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>초기화 선언</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("svg.elements.circle")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ SVGElement("ellipse") }}</li>
+</ul>
diff --git a/files/ko/web/svg/element/ellipse/index.html b/files/ko/web/svg/element/ellipse/index.html
new file mode 100644
index 0000000000..31997952c3
--- /dev/null
+++ b/files/ko/web/svg/element/ellipse/index.html
@@ -0,0 +1,110 @@
+---
+title: <ellipse>
+slug: Web/SVG/Element/ellipse
+tags:
+  - Element
+  - Reference
+  - SVG
+  - SVG Grahpics
+translation_of: Web/SVG/Element/ellipse
+---
+<div>{{SVGRef}}</div>
+
+<p><strong><code>&lt;ellipse&gt;</code></strong> 요소는 SVG의 기본 모양 중 하나로, 중심좌표와 x축, y축 반지름을 이용하여 타원을 생성합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 타원은 정확한 방향을 특정할 수 없습니다. (예를 들어, 45도 기울어진 타원을 그리려고 할 경우) 하지만 {{SVGAttr("transform")}}속성을 사용함으로써 회전할 수는 있습니다.</p>
+</div>
+
+<div id="LiveSample">
+<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;ellipse cx="100" cy="50" rx="100" ry="50" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('LiveSample', 100, '100%')}}</p>
+</div>
+
+<h2 id="Attributes">Attributes</h2>
+
+<dl>
+ <dt>{{SVGAttr("cx")}}</dt>
+ <dd>The x position of the ellipse.<br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("cy")}}</dt>
+ <dd>The y position of the ellipse.<br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("rx")}}</dt>
+ <dd>The radius of the ellipse on the x axis.<br>
+ <small><em>Value type</em>: <code>auto</code>|<a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("ry")}}</dt>
+ <dd>The radius of the ellipse on the y axis.<br>
+ <small><em>Value type</em>: <code>auto</code>|<a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("pathLength")}}</dt>
+ <dd>This attribute lets specify the total length for the path, in user units.<br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong>&lt;number&gt;</strong></a> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> Starting with SVG2 <code>cx</code>, <code>cy</code>, <code>rx</code> and <code>ry</code> are <em>Geometry Propertie</em>s, meaning those attributes can also be used as CSS properties for that element.</p>
+</div>
+
+<h3 id="Global_attributes">Global attributes</h3>
+
+<dl>
+ <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Event Attributes</dt>
+ <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
+ <dt>ARIA Attributes</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Specifications">Specifications</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', 'shapes.html#EllipseElement', '&lt;ellipse&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>Added <code>auto</code> value for <code>rx</code> and <code>ry</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '&lt;ellipse&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("svg.elements.ellipse")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other SVG basic shapes: <strong>{{ SVGElement('circle') }}</strong>, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}</li>
+</ul>
diff --git a/files/ko/web/svg/element/index.html b/files/ko/web/svg/element/index.html
new file mode 100644
index 0000000000..f1aa117e10
--- /dev/null
+++ b/files/ko/web/svg/element/index.html
@@ -0,0 +1,218 @@
+---
+title: SVG element reference
+slug: Web/SVG/Element
+tags:
+  - NeedsTranslation
+  - SVG
+  - SVG Reference
+  - SVG 엘리먼트
+  - TopicStub
+translation_of: Web/SVG/Element
+---
+<p>« <a href="/en-US/docs/SVG" title="SVG">SVG</a> / <a href="/en-US/docs/SVG/Attribute" title="SVG/Attribute">SVG Attribute reference</a> »</p>
+
+<h2 id="SVG_엘리먼트들">SVG 엘리먼트들</h2>
+
+<div class="index"><span id="A">A</span>
+
+<ul>
+ <li>{{SVGElement("a")}}</li>
+ <li>{{SVGElement("altGlyph")}}</li>
+ <li>{{SVGElement("altGlyphDef")}}</li>
+ <li>{{SVGElement("altGlyphItem")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("animateColor")}}</li>
+ <li>{{SVGElement("animateMotion")}}</li>
+ <li>{{SVGElement("animateTransform")}}</li>
+</ul>
+<span id="C">B C</span>
+
+<ul>
+ <li>{{SVGElement("circle")}}</li>
+ <li>{{SVGElement("clipPath")}}</li>
+ <li>{{SVGElement("color-profile")}}</li>
+ <li>{{SVGElement("cursor")}}</li>
+</ul>
+<span id="D">D</span>
+
+<ul>
+ <li>{{SVGElement("defs")}}</li>
+ <li>{{SVGElement("desc")}}</li>
+</ul>
+<span id="E">E</span>
+
+<ul>
+ <li>{{SVGElement("ellipse")}}</li>
+</ul>
+<span id="F">F</span>
+
+<ul>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feDistantLight")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feFuncA")}}</li>
+ <li>{{SVGElement("feFuncB")}}</li>
+ <li>{{SVGElement("feFuncG")}}</li>
+ <li>{{SVGElement("feFuncR")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMergeNode")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("fePointLight")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feSpotLight")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("font")}}</li>
+ <li>{{SVGElement("font-face")}}</li>
+ <li>{{SVGElement("font-face-format")}}</li>
+ <li>{{SVGElement("font-face-name")}}</li>
+ <li>{{SVGElement("font-face-src")}}</li>
+ <li>{{SVGElement("font-face-uri")}}</li>
+ <li>{{SVGElement("foreignObject")}}</li>
+</ul>
+<span id="G">G</span>
+
+<ul>
+ <li>{{SVGElement("g")}}</li>
+ <li>{{SVGElement("glyph")}}</li>
+ <li>{{SVGElement("glyphRef")}}</li>
+</ul>
+<span id="H">H</span>
+
+<ul>
+ <li>{{SVGElement("hkern")}}</li>
+</ul>
+<span id="I">I</span>
+
+<ul>
+ <li>{{SVGElement("image")}}</li>
+</ul>
+<span id="L">J K L</span>
+
+<ul>
+ <li>{{SVGElement("line")}}</li>
+ <li>{{SVGElement("linearGradient")}}</li>
+</ul>
+<span id="M">M</span>
+
+<ul>
+ <li>{{SVGElement("marker")}}</li>
+ <li>{{SVGElement("mask")}}</li>
+ <li>{{SVGElement("metadata")}}</li>
+ <li>{{SVGElement("missing-glyph")}}</li>
+ <li>{{SVGElement("mpath")}}</li>
+</ul>
+<span id="P">N O P</span>
+
+<ul>
+ <li>{{SVGElement("path")}}</li>
+ <li>{{SVGElement("pattern")}}</li>
+ <li>{{SVGElement("polygon")}}</li>
+ <li>{{SVGElement("polyline")}}</li>
+</ul>
+<span id="R">Q R</span>
+
+<ul>
+ <li>{{SVGElement("radialGradient")}}</li>
+ <li>{{SVGElement("rect")}}</li>
+</ul>
+<span id="S">S</span>
+
+<ul>
+ <li>{{SVGElement("script")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("stop")}}</li>
+ <li>{{SVGElement("style")}}</li>
+ <li>{{SVGElement("svg")}}</li>
+ <li>{{SVGElement("switch")}}</li>
+ <li>{{SVGElement("symbol")}}</li>
+</ul>
+<span id="T">T</span>
+
+<ul>
+ <li>{{SVGElement("text")}}</li>
+ <li>{{SVGElement("textPath")}}</li>
+ <li>{{SVGElement("title")}}</li>
+ <li>{{SVGElement("tref")}}</li>
+ <li>{{SVGElement("tspan")}}</li>
+</ul>
+<span id="U">U</span>
+
+<ul>
+ <li>{{SVGElement("use")}}</li>
+</ul>
+<span id="V">V — Z</span>
+
+<ul>
+ <li>{{SVGElement("view")}}</li>
+ <li>{{SVGElement("vkern")}}</li>
+</ul>
+</div>
+
+<h2 id="범주들">범주들</h2>
+
+<h3 id="애니메이션_엘리먼트들">애니메이션 엘리먼트들</h3>
+
+<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p>
+
+<h3 id="기본_모양들">기본 모양들</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>
+
+<h3 id="컨테이너_엘리먼트들">컨테이너 엘리먼트들</h3>
+
+<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}</p>
+
+<h3 id="기술하는_엘리먼트들">기술하는 엘리먼트들</h3>
+
+<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p>
+
+<h3 id="기본_필터_엘리먼트들">기본 필터 엘리먼트들</h3>
+
+<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p>
+
+<h3 id="폰트_엘리먼트들">폰트 엘리먼트들</h3>
+
+<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p>
+
+<h3 id="구배(경사)_엘리먼트들">구배(경사) 엘리먼트들</h3>
+
+<p>{{SVGElement("linearGradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p>
+
+<h3 id="그래픽_엘리먼트들">그래픽 엘리먼트들</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p>
+
+<h3 id="가벼운_소스_엘리먼트들">가벼운 소스 엘리먼트들</h3>
+
+<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p>
+
+<h3 id="Shape" name="Shape">모양 엘리먼트들</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>
+
+<h3 id="구조적인_엘리먼트들">구조적인 엘리먼트들</h3>
+
+<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p>
+
+<h3 id="TextContent" name="TextContent">텍스트 컨텍스트 엘리먼트들</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>
+
+<h3 id="텍스트_컨텍스트_하위_엘리먼트들">텍스트 컨텍스트 하위 엘리먼트들</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>
+
+<h3 id="범주화_되지_않은_엘리먼트들">범주화 되지 않은 엘리먼트들</h3>
+
+<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p>
diff --git a/files/ko/web/svg/element/사각형/index.html b/files/ko/web/svg/element/사각형/index.html
new file mode 100644
index 0000000000..90a3d08d24
--- /dev/null
+++ b/files/ko/web/svg/element/사각형/index.html
@@ -0,0 +1,95 @@
+---
+title: <rect>
+slug: Web/SVG/Element/사각형
+translation_of: Web/SVG/Element/rect
+---
+<div>{{SVGRef}}</div>
+
+<p><span style="line-height: 1.5;"><strong>&lt;rect&gt;</strong> 요소는 SVG 기본 모형이고 코너의 위치와 폭과 높이에 따라 사각형을 만드는데 사용된다.</span> 또한 모서리가 둥근 사각형을 만들 수 있다.</p>
+
+<div id="Example">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html; highlight[4]">&lt;svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Simple rect element --&gt;
+  &lt;rect x="0" y="0" width="100" height="100" /&gt;
+
+  &lt;!-- Rounded corner rect element --&gt;
+  &lt;rect x="120" y="0" width="100" height="100" rx="15" ry="15" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Example', 100, '100%')}}</p>
+</div>
+
+<h2 id="컨택스트_사용해보기">컨택스트 사용해보기</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">카테고리</th>
+   <td>기본 도형 요소, 그래픽 요소, 모형 요소</td>
+  </tr>
+  <tr>
+   <th scope="row">허용 된 콘텐츠</th>
+   <td>Any number of the following elements, in any order:<br>
+    <a href="/en/SVG/Element#Animation" title="en/SVG/Attribute#Animation">Animation elements</a> »<br>
+    <a href="/en/SVG/Element#Descriptive" title="en/SVG/Attribute#Descriptive">Descriptive elements</a> »</td>
+  </tr>
+  <tr>
+   <th scope="row">규범 문서</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElement" title="http://www.w3.org/TR/SVG/shapes.html#RectElement">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example_2">Example</h2>
+
+<h3 id="간단한_rect_사용하기">간단한 <code>rect</code> 사용하기</h3>
+
+<p>» <a href="https://developer.mozilla.org/files/3247/rect-1.svg" title="https://developer.mozilla.org/files/3247/rect-1.svg">rect-1.svg</a></p>
+
+<h3 id="라운드_코너와_rect_사용하기">라운드 코너와 <span style="font-family: 'Courier New','Andale Mono',monospace; font-weight: inherit; line-height: normal;">rect </span><span style="font-size: 1.7142857142857142rem;">사용하기</span></h3>
+
+<p>» <a href="https://developer.mozilla.org/files/3248/rect-2.svg" title="https://developer.mozilla.org/files/3248/rect-2.svg">rect-2.svg</a></p>
+
+<h2 id="속성">속성</h2>
+
+<h3 id="전역_속성">전역 속성</h3>
+
+<ul>
+ <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="지정_속성">지정 속성</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("width") }}</li>
+ <li>{{ SVGAttr("height") }}</li>
+ <li>{{ SVGAttr("rx") }}</li>
+ <li>{{ SVGAttr("ry") }}</li>
+</ul>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>This element implements the <code><a href="/en/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code> interface.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("svg.elements.rect")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ SVGElement("path") }}</li>
+</ul>