aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/svg
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:48:24 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:48:24 +0100
commitee778d6eea54935fd05022e0ba8c49456003381a (patch)
tree151a4cef804d8823cc8fc753b8edc693b7078241 /files/ko/web/svg
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-ee778d6eea54935fd05022e0ba8c49456003381a.tar.gz
translated-content-ee778d6eea54935fd05022e0ba8c49456003381a.tar.bz2
translated-content-ee778d6eea54935fd05022e0ba8c49456003381a.zip
unslug ko: move
Diffstat (limited to 'files/ko/web/svg')
-rw-r--r--files/ko/web/svg/element/rect/index.html (renamed from files/ko/web/svg/element/사각형/index.html)0
-rw-r--r--files/ko/web/svg/svg_1.1_support_in_firefox/index.html845
-rw-r--r--files/ko/web/svg/tutorial/basic_shapes/index.html (renamed from files/ko/web/svg/tutorial/기본_도형/index.html)0
-rw-r--r--files/ko/web/svg/tutorial/getting_started/index.html (renamed from files/ko/web/svg/tutorial/시작하기/index.html)0
-rw-r--r--files/ko/web/svg/tutorial/positions/index.html (renamed from files/ko/web/svg/tutorial/위치/index.html)0
-rw-r--r--files/ko/web/svg/tutorial/svg_and_css/index.html195
6 files changed, 1040 insertions, 0 deletions
diff --git a/files/ko/web/svg/element/사각형/index.html b/files/ko/web/svg/element/rect/index.html
index 90a3d08d24..90a3d08d24 100644
--- a/files/ko/web/svg/element/사각형/index.html
+++ b/files/ko/web/svg/element/rect/index.html
diff --git a/files/ko/web/svg/svg_1.1_support_in_firefox/index.html b/files/ko/web/svg/svg_1.1_support_in_firefox/index.html
new file mode 100644
index 0000000000..f8c31a2a8c
--- /dev/null
+++ b/files/ko/web/svg/svg_1.1_support_in_firefox/index.html
@@ -0,0 +1,845 @@
+---
+title: SVG in Firefox
+slug: SVG_in_Firefox
+tags:
+ - SVG
+translation_of: Web/SVG/SVG_1.1_Support_in_Firefox
+---
+<p>Firefox 2는 더욱 폭넓은 <a class="external" href="http://www.w3.org/Graphics/SVG/">Scalable Vector Graphics (SVG)</a> 기능 구현을 위해서 계속해서 향상시켜 나가고 있습니다. 많은 스펙과 버그 수정들이 포함되었지만 Firefox 1.5이후 새로이 추가된 유일한 특징이 바로 &lt;textPath&gt;입니다. -- 아래 참조.</p>
+<p>Firefox SVG는 <a class="external" href="http://www.w3.org/TR/SVG11/">SVG 1.1</a>의 부분집합이지만 그렇다고 공식 프로필(Tiny, Basic, Full)들중 어느 것도 아닙니다. 각 내용들과 그것들이 Firefox 2에서 구현되었는지 아닌지에 대한 전체 내용은 문서의 마지막에서 찾을 수 있습니다. 문서의 나머지 부분은 우리의 구현상 제약사항들에 대한 정보를 제공할 것입니다.</p>
+<p>우리들의 구현의 특이한 점들이 컨텐츠를 개발함에 있어서 번거로울 수도 있다는 것을 알고 있습니다. 하지만 커다란 스펙의 완전한 구현이 될 때까지 여러분의 인내를 부탁드립니다.</p>
+<p>이 문서를 읽을때 이들 구현들의 세부사항들이 언제 바뀔지 궁금해할지도 모릅니다. 불행히도 <a class="external" href="http://www.mozilla.org/roadmap/gecko-1.9-roadmap.html">현재 로드맵</a>에 따르면 Gecko의 다음 버전에 기반한 Firefox의 공식 출시일이 꽤 나중이 되겠지만 2007년 1/4분기라고 나와있습니다. 그러나 새로운 기능을 시험해보고 싶다면 현재 개발중인 <a class="external" href="http://www.mozilla.org/developer/#builds">nightly builds</a>를 사용해볼 수 있습니다.</p>
+<h2 id=".EC.84.B1.EB.8A.A5" name=".EC.84.B1.EB.8A.A5">성능</h2>
+<p>Firefox가 출시하는 모든 플랫폼은 같은 렌더링 백엔드 <a class="external" href="http://cairographics.org/">cairo</a>를 사용합니다. 그래서 이들 간에 성능에 관한 특징은 일반적으로 유사할 것입니다. Linux에서의 성능은 예측하기가 가장 힘든데 이는 다양한 X서버마다 RENDER 확장의 구현이 다양하기 때문입니다.</p>
+<p>Windows에서 SVG 렌더링은 다른 플랫폼상에서 보다도 상당히 빠릅니다.</p>
+<h2 id=".EC.A2.8C.ED.91.9C_.EB.B2.94.EC.9C.84" name=".EC.A2.8C.ED.91.9C_.EB.B2.94.EC.9C.84">좌표 범위</h2>
+<p>당신의 컨텐츠가 상당히 넓은 범위의 좌표를 가지는 구조를 가지고 있다면 cairo가 내부적으로 계산할 때 수를 16.16비트의 고정 소수점 표현 방식을 사용하기 때문에 발생할 수 있는 문제점들에 대해서 주의 깊게 고려해야 합니다. Cairo는 rasterization하기 전에 primitives들에 대한 클리핑을 하지 않기 때문에 변환과정 후 최종적으로 -32678에서 32677의 범위를 벗어나는 좌표들에 대해서는 렌더링 오류나 아주 느린 성능을 보여주기도 합니다.</p>
+<h2 id="Windows_98.EC.97.90.EC.84.9C.EC.9D.98_Text" name="Windows_98.EC.97.90.EC.84.9C.EC.9D.98_Text">Windows 98에서의 Text</h2>
+<p>안타깝게도 윈도우즈에서 cairo를 렌더링 엔진으로 사용한다면 Windows 98에서 텍스트 렌더링이 되지않는 버그가 있다. 사실, 그것보다 더 심각한 문제가 있다 : SVG 컨텐츠를 렌더링하는 도중에 텍스트를 만나면 모든 그리기 기능이 정지되어버리는 것이다.</p>
+<h2 id=".ED.8F.B0.ED.8A.B8_.EC.84.A0.ED.83.9D" name=".ED.8F.B0.ED.8A.B8_.EC.84.A0.ED.83.9D">폰트 선택</h2>
+<p>CSS에 익숙하다면 특정 폰트에서 들어있지 않은 기호들의 경우 폰트 속성에서 예비 폰트들을 지정할수 있다는 것을 알고 있을 것입니다. 현재 SVG 렌더링 백엔드는 단지 지정된 첫번째 폰트를 사용하도록 시도하며 만약 그 폰트가 없다면 플랫폼의 폰트를 사용하게 됩니다. 예비 폰트는 사용되지 않습니다; 그래서 예를 들면 <code>font-family="Arial,LucidaSansUnicode"</code> 이 코드는 Arial 폰트를 사용할 수 없는 경우 LucidaSansUnicode가 사용되게끔 하는 것은 아닙니다.</p>
+<h2 id=".EC.9D.B8.EC.87.84" name=".EC.9D.B8.EC.87.84">인쇄</h2>
+<p>아쉽지만 현재 인쇄는 SVG의 벡터 속성을 이용해서 매우 선명하게 출력해내도록 하는 부분은 완료되지 않았습니다. 하지만 화면 해상도정도로 그려져서 그 이미지처럼 출력됩니다.</p>
+<p>Windows상에서 출력했을 때 폰트의 크기는 SVG에서 지정된 것보다도 훨씬 크게 출력됩니다.</p>
+<h2 id=".EA.B7.B8.EB.A3.B9_opacity" name=".EA.B7.B8.EB.A3.B9_opacity">그룹 opacity</h2>
+<p>그룹 opacity 속성인 <code>opacity</code>는 SVG 컨테이너 객체들을 부분적으로는 투명한 레이어로 다루어질 수 있도록 해주며, <code>fill-opacity</code>나 <code>stroke-opacity</code>들과는 독립적인 속성입니다. 현재 <code>opacity</code>의 구현은 꽤 느려서, 참으면서 사용을 해야할 겁니다. <code>fill-opacity</code>와 <code>stroke-opacity</code>는 훨씬 빠르며 컨텐츠에 따라서 같은 결과를 만들어 낼 수도 있습니다.</p>
+<p>그룹 opacity는 현재 <code> &lt;g&gt;</code>에만 구현되어 있으며 <code>&lt;text&gt;</code>나 <code>&lt;svg&gt;</code>는 구현되어 있지 않습니다.</p>
+<h2 id=".ED.8F.B0.ED.8A.B8_.EA.B8.B0.EC.9A.B8.EC.9D.B4.EA.B8.B0" name=".ED.8F.B0.ED.8A.B8_.EA.B8.B0.EC.9A.B8.EC.9D.B4.EA.B8.B0">폰트 기울이기</h2>
+<p>Microsoft Windows나 Mac OSX 플랫폼상에서는 문장의 기울였을때 내부의 채워짐이 정확히 일치하지 않습니다. 이 오차는 보통 매우 작은데 약간 더 기울이거나 함으로써 해결할 수 있습니다. 이 오차에 대한 예입니다:</p>
+<p><img alt="그림:그림-text-fill-stroke.png"></p>
+<h2 id=".3Cimage.3E" name=".3Cimage.3E"><code>&lt;image&gt;</code></h2>
+<p><code>&lt;image&gt;</code>는 Firefox 1.5의 SVG 이미지들에는 지원되지 않습니다; 대신에 Firefox에서 사용되는 유일한 raster 이미지 포맷입니다.</p>
+<p><code>&lt;image&gt;</code>의 모든 인스터스들은 사용되는 이미지와는 별도의 복사본을 가지는데 이는 만약 컨텐츠내에 아이콘과 같은 이미지에 대해 다수의 복사본을 사용한다면 새겨두어야 할 부분입니다. 안타깝게도 이 경우에 <code>&lt;image&gt;</code>의 <code>&lt;use&gt;</code>는 또 다른 다른 복사본으로 간주합니다.</p>
+<p>덧붙여, Firefox 1.5에서는 SVG에서 다수의 raster 이미지를 사용하면 성능히 심각하게 떨어질 수 있습니다.</p>
+<h2 id="Events" name="Events">Events</h2>
+<p>We support the SVG event attributes with the exception of <code>onfocusin</code>, <code>onfocusout</code>, and <code>onactivate</code>.</p>
+<p>Our <code>onload</code> handling is currently somewhat nonstandard, but hopefully not in a way that hurts its use. While the code specified by the <code>onload</code> attribute is called for each element, an <code>SVGLoad</code> event is only fired for the root <code>&lt;svg&gt;</code> element. Some DOM methods will return garbage or an error if called before the corresponding element has been rendered, which you may need to take into account when writing <code>onload</code> code. Such methods are <code>getBBox</code>, <code>getScreenCTM</code>, etc.</p>
+<p>We do not support the Adobe specific key events (<code>onkeydown</code>, <code>onkeyup</code>).</p>
+<h2 id="Interoperability" name="Interoperability">Interoperability</h2>
+<p>If you're working with current SVG content, you may encounter problems loading it into Firefox. Most of the problems tend to be fairly trivial, and are the result of Firefox being a stricter implementation. Jonathan Watt's <a class="external" href="http://jwatt.org/svg/authoring/">SVG Authoring Guidelines</a> explains the common problems.</p>
+<h2 id="SVG_usage_situations" name="SVG_usage_situations">SVG usage situations</h2>
+<p>Firefox 1.5 handles SVG as entire documents or when referenced by <code>embed</code>, <code>object</code>, or <code>iframe</code>. It cannot currently be used as source for an HTML or XHTML <code>img</code> element or for CSS properties that take an image reference.</p>
+<h2 id="Animation" name="Animation">Animation</h2>
+<p>Firefox 1.5 does not implement declarative animation, but does support dynamic scripting. Doug Shepers has used this to create <a class="external" href="http://www.vectoreal.com/smilscript/">SmilScript</a>, a small Javascript library that implements a subset of SVG's declarative animation.</p>
+<h2 id="Bugs_fixed_in_Firefox_2" name="Bugs_fixed_in_Firefox_2">Bugs fixed in Firefox 2</h2>
+<p>Firefox 2 fixes some bugs in its SVG implementation. This section provides a quick overview of the most interesting ones.</p>
+<ul>
+ <li>A problem filling and stroking text in which the drawing position isn't reset correctly between the two operations has been fixed (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=333615">333615</a>).</li>
+</ul>
+<ul>
+ <li>Radial gradients now properly clamp the <code>fx</code> and <code>fy</code> attributes to ensure that they're within the circumference of a circle (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=330682">330682</a>).</li>
+</ul>
+<ul>
+ <li>Text spans' and text elements' lengths can now be computed using their <code>getComputedTextLength()</code> methods, which improves compatibility with certain web sites (bugs <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311031">311031</a> and <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=264380">264380</a>).</li>
+</ul>
+<ul>
+ <li><code>&lt;tspan&gt;</code> elements now properly support the <code>dx</code> and <code>dy</code> attributes, and work if the <code>x</code> and <code>y</code> attributes aren't specified (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311063">311063</a>).</li>
+</ul>
+<ul>
+ <li>Improved invalidation logic on redraws, which prevents dropped pixels in certain cases (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312269">312269</a>).</li>
+</ul>
+<ul>
+ <li>Fixed a bug that prevented events from being handled properly for objects exposed by the clip path of another object (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=315861">315861</a>).</li>
+</ul>
+<ul>
+ <li>Fixed a bug that would crash if a <code>&lt;path&gt;</code> element had a <code>d</code> attribute with an empty string (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=318379">318379</a>).</li>
+</ul>
+<ul>
+ <li>The <code>overflow</code> attribute now works for the <code>marker</code> element, using the syntax <code>overflow="visible"</code>, which did not previously work correctly (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=320623">320623</a>).</li>
+</ul>
+<ul>
+ <li>You can now access the <code>&lt;style&gt;</code> attribute of <code>marker</code> elements without throwing an exception (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=323589">323589</a>).</li>
+</ul>
+<ul>
+ <li>You can now use percent values for the radius of a radial gradient (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=323669">323669</a>).</li>
+</ul>
+<ul>
+ <li>The <code>documentElement.createSVGAngle()</code> method is now implemented (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=327437">327437</a>).</li>
+</ul>
+<ul>
+ <li>Making a <code>&lt;stop&gt;</code> element a child of another <code>&lt;stop&gt;</code> element no longer asserts (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=328137">328137</a>).</li>
+</ul>
+<ul>
+ <li>Changes to the height and width of markers, as well as to the orientation of the marker, now work (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=325728">325728</a>).</li>
+</ul>
+<ul>
+ <li>Font sizes when printing on Windows are no longer much larger than specified for SVG (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=314707">314707</a>).</li>
+</ul>
+<h2 id="Element_implementation_status" name="Element_implementation_status">Element implementation status</h2>
+<table style="margin: 5px;">
+ <tbody>
+ <tr>
+ <th><b>Element</b></th>
+ <th><b>Notes</b></th>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#basic-structure-mod">Structure Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SVGElement">svg</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ <li><code>currentScale</code> and <code>currentTranslate</code> DOM attributes are implemented, but there is no pan and zoom user interface.</li>
+ <li>SVGSVGElement
+ <ul>
+ <li>Unimplemented attributes: contentScriptType, contentStyleType, viewport, useCurrentView, currentView</li>
+ <li>Unimplemented bindings: pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, createSVGAngle, getElementById</li>
+ </ul>
+ </li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#GElement">g</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DefsElement">defs</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DescElement">desc</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ <li>Only stored in the DOM, no user interface.&lt;/td&gt;</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#TitleElement">title</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/metadata.html#MetadataElement">metadata</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ <li>Only stored in the DOM, no user interface.&lt;/td&gt;</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SymbolElement">symbol</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#UseElement">use</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ <li>Only works for internal document references (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=269482">bug 269482</a>).</li>
+ <li>Doesn't completely follow &lt;svg:use&gt; cascading rules (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265894">bug 265894</a>).</li>
+ <li>Doesn't deliver events to a SVGElementInstance tree (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265895">bug 265895</a>).</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#conditional-mod">Conditional Processing Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SwitchElement">switch</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#image-mod">Image Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#ImageElement">image</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ <li>Only works for raster images (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=272288">bug 272288</a>).</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#style-mod">Style Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#StyleElement">style</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#shape-mod">Shape Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/paths.html#PathElement">path</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ <li>SVGPathElement Interface
+ <ul>
+ <li>Unimplemented attributes: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList</li>
+ <li>Unimplemented bindings: getTotalLength, getPointAtLength, getPathSegAtLength</li>
+ </ul>
+ </li>
+ <li>SVGPathSegList Interface
+ <ul>
+ <li>Unimplemented bindings: replaceItem()</li>
+ </ul>
+ </li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#RectElement">rect</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#CircleElement">circle</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#LineElement">line</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#EllipseElement">ellipse</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolylineElement">polyline</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolygonElement">polygon</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/text.html#text-mod">Text Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextElement">text</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ <li>SVGTextElement
+ <ul>
+ <li>Unimplemented attributes: rotate, textLength, lengthAdjust</li>
+ <li>Unimplemented bindings: getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString</li>
+ <li>Bindings not functional at <code>onload</code> time: getExtentOfChar</li>
+ </ul>
+ </li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TSpanElement">tspan</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ <li>SVGTSpanElement
+ <ul>
+ <li>Unimplemented attributes: rotate, textLength, lengthAdjust</li>
+ <li>Unimplemented bindings: getNumberOfChars, getComputedTextLength, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString</li>
+ </ul>
+ </li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextPathElement">textPath</a></td>
+ <td>
+ <ul>
+ <li>Implemented in Firefox 2.</li>
+ <li>Unimplemented attributes: method, spacing, textLength, lengthAdjust</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElement">altGlyph</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphDefElement">altGlyphDef</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphItemElement">altGlyphItem</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElement">glyphRef</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#marker-mod">Marker Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#MarkerElement">marker</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/color.html#color-profile-mod">Color Profile Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProfileElement">color-profile</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#gradient-mod">Gradient Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement">linearGradient</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElement">radialGradient</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#StopElement">stop</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#pattern-mod">Pattern Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">pattern</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#clip-mod">Clip Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#ClipPathElement">clipPath</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ <li>Won't handle clip paths with have elements with different clip-rule properties or that reference other clipPaths. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=267224">bug 267224</a>).</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#mask-mod">Mask Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">mask</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#filter-mod">Filter Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElement">filter</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feBlendElement">feBlend</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement">feColorMatrix</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement">feComponentTransfer</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feCompositeElement">feComposite</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement">feConvolveMatrix</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement">feDiffuseLighting</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement">feDisplacementMap</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFloodElement">feFlood</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement">feGaussianBlur</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeElement">feMerge</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeNodeElement">feMergeNode</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyElement">feMorphology</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feOffsetElement">feOffset</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement">feSpecularLighting</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTileElement">feTile</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement">feTurbulence</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDistantLightElement">feDistantLight</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#fePointLightElement">fePointLight</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpotLightElement">feSpotLight</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncRElement">feFuncR</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncGElement">feFuncG</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncBElement">feFuncB</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncAElement">feFuncA</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#cursor-mod">Cursor Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#CursorElement">cursor</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#hyperlinking-mod">Hyperlinking Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#AElement">a</a></td>
+ <td>
+ <ul>
+ <li>Implemented as an XBL binding - object is not of type SVGAElement.</li>
+ <li>Only <code>xlink:href</code>, <code>xlink:show</code>, and <code>xlink:target</code> (as of Firefox 2) attributes implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#view-mod">View Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#ViewElement">view</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/script.html#scripting-mod">Scripting Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: lightgreen;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/script.html#ScriptElement">script</a></td>
+ <td>
+ <ul>
+ <li>Implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#animation-mod">Animation Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateElement">animate</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#SetElement">set</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">animateMotion</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">animateTransform</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">animateColor</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#mpathElement">mpath</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#font-mod">Font Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceElement">font</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#GlyphElement">glyph</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#MissingGlyphElement">missing-glyph</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#HKernElement">hkern</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#VKernElement">vkern</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceSrcElement">font-face-src</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-uri</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-format</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-name</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#DefinitionSrcElement">definition-src</a></td>
+ <td>
+ <ul>
+ <li>Not implemented.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#extensibility-mod">Extensibility Module</a></th>
+ </tr>
+ <tr style="color: black; background-color: salmon;">
+ <td><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">foreignObject</a></td>
+ <td>
+ <ul>
+ <li>Implemented, but not built.</li>
+ </ul>
+ </td>
+ </tr>
+ </tbody>
+</table>
+<p>{{ languages( { "fr": "fr/SVG_dans_Firefox_1.5", "ja": "ja/SVG_in_Firefox_1.5", "pl": "pl/SVG_w_Firefoksie" } ) }}</p>
diff --git a/files/ko/web/svg/tutorial/기본_도형/index.html b/files/ko/web/svg/tutorial/basic_shapes/index.html
index 8169e4c890..8169e4c890 100644
--- a/files/ko/web/svg/tutorial/기본_도형/index.html
+++ b/files/ko/web/svg/tutorial/basic_shapes/index.html
diff --git a/files/ko/web/svg/tutorial/시작하기/index.html b/files/ko/web/svg/tutorial/getting_started/index.html
index 8a0b5c82b7..8a0b5c82b7 100644
--- a/files/ko/web/svg/tutorial/시작하기/index.html
+++ b/files/ko/web/svg/tutorial/getting_started/index.html
diff --git a/files/ko/web/svg/tutorial/위치/index.html b/files/ko/web/svg/tutorial/positions/index.html
index 391765175c..391765175c 100644
--- a/files/ko/web/svg/tutorial/위치/index.html
+++ b/files/ko/web/svg/tutorial/positions/index.html
diff --git a/files/ko/web/svg/tutorial/svg_and_css/index.html b/files/ko/web/svg/tutorial/svg_and_css/index.html
new file mode 100644
index 0000000000..d8ca001fb2
--- /dev/null
+++ b/files/ko/web/svg/tutorial/svg_and_css/index.html
@@ -0,0 +1,195 @@
+---
+title: SVG graphics
+slug: Web/CSS/Getting_Started/SVG_graphics
+tags:
+ - 'CSS:Getting_Started'
+translation_of: Web/SVG/Tutorial/SVG_and_CSS
+---
+<p>이 페이지는 그래픽을 만들기 위한 특별한 언어 SVG를 설명합니다.</p>
+<p>SVG 기능이 있는 모질라 브라우저에서 작동하는 간단한 예제를 만듭니다.</p>
+<h3 id=".EC.A0.95.EB.B3.B4:_SVG" name=".EC.A0.95.EB.B3.B4:_SVG">정보: SVG</h3>
+<p>
+ <i>
+ SVG</i>
+ (Scalable Vector Graphics, 스케일러블 벡터 그래픽)은 그래픽을 만들어내기 위한 XML-기반 언어입니다.</p>
+<p>움직이지 않는 이미지(static image)를 위해 사용될 수 있으며, 또한 애니메이션 과 사용자 인터페이스를 위해서도 사용될 수 있습니다.</p>
+<p>다른 XML-기반 언어들과 같이, SVG는 CSS 스타일 시트를 지원하여 그래픽에 사용되는 스타일을 그래픽의 내용물과 분리시킬 수 있게 합니다.</p>
+<p>또한, 다른 문서 마크업 언어들과 함께 사용되는 스타일 시트들도 이미지가 요구되는 곳에 SVG 그래픽의 URL을 지정할 수 있습니다. 예를들면, HTML 문서와 함께 사용하는 스타일 시트에서 <code>background</code> 속성 값에 SVG값의 URL을 지정할 수 있습니다.</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
+ <caption>
+ More details</caption>
+ <tbody>
+ <tr>
+ <td>이글을 쓰는 시점에서(2005년 중반), 모질라 브라우저의 몇몇 최근 빌드만이 SVG 지원을 내장하고 있었습니다.
+ <p><a class="external" href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>에서 제공되는 것 같은 플럭인(plugin)을 인스톨하면 다른 버전에서도 SVG 지원을 추가할 수 있습니다.</p>
+ <p>모질라에서의 SVG에 관한 더많은 정보를 원하시면, 이 위키안의 <a href="ko/SVG">SVG</a> 페이지를 보세요.</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+<h3 id=".EC.95.A1.EC.85.98:_SVG_.EC.98.88.EC.A0.9C" name=".EC.95.A1.EC.85.98:_SVG_.EC.98.88.EC.A0.9C">액션: SVG 예제</h3>
+<p>새로운 SVG 문서를 텍스트 파일 <code>doc8.svg</code>로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p>
+<div style="width: 48em; height: 12em; overflow: auto;">
+ <pre>&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;?xml-stylesheet type="text/css" href="style8.css"?&gt;
+
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+
+&lt;svg width="600px" height="600px" viewBox="-300 -300 600 600"
+ xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+&lt;title&gt;SVG demonstration&lt;/title&gt;
+&lt;desc&gt;Mozilla CSS Getting Started - SVG demonstration&lt;/desc&gt;
+
+&lt;defs&gt;
+ &lt;g id="segment" class="segment"&gt;
+ &lt;path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/&gt;
+ &lt;path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/&gt;
+ &lt;/g&gt;
+ &lt;g id="quadrant"&gt;
+ &lt;use xlink:href="#segment"/&gt;
+ &lt;use xlink:href="#segment" transform="rotate(18)"/&gt;
+ &lt;use xlink:href="#segment" transform="rotate(36)"/&gt;
+ &lt;use xlink:href="#segment" transform="rotate(54)"/&gt;
+ &lt;use xlink:href="#segment" transform="rotate(72)"/&gt;
+ &lt;/g&gt;
+ &lt;g id="petals"&gt;
+ &lt;use xlink:href="#quadrant"/&gt;
+ &lt;use xlink:href="#quadrant" transform="rotate(90)"/&gt;
+ &lt;use xlink:href="#quadrant" transform="rotate(180)"/&gt;
+ &lt;use xlink:href="#quadrant" transform="rotate(270)"/&gt;
+ &lt;/g&gt;
+ &lt;radialGradient id="fade" cx="0" cy="0" r="200"
+ gradientUnits="userSpaceOnUse"&gt;
+ &lt;stop id="fade-stop-1" offset="33%"/&gt;
+ &lt;stop id="fade-stop-2" offset="95%"/&gt;
+ &lt;/radialGradient&gt;
+ &lt;/defs&gt;
+
+&lt;text id="heading" x="-280" y="-270"&gt;
+ SVG demonstration&lt;/text&gt;
+&lt;text id="caption" x="-280" y="-250"&gt;
+ Move your mouse pointer over the flower.&lt;/text&gt;
+
+&lt;g id="flower"&gt;
+ &lt;circle id="overlay" cx="0" cy="0" r="200"
+ stroke="none" fill="url(#fade)"/&gt;
+ &lt;use id="outer-petals" xlink:href="#petals"/&gt;
+ &lt;use id="inner-petals" xlink:href="#petals"
+ transform="rotate(9) scale(0.33)"/&gt;
+ &lt;/g&gt;
+
+&lt;/svg&gt;
+</pre>
+</div>
+<p>새로운 CSS 문서를 텍스트 파일 <code>style8.css</code>로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p>
+<div style="width: 48em; height: 12em; overflow: auto;">
+ <pre>/*** SVG demonstration ***/
+
+/* page */
+svg {
+ background-color: beige;
+ }
+
+#heading {
+ font-size: 24px;
+ font-weight: bold;
+ }
+
+#caption {
+ font-size: 12px;
+ }
+
+/* flower */
+#flower:hover {
+ cursor: crosshair;
+ }
+
+/* gradient */
+#fade-stop-1 {
+ stop-color: blue;
+ }
+
+#fade-stop-2 {
+ stop-color: white;
+ }
+
+/* outer petals */
+#outer-petals {
+ opacity: .75;
+ }
+
+#outer-petals .segment-fill {
+ fill: azure;
+ stroke: lightsteelblue;
+ stroke-width: 1;
+ }
+
+#outer-petals .segment-edge {
+ fill: none;
+ stroke: deepskyblue;
+ stroke-width: 3;
+ }
+
+#outer-petals .segment:hover &gt; .segment-fill {
+ fill: plum;
+ stroke: none;
+ }
+
+#outer-petals .segment:hover &gt; .segment-edge {
+ stroke: slateblue;
+ }
+
+/* inner petals */
+#inner-petals .segment-fill {
+ fill: yellow;
+ stroke: yellowgreen;
+ stroke-width: 1;
+ }
+
+#inner-petals .segment-edge {
+ fill: none;
+ stroke: yellowgreen;
+ stroke-width: 9;
+ }
+
+#inner-petals .segment:hover &gt; .segment-fill {
+ fill: darkseagreen;
+ stroke: none;
+ }
+
+#inner-petals .segment:hover &gt; .segment-edge {
+ stroke: green;
+ }
+</pre>
+</div>
+<p>문서를 SVG 기능이 있는(SVG-enabled) 브라우저에서 여세요. 마우스 포인터(mouse pointer)를 그래픽위로 움직여 보세요.</p>
+<p>이 위키페이지는 SVG를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 다음과 같이 보입니다:</p>
+<table style="border: 2px outset #36b;">
+ <tbody>
+ <tr>
+ <td><img alt="SVG demonstration"></td>
+ </tr>
+ </tbody>
+</table>
+<p>이 예제에서 주의할 점:</p>
+<ul>
+ <li>SVG 문서는 전처럼 스타일 시트에 링크되어 있습니다.</li>
+ <li>SVG는 그 자신만의 CSS 스타일 시트와 값을 가지고 있습니다. 이들중 몇가지는 HTML을 위한 CSS의 속성과 비슷합니다.</li>
+</ul>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>
+ Challenge</caption>
+ <tbody>
+ <tr>
+ <td>스타일 시트를 변경해서, 마우스 포인터가 안쪽 꽃잎들 중 한개 위에 오게 되면, 바깥 쪽 꽃잎이 작동하는 방식은 바뀌지 않은채 모든 안쪽꽃잎 색이 핑크(pink)색으로 변하게 하세요</td>
+ </tr>
+ </tbody>
+</table>
+<h4 id=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F" name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F">그럼 다음은?</h4>
+<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a>Discussion</a> page.</p>
+<p>이 예제에서 SVG 기능이 있는(SVG enabled) 브라우저는 이미 SVG 엘리먼트를 디스플레이하는 방법을 알고 있습니다. 스타일 시트는 단지 그 디스플레이를 특정 방식으로 수정할 뿐 입니다. 그러나 디스플레이하는 방식이 미리 지정되어 있지 않은 범용(general-purpose) XML 문서를 위해서 CSS를 사용할 수있습니다. 다음 페이지에서는 이를 실행해 봅니다: <b><a href="ko/CSS/Getting_Started/XML_data">XML data</a></b></p>
+<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Graphiques_SVG", "pl": "pl/CSS/Na_pocz\u0105tek/Grafika_SVG" } ) }}</p>