From ee778d6eea54935fd05022e0ba8c49456003381a Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:48:24 +0100 Subject: unslug ko: move --- files/ko/web/svg/element/rect/index.html | 95 +++ .../index.html" | 95 --- .../web/svg/svg_1.1_support_in_firefox/index.html | 845 +++++++++++++++++++++ files/ko/web/svg/tutorial/basic_shapes/index.html | 141 ++++ .../ko/web/svg/tutorial/getting_started/index.html | 94 +++ files/ko/web/svg/tutorial/positions/index.html | 45 ++ files/ko/web/svg/tutorial/svg_and_css/index.html | 195 +++++ .../index.html" | 141 ---- .../index.html" | 94 --- .../tutorial/\354\234\204\354\271\230/index.html" | 45 -- 10 files changed, 1415 insertions(+), 375 deletions(-) create mode 100644 files/ko/web/svg/element/rect/index.html delete mode 100644 "files/ko/web/svg/element/\354\202\254\352\260\201\355\230\225/index.html" create mode 100644 files/ko/web/svg/svg_1.1_support_in_firefox/index.html create mode 100644 files/ko/web/svg/tutorial/basic_shapes/index.html create mode 100644 files/ko/web/svg/tutorial/getting_started/index.html create mode 100644 files/ko/web/svg/tutorial/positions/index.html create mode 100644 files/ko/web/svg/tutorial/svg_and_css/index.html delete mode 100644 "files/ko/web/svg/tutorial/\352\270\260\353\263\270_\353\217\204\355\230\225/index.html" delete mode 100644 "files/ko/web/svg/tutorial/\354\213\234\354\236\221\355\225\230\352\270\260/index.html" delete mode 100644 "files/ko/web/svg/tutorial/\354\234\204\354\271\230/index.html" (limited to 'files/ko/web/svg') diff --git a/files/ko/web/svg/element/rect/index.html b/files/ko/web/svg/element/rect/index.html new file mode 100644 index 0000000000..90a3d08d24 --- /dev/null +++ b/files/ko/web/svg/element/rect/index.html @@ -0,0 +1,95 @@ +--- +title: +slug: Web/SVG/Element/사각형 +translation_of: Web/SVG/Element/rect +--- +
{{SVGRef}}
+ +

<rect> 요소는 SVG 기본 모형이고 코너의 위치와 폭과 높이에 따라 사각형을 만드는데 사용된다. 또한 모서리가 둥근 사각형을 만들 수 있다.

+ +
+ + +
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Simple rect element -->
+  <rect x="0" y="0" width="100" height="100" />
+
+  <!-- Rounded corner rect element -->
+  <rect x="120" y="0" width="100" height="100" rx="15" ry="15" />
+</svg>
+ +

{{EmbedLiveSample('Example', 100, '100%')}}

+
+ +

컨택스트 사용해보기

+ + + + + + + + + + + + + + + + +
카테고리기본 도형 요소, 그래픽 요소, 모형 요소
허용 된 콘텐츠Any number of the following elements, in any order:
+ Animation elements »
+ Descriptive elements »
규범 문서SVG 1.1 (2nd Edition)
+ +

Example

+ +

간단한 rect 사용하기

+ +

» rect-1.svg

+ +

라운드 코너와 rect 사용하기

+ +

» rect-2.svg

+ +

속성

+ +

전역 속성

+ + + +

지정 속성

+ + + +

DOM Interface

+ +

This element implements the SVGRectElement interface.

+ +

Browser compatibility

+ +

{{Compat("svg.elements.rect")}}

+ +

See also

+ + diff --git "a/files/ko/web/svg/element/\354\202\254\352\260\201\355\230\225/index.html" "b/files/ko/web/svg/element/\354\202\254\352\260\201\355\230\225/index.html" deleted file mode 100644 index 90a3d08d24..0000000000 --- "a/files/ko/web/svg/element/\354\202\254\352\260\201\355\230\225/index.html" +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: -slug: Web/SVG/Element/사각형 -translation_of: Web/SVG/Element/rect ---- -
{{SVGRef}}
- -

<rect> 요소는 SVG 기본 모형이고 코너의 위치와 폭과 높이에 따라 사각형을 만드는데 사용된다. 또한 모서리가 둥근 사각형을 만들 수 있다.

- -
- - -
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
-  <!-- Simple rect element -->
-  <rect x="0" y="0" width="100" height="100" />
-
-  <!-- Rounded corner rect element -->
-  <rect x="120" y="0" width="100" height="100" rx="15" ry="15" />
-</svg>
- -

{{EmbedLiveSample('Example', 100, '100%')}}

-
- -

컨택스트 사용해보기

- - - - - - - - - - - - - - - - -
카테고리기본 도형 요소, 그래픽 요소, 모형 요소
허용 된 콘텐츠Any number of the following elements, in any order:
- Animation elements »
- Descriptive elements »
규범 문서SVG 1.1 (2nd Edition)
- -

Example

- -

간단한 rect 사용하기

- -

» rect-1.svg

- -

라운드 코너와 rect 사용하기

- -

» rect-2.svg

- -

속성

- -

전역 속성

- - - -

지정 속성

- -
    -
  • {{ SVGAttr("x") }}
  • -
  • {{ SVGAttr("y") }}
  • -
  • {{ SVGAttr("width") }}
  • -
  • {{ SVGAttr("height") }}
  • -
  • {{ SVGAttr("rx") }}
  • -
  • {{ SVGAttr("ry") }}
  • -
- -

DOM Interface

- -

This element implements the SVGRectElement interface.

- -

Browser compatibility

- -

{{Compat("svg.elements.rect")}}

- -

See also

- -
    -
  • {{ SVGElement("path") }}
  • -
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 +--- +

Firefox 2는 더욱 폭넓은 Scalable Vector Graphics (SVG) 기능 구현을 위해서 계속해서 향상시켜 나가고 있습니다. 많은 스펙과 버그 수정들이 포함되었지만 Firefox 1.5이후 새로이 추가된 유일한 특징이 바로 <textPath>입니다. -- 아래 참조.

+

Firefox SVG는 SVG 1.1의 부분집합이지만 그렇다고 공식 프로필(Tiny, Basic, Full)들중 어느 것도 아닙니다. 각 내용들과 그것들이 Firefox 2에서 구현되었는지 아닌지에 대한 전체 내용은 문서의 마지막에서 찾을 수 있습니다. 문서의 나머지 부분은 우리의 구현상 제약사항들에 대한 정보를 제공할 것입니다.

+

우리들의 구현의 특이한 점들이 컨텐츠를 개발함에 있어서 번거로울 수도 있다는 것을 알고 있습니다. 하지만 커다란 스펙의 완전한 구현이 될 때까지 여러분의 인내를 부탁드립니다.

+

이 문서를 읽을때 이들 구현들의 세부사항들이 언제 바뀔지 궁금해할지도 모릅니다. 불행히도 현재 로드맵에 따르면 Gecko의 다음 버전에 기반한 Firefox의 공식 출시일이 꽤 나중이 되겠지만 2007년 1/4분기라고 나와있습니다. 그러나 새로운 기능을 시험해보고 싶다면 현재 개발중인 nightly builds를 사용해볼 수 있습니다.

+

성능

+

Firefox가 출시하는 모든 플랫폼은 같은 렌더링 백엔드 cairo를 사용합니다. 그래서 이들 간에 성능에 관한 특징은 일반적으로 유사할 것입니다. Linux에서의 성능은 예측하기가 가장 힘든데 이는 다양한 X서버마다 RENDER 확장의 구현이 다양하기 때문입니다.

+

Windows에서 SVG 렌더링은 다른 플랫폼상에서 보다도 상당히 빠릅니다.

+

좌표 범위

+

당신의 컨텐츠가 상당히 넓은 범위의 좌표를 가지는 구조를 가지고 있다면 cairo가 내부적으로 계산할 때 수를 16.16비트의 고정 소수점 표현 방식을 사용하기 때문에 발생할 수 있는 문제점들에 대해서 주의 깊게 고려해야 합니다. Cairo는 rasterization하기 전에 primitives들에 대한 클리핑을 하지 않기 때문에 변환과정 후 최종적으로 -32678에서 32677의 범위를 벗어나는 좌표들에 대해서는 렌더링 오류나 아주 느린 성능을 보여주기도 합니다.

+

Windows 98에서의 Text

+

안타깝게도 윈도우즈에서 cairo를 렌더링 엔진으로 사용한다면 Windows 98에서 텍스트 렌더링이 되지않는 버그가 있다. 사실, 그것보다 더 심각한 문제가 있다 : SVG 컨텐츠를 렌더링하는 도중에 텍스트를 만나면 모든 그리기 기능이 정지되어버리는 것이다.

+

폰트 선택

+

CSS에 익숙하다면 특정 폰트에서 들어있지 않은 기호들의 경우 폰트 속성에서 예비 폰트들을 지정할수 있다는 것을 알고 있을 것입니다. 현재 SVG 렌더링 백엔드는 단지 지정된 첫번째 폰트를 사용하도록 시도하며 만약 그 폰트가 없다면 플랫폼의 폰트를 사용하게 됩니다. 예비 폰트는 사용되지 않습니다; 그래서 예를 들면 font-family="Arial,LucidaSansUnicode" 이 코드는 Arial 폰트를 사용할 수 없는 경우 LucidaSansUnicode가 사용되게끔 하는 것은 아닙니다.

+

인쇄

+

아쉽지만 현재 인쇄는 SVG의 벡터 속성을 이용해서 매우 선명하게 출력해내도록 하는 부분은 완료되지 않았습니다. 하지만 화면 해상도정도로 그려져서 그 이미지처럼 출력됩니다.

+

Windows상에서 출력했을 때 폰트의 크기는 SVG에서 지정된 것보다도 훨씬 크게 출력됩니다.

+

그룹 opacity

+

그룹 opacity 속성인 opacity는 SVG 컨테이너 객체들을 부분적으로는 투명한 레이어로 다루어질 수 있도록 해주며, fill-opacitystroke-opacity들과는 독립적인 속성입니다. 현재 opacity의 구현은 꽤 느려서, 참으면서 사용을 해야할 겁니다. fill-opacitystroke-opacity는 훨씬 빠르며 컨텐츠에 따라서 같은 결과를 만들어 낼 수도 있습니다.

+

그룹 opacity는 현재 <g>에만 구현되어 있으며 <text><svg>는 구현되어 있지 않습니다.

+

폰트 기울이기

+

Microsoft Windows나 Mac OSX 플랫폼상에서는 문장의 기울였을때 내부의 채워짐이 정확히 일치하지 않습니다. 이 오차는 보통 매우 작은데 약간 더 기울이거나 함으로써 해결할 수 있습니다. 이 오차에 대한 예입니다:

+

그림:그림-text-fill-stroke.png

+

<image>

+

<image>는 Firefox 1.5의 SVG 이미지들에는 지원되지 않습니다; 대신에 Firefox에서 사용되는 유일한 raster 이미지 포맷입니다.

+

<image>의 모든 인스터스들은 사용되는 이미지와는 별도의 복사본을 가지는데 이는 만약 컨텐츠내에 아이콘과 같은 이미지에 대해 다수의 복사본을 사용한다면 새겨두어야 할 부분입니다. 안타깝게도 이 경우에 <image><use>는 또 다른 다른 복사본으로 간주합니다.

+

덧붙여, Firefox 1.5에서는 SVG에서 다수의 raster 이미지를 사용하면 성능히 심각하게 떨어질 수 있습니다.

+

Events

+

We support the SVG event attributes with the exception of onfocusin, onfocusout, and onactivate.

+

Our onload handling is currently somewhat nonstandard, but hopefully not in a way that hurts its use. While the code specified by the onload attribute is called for each element, an SVGLoad event is only fired for the root <svg> 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 onload code. Such methods are getBBox, getScreenCTM, etc.

+

We do not support the Adobe specific key events (onkeydown, onkeyup).

+

Interoperability

+

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 SVG Authoring Guidelines explains the common problems.

+

SVG usage situations

+

Firefox 1.5 handles SVG as entire documents or when referenced by embed, object, or iframe. It cannot currently be used as source for an HTML or XHTML img element or for CSS properties that take an image reference.

+

Animation

+

Firefox 1.5 does not implement declarative animation, but does support dynamic scripting. Doug Shepers has used this to create SmilScript, a small Javascript library that implements a subset of SVG's declarative animation.

+

Bugs fixed in Firefox 2

+

Firefox 2 fixes some bugs in its SVG implementation. This section provides a quick overview of the most interesting ones.

+
    +
  • A problem filling and stroking text in which the drawing position isn't reset correctly between the two operations has been fixed (bug 333615).
  • +
+
    +
  • Radial gradients now properly clamp the fx and fy attributes to ensure that they're within the circumference of a circle (bug 330682).
  • +
+
    +
  • Text spans' and text elements' lengths can now be computed using their getComputedTextLength() methods, which improves compatibility with certain web sites (bugs 311031 and 264380).
  • +
+
    +
  • <tspan> elements now properly support the dx and dy attributes, and work if the x and y attributes aren't specified (bug 311063).
  • +
+
    +
  • Improved invalidation logic on redraws, which prevents dropped pixels in certain cases (bug 312269).
  • +
+
    +
  • Fixed a bug that prevented events from being handled properly for objects exposed by the clip path of another object (bug 315861).
  • +
+
    +
  • Fixed a bug that would crash if a <path> element had a d attribute with an empty string (bug 318379).
  • +
+
    +
  • The overflow attribute now works for the marker element, using the syntax overflow="visible", which did not previously work correctly (bug 320623).
  • +
+
    +
  • You can now access the <style> attribute of marker elements without throwing an exception (bug 323589).
  • +
+
    +
  • You can now use percent values for the radius of a radial gradient (bug 323669).
  • +
+
    +
  • The documentElement.createSVGAngle() method is now implemented (bug 327437).
  • +
+
    +
  • Making a <stop> element a child of another <stop> element no longer asserts (bug 328137).
  • +
+
    +
  • Changes to the height and width of markers, as well as to the orientation of the marker, now work (bug 325728).
  • +
+
    +
  • Font sizes when printing on Windows are no longer much larger than specified for SVG (bug 314707).
  • +
+

Element implementation status

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementNotes
Structure Module
svg +
    +
  • Implemented.
  • +
  • currentScale and currentTranslate DOM attributes are implemented, but there is no pan and zoom user interface.
  • +
  • SVGSVGElement +
      +
    • Unimplemented attributes: contentScriptType, contentStyleType, viewport, useCurrentView, currentView
    • +
    • Unimplemented bindings: pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, createSVGAngle, getElementById
    • +
    +
  • +
+
g +
    +
  • Implemented.
  • +
+
defs +
    +
  • Implemented.
  • +
+
desc +
    +
  • Implemented.
  • +
  • Only stored in the DOM, no user interface.</td>
  • +
+
title +
    +
  • Implemented.
  • +
+
metadata +
    +
  • Implemented.
  • +
  • Only stored in the DOM, no user interface.</td>
  • +
+
symbol +
    +
  • Implemented.
  • +
+
use +
    +
  • Implemented.
  • +
  • Only works for internal document references (bug 269482).
  • +
  • Doesn't completely follow <svg:use> cascading rules (bug 265894).
  • +
  • Doesn't deliver events to a SVGElementInstance tree (bug 265895).
  • +
+
Conditional Processing Module
switch +
    +
  • Implemented.
  • +
+
Image Module
image +
    +
  • Implemented.
  • +
  • Only works for raster images (bug 272288).
  • +
+
Style Module
style +
    +
  • Implemented.
  • +
+
Shape Module
path +
    +
  • Implemented.
  • +
  • SVGPathElement Interface +
      +
    • Unimplemented attributes: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList
    • +
    • Unimplemented bindings: getTotalLength, getPointAtLength, getPathSegAtLength
    • +
    +
  • +
  • SVGPathSegList Interface +
      +
    • Unimplemented bindings: replaceItem()
    • +
    +
  • +
+
rect +
    +
  • Implemented.
  • +
+
circle +
    +
  • Implemented.
  • +
+
line +
    +
  • Implemented.
  • +
+
ellipse +
    +
  • Implemented.
  • +
+
polyline +
    +
  • Implemented.
  • +
+
polygon +
    +
  • Implemented.
  • +
+
Text Module
text +
    +
  • Implemented.
  • +
  • SVGTextElement +
      +
    • Unimplemented attributes: rotate, textLength, lengthAdjust
    • +
    • Unimplemented bindings: getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
    • +
    • Bindings not functional at onload time: getExtentOfChar
    • +
    +
  • +
+
tspan +
    +
  • Implemented.
  • +
  • SVGTSpanElement +
      +
    • Unimplemented attributes: rotate, textLength, lengthAdjust
    • +
    • Unimplemented bindings: getNumberOfChars, getComputedTextLength, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
    • +
    +
  • +
+
tref +
    +
  • Not implemented.
  • +
+
textPath +
    +
  • Implemented in Firefox 2.
  • +
  • Unimplemented attributes: method, spacing, textLength, lengthAdjust
  • +
+
altGlyph +
    +
  • Not implemented.
  • +
+
altGlyphDef +
    +
  • Not implemented.
  • +
+
altGlyphItem +
    +
  • Not implemented.
  • +
+
glyphRef +
    +
  • Not implemented.
  • +
+
Marker Module
marker +
    +
  • Implemented.
  • +
+
Color Profile Module
color-profile +
    +
  • Not implemented.
  • +
+
Gradient Module
linearGradient +
    +
  • Implemented.
  • +
+
radialGradient +
    +
  • Implemented.
  • +
+
stop +
    +
  • Implemented.
  • +
+
Pattern Module
pattern +
    +
  • Not implemented.
  • +
+
Clip Module
clipPath +
    +
  • Implemented.
  • +
  • Won't handle clip paths with have elements with different clip-rule properties or that reference other clipPaths. (bug 267224).
  • +
+
Mask Module
mask +
    +
  • Not implemented.
  • +
+
Filter Module
filter +
    +
  • Not implemented.
  • +
+
feBlend +
    +
  • Not implemented.
  • +
+
feColorMatrix +
    +
  • Not implemented.
  • +
+
feComponentTransfer +
    +
  • Not implemented.
  • +
+
feComposite +
    +
  • Not implemented.
  • +
+
feConvolveMatrix +
    +
  • Not implemented.
  • +
+
feDiffuseLighting +
    +
  • Not implemented.
  • +
+
feDisplacementMap +
    +
  • Not implemented.
  • +
+
feFlood +
    +
  • Not implemented.
  • +
+
feGaussianBlur +
    +
  • Not implemented.
  • +
+
feImage +
    +
  • Not implemented.
  • +
+
feMerge +
    +
  • Not implemented.
  • +
+
feMergeNode +
    +
  • Not implemented.
  • +
+
feMorphology +
    +
  • Not implemented.
  • +
+
feOffset +
    +
  • Not implemented.
  • +
+
feSpecularLighting +
    +
  • Not implemented.
  • +
+
feTile +
    +
  • Not implemented.
  • +
+
feTurbulence +
    +
  • Not implemented.
  • +
+
feDistantLight +
    +
  • Not implemented.
  • +
+
fePointLight +
    +
  • Not implemented.
  • +
+
feSpotLight +
    +
  • Not implemented.
  • +
+
feFuncR +
    +
  • Not implemented.
  • +
+
feFuncG +
    +
  • Not implemented.
  • +
+
feFuncB +
    +
  • Not implemented.
  • +
+
feFuncA +
    +
  • Not implemented.
  • +
+
Cursor Module
cursor +
    +
  • Not implemented.
  • +
+
Hyperlinking Module
a +
    +
  • Implemented as an XBL binding - object is not of type SVGAElement.
  • +
  • Only xlink:href, xlink:show, and xlink:target (as of Firefox 2) attributes implemented.
  • +
+
View Module
view +
    +
  • Not implemented.
  • +
+
Scripting Module
script +
    +
  • Implemented.
  • +
+
Animation Module
animate +
    +
  • Not implemented.
  • +
+
set +
    +
  • Not implemented.
  • +
+
animateMotion +
    +
  • Not implemented.
  • +
+
animateTransform +
    +
  • Not implemented.
  • +
+
animateColor +
    +
  • Not implemented.
  • +
+
mpath +
    +
  • Not implemented.
  • +
+
Font Module
font +
    +
  • Not implemented.
  • +
+
font-face +
    +
  • Not implemented.
  • +
+
glyph +
    +
  • Not implemented.
  • +
+
missing-glyph +
    +
  • Not implemented.
  • +
+
hkern +
    +
  • Not implemented.
  • +
+
vkern +
    +
  • Not implemented.
  • +
+
font-face-src +
    +
  • Not implemented.
  • +
+
font-face-uri +
    +
  • Not implemented.
  • +
+
font-face-format +
    +
  • Not implemented.
  • +
+
font-face-name +
    +
  • Not implemented.
  • +
+
definition-src +
    +
  • Not implemented.
  • +
+
Extensibility Module
foreignObject +
    +
  • Implemented, but not built.
  • +
+
+

{{ languages( { "fr": "fr/SVG_dans_Firefox_1.5", "ja": "ja/SVG_in_Firefox_1.5", "pl": "pl/SVG_w_Firefoksie" } ) }}

diff --git a/files/ko/web/svg/tutorial/basic_shapes/index.html b/files/ko/web/svg/tutorial/basic_shapes/index.html new file mode 100644 index 0000000000..8169e4c890 --- /dev/null +++ b/files/ko/web/svg/tutorial/basic_shapes/index.html @@ -0,0 +1,141 @@ +--- +title: 기본 도형 +slug: Web/SVG/Tutorial/기본_도형 +translation_of: Web/SVG/Tutorial/Basic_Shapes +--- +

{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}

+ +

SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적은 이름에서 명백하게 알 수 있다. 도형들의 위치와 크기를 지정하는 몇몇 속성들은 주어지지만, 여기에서 다뤄지지 않는 다른 속성들과 함께 더 정확하고 완전한 설명이 있는 레퍼런스를 첨부해 두겠다. 그러나, 대부분의 SVG 문서에서 사용되기 때문에 몇 가지 소개를 해줘야한다.

+ +

기본적인 도형들

+ +

도형을 삽입하기 위해서는 당신은 문서안에 요소를 만들어야 한다. 서로다른 요소들은 다른 모양에 해당하며, 서로 다른 속성들을 사용하여 해당 모양의 크기와 위치를 나타낸다. 일부는 다른 모양으로 생성 될 수 있다는 점에서 약간 중복되지만, 사용자의 편의를 위해 SVG 문서를 가능한 짧고 가독성있게 유지하기 위해서 모두 제공된다. 모든 기본 도형은 오른쪽 이미지에 표시된다. 기본 도형을 생성하는 코드는 다음과 같다:

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+
+  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
+  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
+
+  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
+  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
+      stroke="orange" fill="transparent" stroke-width="5"/>
+
+  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
+      stroke="green" fill="transparent" stroke-width="5"/>
+
+  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
+</svg>
+ +
Note: stroke, stroke-width 그리고 fill 속성들은 튜토리얼 뒤쪽에서 설명한다.
+ +

Rectangles 사각형

+ +

rect 요소는 당신이 생각하는 것과 일치하며 화면에 사각형을 그린다. 여기에는 화면상에서 직사각형의 위치와 모양을 제어하는 6가지 기본 속성만 있다. 앞서 보여준 이미지는 두 개의 rect 요소를 보여주며 약간 중복된다. 오른쪽에 있는 이미지는 rx 와  ry 속성이 설정되어 있어서 모서리가 둥글다. rx 와 ry 가 설정되지 않은 경우에는 기본값 0으로 들어간다.

+ +
<rect x="10" y="10" width="30" height="30"/>
+<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
+ +
+
x
+
사각형의 좌측 상단의 x 값을 의미한다.
+
y
+
사각형의 좌측 상단의 y 값을 의미한다.
+
width
+
사각형의 폭을 나타낸다.
+
height
+
사각형의 높이를 나타낸다. 
+
rx
+
사각형의 둥근 꼭짓점의 x 방향으로의 반지름이다.
+
ry
+
사각형의 둥근 꼭짓점의 y 방향으로의 반지름이다.
+
+ +

Circle 원

+ +

당신이 추측한 것 처럼, circle 요소는 화면에 원을 그린다. circle 요소에 실제로 적용할 수 있는 속성은 세 가지 뿐이다.

+ +
<circle cx="25" cy="75" r="20"/>
+ +
+
r
+
원의 반지름을 의미한다.
+
cx
+
원의 중심 중 x 값을 의미한다.
+
cy
+
원의 중심 중 y 값을 의미한다.
+
+ +

Ellipse 타원

+ +

Ellipses은 원의 x와 y 반경 (수학자들은 장반경, 단반경 이라고 함)을 개별적으로 확장 할 수 있는 circle 요소의 좀 더 일반적인 형태이다.

+ +
<ellipse cx="75" cy="75" rx="20" ry="5"/>
+ +
+
rx
+
타원의 x 방향으로의 반지름의 길이를 의미한다.
+
ry
+
타원의 y 방향으로의 반지름의 길이를 의미한다.
+
cx
+
타원의 중심 중 x 값을 의미한다.
+
cy
+
타원의 중심 중 y 값을 의미한다.
+
+ +

Line 선

+ +

Lines은 단지 직선이다. line 요소는 선의 시작과 끝 지점을 지정하는 두 점을 속성으로 갖는다.

+ +
<line x1="10" x2="50" y1="110" y2="150"/>
+ +
+
x1
+
점 1의 x 값이다.
+
y1
+
점 1의 y 값이다.
+
x2 
+
점 2의 x 값이다.
+
y2
+
점 2의 y 값이다.
+
+ +

Polyline

+ +

Polylines은 연결된 직선들의 그룹이다. 그 목록(직선들)은 꽤 길어질 수 있기 때문에 모든 포인트가 하나의 속성에 포함된다.

+ +
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
+ +
+
points
+
포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다.
+
+ +

Polygon 다각형

+ +

Polygons은 점을 연결하는 직선으로 구성된다는 점에서 polyline과 매우 유사하다. 하지만 다각형의 경우, 자동으로 마지막 포인트로부터 첫 번째 포인트로 직선을 만들어서 닫힌 모양을 만든다. 사각형은 다각형의 하나이므로, 융통성있는 사각형을 필요로 하는 경우 polygon 요소를 사용해서 rect 요소를 만들 수 있다.

+ +
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
+ +
+
points
+
포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다. 그러면 (2,2)에서 (0,0)으로 최종 직선이 그려져서 다각형이 완성된다.
+
+ +

Path

+ +

Path 는 아마 SVG에서 사용할 수 있는 가장 일반적인 형태일 것이다. path 요소를 사용해서 당신은 사각형(둥근 모서리가 있거나 없는), 원, 타원, 폴리라인 및 다각형을 그릴 수 있다. 기본적으로 다른 모든 종류의 모양, 베지에 곡선, 2차원 곡선 등이 가능하다. 그러한 이유로, paths 는 튜토리얼의 the next section 에 들어가지만, 지금은 모양을 제어하는 데 사용되는 단일 속성이 있음을 알려주겠다.

+ +
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
+ +
+
d
+
A list of points and other information about how to draw the path. See the Paths section for more information.
+
+ +
{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}
diff --git a/files/ko/web/svg/tutorial/getting_started/index.html b/files/ko/web/svg/tutorial/getting_started/index.html new file mode 100644 index 0000000000..8a0b5c82b7 --- /dev/null +++ b/files/ko/web/svg/tutorial/getting_started/index.html @@ -0,0 +1,94 @@ +--- +title: 시작하기 +slug: Web/SVG/Tutorial/시작하기 +tags: + - SVG + - 'SVG:Tutorial' + - 초보자 + - 튜토리얼 +translation_of: Web/SVG/Tutorial/Getting_Started +--- +

{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

+ +

간단한 예제

+ +

다음의 코드와 같이 간단한 예제로 시작해보겠습니다.

+ +
<svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect width="100%" height="100%" fill="red" />
+
+  <circle cx="150" cy="100" r="80" fill="green" />
+
+  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
+
+</svg>
+
+ +

코드를 복사하여 demo1.svg로 저장하고, 파이어폭스 에서 실행해 봅시다. 아래와 같은 화면이 그려질 것입니다.(파이어 폭스 사용자 : 링크)

+ +

svgdemo1.png

+ +

화면이 그려지는 과정은 다음과 같습니다.

+ +
    +
  1. SVG 루트 요소(Element)부터 시작합니다. +
      +
    • DTD기반의 SVG유효성 검사는 해결할 수 있는 것보다 많은 문제를 야기하기 때문에 (X)HTML로 알려진 Doctype 선언은 사용하지 않습니다.
    • +
    • 다른 유형의 유효성 검사를 위해 SVG버전을 식별하려면 항상 version과 baseProfile 속성(Attribute)을 사용해야 합니다.
    • +
    • XML 특수언어(dialect)로서 SVG는 (xmlsn 속성에서) 항상 네임 스페이스(namespace)를 올바르게 바인딩 해야합니다. 자세한 내용은 네임 스페이스 충돌 과정 페이지를 참조하십시오.
    • +
    +
  2. +
  3. 전체 이미지 영역을 포함하는 사각형 <rect />을 그려 배경을 빨간색으로 설정합니다.
  4. +
  5. 빨간색 직사각형의 중앙에 반경 80px의 녹색 원 <circle />이 그려집니다
  6. +
  7. 텍스트 "SVG"가 그려집니다. 각 문자의 내부는 흰색으로 채워집니다. 텍스트는 중심점이 되고자 하는 지점에 앵커를 설정하여 배치됩니다.이 경우 중심점은 녹색 원의 중심에 일치해야합니다. 글꼴 크기와 수직 위치를 미세 조정하여 심미적으로 뛰어난 최종 결과를 얻을 수 있습니다.
  8. +
+ +

SVG 파일의 기본 속성

+ +
    +
  • 가장 먼저 주목해야 할 것은 요소를 렌더링하는 순서입니다. SVG 파일 전체에서 유효한 규칙은, 내용의 위에서 부터 아래로 렌더링된다는 것입니다. 요소는 아래에 위치할수록 더 잘보이게 됩니다.
  • +
  • 웹의 SVG 파일은 브라우저에 직접 표시되거나 HTML파일에 여러가지 방법을 통해 포함될 수 있습니다: +
      +
    • HTML이 XHTML이고 application/xhtml+xml 유형으로 제공되는 경우 SVG는 XML 소스에 직접 포함될 수 있습니다.
    • +
    • HTML이 HTML5이고 브라우저가 HTML5 브라우저를 준수하는 경우 SVG를 직접 삽입 할 수도 있습니다. 그러나 HTML5 사양을 준수하는 데 필요한 구문 변경이 있을 수 있습니다.
    • +
    • SVG 파일은 object 요소로 참조 할 수 있습니다: +
              <object data="image.svg" type="image/svg+xml" />
      +
    • +
    • 마찬가지로 iframe 요소로 사용할 수 있습니다: +
              <iframe src="image.svg"></iframe>
      +
    • +
    • 이론적으로, img 요소로 사용될 수 있습니다만 4.0 이전의 Firefox에서는 작동하지 않습니다.
    • +
    • 마지막으로 SVG는 JavaScript로 동적으로 생성되어 HTML DOM에 삽입 될 수 있습니다. 이는 SVG를 처리 할 수없는 브라우저에서 대체하여 구현할 수 있다는 장점이 있습니다.
    • +
    + 이 주제에 대해 깊이있게 다루기 위해 이 문서를 참조하십시오.
  • +
  • SVG에서 크기와 단위를 처리하는 방법에 대해서는 다음 페이지에서 설명 할 것입니다.
  • +
+ +

SVG 파일 형식

+ +

SVG 파일은 두 가지 형태로 제공됩니다. 일반 SVG 파일은 SVG 마크업이 포함 된 간단한 텍스트 파일입니다. 이러한 파일의 권장 파일 확장자는 소문자로 ".svg"입니다.

+ +

일부 응용 프로그램 (예 : 지리적 응용 프로그램)에 사용될 때 매우 큰 크기의 SVG 파일이 있을 수 있기 때문에 SVG 사양에서는 gzip으로 압축 된 SVG 파일을 허용합니다. 이러한 파일의 권장 파일 확장자는 소문자로 ".svgz"입니다. 하지만 안타깝게도 gzip으로 압축 된 SVG 파일을 Microsoft IIS 서버에서 서비스 할 때 모든 SVG 가능 브라우저(사용자 에이전트)에서 안정적으로 작동하게 하려면 문제가 많습니다. 그리고 Firefox는 로컬 컴퓨터에서 gzip으로 압축 된 SVG를 로드 할 수 없습니다. 웹 서버에 게시 할 때를 제외하고는 gzip으로 압축 된 SVG를 피하십시오 (아래 참조).

+ +

웹서버 관련 한 마디

+ +

이제 기본 SVG 파일을 만드는 방법에 대해 알아봤으므로 다음 단계는 웹 서버에 업로드하는 것입니다. 이 단계에서는 몇 가지 문제가 있습니다. 보통, SVG 파일의 경우 서버는 다음과 같이 HTTP 헤더를 보내야합니다.

+ +
Content-Type: image/svg+xml
+Vary: Accept-Encoding
+ +

gzip으로 압축 된 SVG 파일의 경우, 서버는 다음과 같이 HTTP 헤더를 보내야합니다.

+ +
Content-Type: image/svg+xml
+Content-Encoding: gzip
+Vary: Accept-Encoding
+ +

네트워크 모니터 패널이나 web-sniffer.net과 같은 사이트를 사용하여 서버가 SVG 파일과 함께 올바른 HTTP 헤더를 보내고 있는지 확인할 수 있습니다. SVG 파일 중 하나의 URL을 전송하고 HTTP 응답 헤더를 확인해 보십시오. 서버가 위의 값으로 헤더를 보내지 않으면 웹 호스트에 문의해야합니다. 서버에 SVG를 올바르게 구성하도록하는 데 문제가 있으면 직접 할 수있는 방법이있을 수 있습니다. 다양한 간단한 솔루션에 대해서는 w3.org의 서버 구성 페이지를 참조하십시오.

+ +

SVG를 사용하는데 있어 서버 구성 오류가 SVG로드에 실패하는 가장 일반적인 이유이기에 확인하십시오. 서버가 SVG 파일을 제공하면서 올바른 헤더를 보내도록 설정되어 있지 않다면 Firefox는 SVG파일의 마크업을 텍스트 또는 인코딩된 의미없는 값으로 표시하거나 뷰어에게 열어 볼 응용 프로그램을 선택하도록 요청할 가능성이 큽니다.

+ +

{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

diff --git a/files/ko/web/svg/tutorial/positions/index.html b/files/ko/web/svg/tutorial/positions/index.html new file mode 100644 index 0000000000..391765175c --- /dev/null +++ b/files/ko/web/svg/tutorial/positions/index.html @@ -0,0 +1,45 @@ +--- +title: 위치 +slug: Web/SVG/Tutorial/위치 +translation_of: Web/SVG/Tutorial/Positions +--- +

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

+ +

그리드

+ +

모든 요소(Element)에 대해 SVG는 캔버스를 포함한 컴퓨터에서 무언가 그리고자 할때 많이 사용되는 것과 유사한 좌표계 또는 그리드 시스템을 사용합니다. 즉, 문서의 왼쪽 위 모서리는 (0,0)으로 간주되며 한 지점의 위치는 왼쪽 상단 모서리에서 픽셀 단위로 표시되고 X축의 양의 방향은 오른쪽, Y축의  양의 방향은 아래쪽으로 향하게됩니다. 어린시절 배웠던 그래프와는 반대라는 점을 기억하세요. 그러나 이것은 HTML의 요소가 배치되는 것과는 같은 방법입니다 (기본적으로 LTR 문서는 X를 오른쪽에서 왼쪽으로 배치하는 RTL 문서가 아닙니다).

+ +

예제:

+ +

아래 요소는

+ +
<rect x="0" y="0" width="100" height="100" />
+
+ +

왼쪽 상단에서 100px의 정사각형을 정의합니다.

+ +

"픽셀"이란?

+ +

기본적으로 SVG 문서에서 1픽셀은 출력 장치(화면)의 1픽셀에 매핑됩니다. 하지만 이러한 방식만 가능했다면 SVG의 이름에 "확장성(Scalable)"이란 단어가 들어가 있지는 않았겠죠. CSS의 절대 및 상대 글꼴 크기와 매우 흡사하게 SVG는 절대적인 단위 ( "pt"또는 "cm"와 같은 식별자가있는 것)를 정의하고 이것을 사용자 단위(User Unit)로 명칭하며, 이것은 별도의 식별자 없이 숫자 그대로를 사용합니다.

+ +

별도로 명시하지 않았다면, 사용자 단위와 화면 단위는 1:1의 비율로 동작합니다. SVG에는 이 비율을 변경하기 위한 몇가지 방법이 있습니다.

+ +
<svg width="100" height="100">
+
+ +

위 요소는 100x100px 의 SVG 캔버스를 정의합니다. 사용자 단위와 화면 단위는 1:1의 비율로 동작합니다.

+ +
<svg width="200" height="200" viewBox="0 0 100 100">
+
+ +

SVG 캔버스 전체 크기는 200x200 픽셀입니다. 그러나 viewBox속성을 사용하여 (0,0)에서 시작하는 100x100px의 화면을 200x200px의 화면에 출력합니다. 이렇게하면 100x100 단위 영역을 효과적으로 확대하고 이미지를 두 배 크기로 확대 할 수 있습니다.

+ +

이러한 요소 혹은 전체 이미지의 사용자 단위와 화면 단위의 매핑을 사용자 좌표계(User coordinate system)이라고 합니다. 스케일링 외에도 회전, 기울이기, 뒤집기가 가능합니다. 기본 사용자 좌표계는 하나의 사용자 픽셀을 하나의 장치 픽셀에 매핑합니다. SVG파일에서 "in"또는 "cm"과 같은 특정 치수는 결과 이미지에서 1:1로 보이도록 계산됩니다.

+ +

SVG 1.1 스펙에서는 다음과 같이 인용합니다:

+ +
+

[...] 사용자 환경에서 "1px"이 "0.2822222mm" 에 대응한다고 가정했을때(90dpi), SVG는 다음과 같이 처리한다: [...] "1cm"는 "35.43307px"과 같다. (그리고 35.43307 사용자 단위와 같다.)

+
+ +

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

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 +--- +

이 페이지는 그래픽을 만들기 위한 특별한 언어 SVG를 설명합니다.

+

SVG 기능이 있는 모질라 브라우저에서 작동하는 간단한 예제를 만듭니다.

+

정보: SVG

+

+ + SVG + (Scalable Vector Graphics, 스케일러블 벡터 그래픽)은 그래픽을 만들어내기 위한 XML-기반 언어입니다.

+

움직이지 않는 이미지(static image)를 위해 사용될 수 있으며, 또한 애니메이션 과 사용자 인터페이스를 위해서도 사용될 수 있습니다.

+

다른 XML-기반 언어들과 같이, SVG는 CSS 스타일 시트를 지원하여 그래픽에 사용되는 스타일을 그래픽의 내용물과 분리시킬 수 있게 합니다.

+

또한, 다른 문서 마크업 언어들과 함께 사용되는 스타일 시트들도 이미지가 요구되는 곳에 SVG 그래픽의 URL을 지정할 수 있습니다. 예를들면, HTML 문서와 함께 사용하는 스타일 시트에서 background 속성 값에 SVG값의 URL을 지정할 수 있습니다.

+ + + + + + + +
+ More details
이글을 쓰는 시점에서(2005년 중반), 모질라 브라우저의 몇몇 최근 빌드만이 SVG 지원을 내장하고 있었습니다. +

Adobe에서 제공되는 것 같은 플럭인(plugin)을 인스톨하면 다른 버전에서도 SVG 지원을 추가할 수 있습니다.

+

모질라에서의 SVG에 관한 더많은 정보를 원하시면, 이 위키안의 SVG 페이지를 보세요.

+
+

액션: SVG 예제

+

새로운 SVG 문서를 텍스트 파일 doc8.svg로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:

+
+
<?xml version="1.0" standalone="no"?>
+
+<?xml-stylesheet type="text/css" href="style8.css"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<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">
+
+<title>SVG demonstration</title>
+<desc>Mozilla CSS Getting Started - SVG demonstration</desc>
+
+<defs>
+  <g id="segment" class="segment">
+    <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+    <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+    </g>
+  <g id="quadrant">
+    <use xlink:href="#segment"/>
+    <use xlink:href="#segment" transform="rotate(18)"/>
+    <use xlink:href="#segment" transform="rotate(36)"/>
+    <use xlink:href="#segment" transform="rotate(54)"/>
+    <use xlink:href="#segment" transform="rotate(72)"/>
+    </g>
+  <g id="petals">
+    <use xlink:href="#quadrant"/>
+    <use xlink:href="#quadrant" transform="rotate(90)"/>
+    <use xlink:href="#quadrant" transform="rotate(180)"/>
+    <use xlink:href="#quadrant" transform="rotate(270)"/>
+    </g>
+  <radialGradient id="fade" cx="0" cy="0" r="200"
+      gradientUnits="userSpaceOnUse">
+    <stop id="fade-stop-1" offset="33%"/>
+    <stop id="fade-stop-2" offset="95%"/>
+    </radialGradient>
+  </defs>
+
+<text id="heading" x="-280" y="-270">
+  SVG demonstration</text>
+<text  id="caption" x="-280" y="-250">
+  Move your mouse pointer over the flower.</text>
+
+<g id="flower">
+  <circle id="overlay" cx="0" cy="0" r="200"
+    stroke="none" fill="url(#fade)"/>
+  <use id="outer-petals" xlink:href="#petals"/>
+  <use id="inner-petals" xlink:href="#petals"
+    transform="rotate(9) scale(0.33)"/>
+  </g>
+
+</svg>
+
+
+

새로운 CSS 문서를 텍스트 파일 style8.css로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:

+
+
/*** 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 > .segment-fill {
+  fill: plum;
+  stroke: none;
+  }
+
+#outer-petals .segment:hover > .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 > .segment-fill {
+  fill: darkseagreen;
+  stroke: none;
+  }
+
+#inner-petals .segment:hover > .segment-edge {
+  stroke: green;
+  }
+
+
+

문서를 SVG 기능이 있는(SVG-enabled) 브라우저에서 여세요. 마우스 포인터(mouse pointer)를 그래픽위로 움직여 보세요.

+

이 위키페이지는 SVG를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 다음과 같이 보입니다:

+ + + + + + +
SVG demonstration
+

이 예제에서 주의할 점:

+
    +
  • SVG 문서는 전처럼 스타일 시트에 링크되어 있습니다.
  • +
  • SVG는 그 자신만의 CSS 스타일 시트와 값을 가지고 있습니다. 이들중 몇가지는 HTML을 위한 CSS의 속성과 비슷합니다.
  • +
+ + + + + + + +
+ Challenge
스타일 시트를 변경해서, 마우스 포인터가 안쪽 꽃잎들 중 한개 위에 오게 되면, 바깥 쪽 꽃잎이 작동하는 방식은 바뀌지 않은채 모든 안쪽꽃잎 색이 핑크(pink)색으로 변하게 하세요
+

그럼 다음은?

+

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

+

이 예제에서 SVG 기능이 있는(SVG enabled) 브라우저는 이미 SVG 엘리먼트를 디스플레이하는 방법을 알고 있습니다. 스타일 시트는 단지 그 디스플레이를 특정 방식으로 수정할 뿐 입니다. 그러나 디스플레이하는 방식이 미리 지정되어 있지 않은 범용(general-purpose) XML 문서를 위해서 CSS를 사용할 수있습니다. 다음 페이지에서는 이를 실행해 봅니다: XML data

+

{{ languages( { "fr": "fr/CSS/Premiers_pas/Graphiques_SVG", "pl": "pl/CSS/Na_pocz\u0105tek/Grafika_SVG" } ) }}

diff --git "a/files/ko/web/svg/tutorial/\352\270\260\353\263\270_\353\217\204\355\230\225/index.html" "b/files/ko/web/svg/tutorial/\352\270\260\353\263\270_\353\217\204\355\230\225/index.html" deleted file mode 100644 index 8169e4c890..0000000000 --- "a/files/ko/web/svg/tutorial/\352\270\260\353\263\270_\353\217\204\355\230\225/index.html" +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: 기본 도형 -slug: Web/SVG/Tutorial/기본_도형 -translation_of: Web/SVG/Tutorial/Basic_Shapes ---- -

{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}

- -

SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적은 이름에서 명백하게 알 수 있다. 도형들의 위치와 크기를 지정하는 몇몇 속성들은 주어지지만, 여기에서 다뤄지지 않는 다른 속성들과 함께 더 정확하고 완전한 설명이 있는 레퍼런스를 첨부해 두겠다. 그러나, 대부분의 SVG 문서에서 사용되기 때문에 몇 가지 소개를 해줘야한다.

- -

기본적인 도형들

- -

도형을 삽입하기 위해서는 당신은 문서안에 요소를 만들어야 한다. 서로다른 요소들은 다른 모양에 해당하며, 서로 다른 속성들을 사용하여 해당 모양의 크기와 위치를 나타낸다. 일부는 다른 모양으로 생성 될 수 있다는 점에서 약간 중복되지만, 사용자의 편의를 위해 SVG 문서를 가능한 짧고 가독성있게 유지하기 위해서 모두 제공된다. 모든 기본 도형은 오른쪽 이미지에 표시된다. 기본 도형을 생성하는 코드는 다음과 같다:

- -

- -
<?xml version="1.0" standalone="no"?>
-<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
-
-  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
-  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
-
-  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
-  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
-
-  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
-  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
-      stroke="orange" fill="transparent" stroke-width="5"/>
-
-  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
-      stroke="green" fill="transparent" stroke-width="5"/>
-
-  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
-</svg>
- -
Note: stroke, stroke-width 그리고 fill 속성들은 튜토리얼 뒤쪽에서 설명한다.
- -

Rectangles 사각형

- -

rect 요소는 당신이 생각하는 것과 일치하며 화면에 사각형을 그린다. 여기에는 화면상에서 직사각형의 위치와 모양을 제어하는 6가지 기본 속성만 있다. 앞서 보여준 이미지는 두 개의 rect 요소를 보여주며 약간 중복된다. 오른쪽에 있는 이미지는 rx 와  ry 속성이 설정되어 있어서 모서리가 둥글다. rx 와 ry 가 설정되지 않은 경우에는 기본값 0으로 들어간다.

- -
<rect x="10" y="10" width="30" height="30"/>
-<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
- -
-
x
-
사각형의 좌측 상단의 x 값을 의미한다.
-
y
-
사각형의 좌측 상단의 y 값을 의미한다.
-
width
-
사각형의 폭을 나타낸다.
-
height
-
사각형의 높이를 나타낸다. 
-
rx
-
사각형의 둥근 꼭짓점의 x 방향으로의 반지름이다.
-
ry
-
사각형의 둥근 꼭짓점의 y 방향으로의 반지름이다.
-
- -

Circle 원

- -

당신이 추측한 것 처럼, circle 요소는 화면에 원을 그린다. circle 요소에 실제로 적용할 수 있는 속성은 세 가지 뿐이다.

- -
<circle cx="25" cy="75" r="20"/>
- -
-
r
-
원의 반지름을 의미한다.
-
cx
-
원의 중심 중 x 값을 의미한다.
-
cy
-
원의 중심 중 y 값을 의미한다.
-
- -

Ellipse 타원

- -

Ellipses은 원의 x와 y 반경 (수학자들은 장반경, 단반경 이라고 함)을 개별적으로 확장 할 수 있는 circle 요소의 좀 더 일반적인 형태이다.

- -
<ellipse cx="75" cy="75" rx="20" ry="5"/>
- -
-
rx
-
타원의 x 방향으로의 반지름의 길이를 의미한다.
-
ry
-
타원의 y 방향으로의 반지름의 길이를 의미한다.
-
cx
-
타원의 중심 중 x 값을 의미한다.
-
cy
-
타원의 중심 중 y 값을 의미한다.
-
- -

Line 선

- -

Lines은 단지 직선이다. line 요소는 선의 시작과 끝 지점을 지정하는 두 점을 속성으로 갖는다.

- -
<line x1="10" x2="50" y1="110" y2="150"/>
- -
-
x1
-
점 1의 x 값이다.
-
y1
-
점 1의 y 값이다.
-
x2 
-
점 2의 x 값이다.
-
y2
-
점 2의 y 값이다.
-
- -

Polyline

- -

Polylines은 연결된 직선들의 그룹이다. 그 목록(직선들)은 꽤 길어질 수 있기 때문에 모든 포인트가 하나의 속성에 포함된다.

- -
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
- -
-
points
-
포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다.
-
- -

Polygon 다각형

- -

Polygons은 점을 연결하는 직선으로 구성된다는 점에서 polyline과 매우 유사하다. 하지만 다각형의 경우, 자동으로 마지막 포인트로부터 첫 번째 포인트로 직선을 만들어서 닫힌 모양을 만든다. 사각형은 다각형의 하나이므로, 융통성있는 사각형을 필요로 하는 경우 polygon 요소를 사용해서 rect 요소를 만들 수 있다.

- -
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
- -
-
points
-
포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다. 그러면 (2,2)에서 (0,0)으로 최종 직선이 그려져서 다각형이 완성된다.
-
- -

Path

- -

Path 는 아마 SVG에서 사용할 수 있는 가장 일반적인 형태일 것이다. path 요소를 사용해서 당신은 사각형(둥근 모서리가 있거나 없는), 원, 타원, 폴리라인 및 다각형을 그릴 수 있다. 기본적으로 다른 모든 종류의 모양, 베지에 곡선, 2차원 곡선 등이 가능하다. 그러한 이유로, paths 는 튜토리얼의 the next section 에 들어가지만, 지금은 모양을 제어하는 데 사용되는 단일 속성이 있음을 알려주겠다.

- -
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
- -
-
d
-
A list of points and other information about how to draw the path. See the Paths section for more information.
-
- -
{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}
diff --git "a/files/ko/web/svg/tutorial/\354\213\234\354\236\221\355\225\230\352\270\260/index.html" "b/files/ko/web/svg/tutorial/\354\213\234\354\236\221\355\225\230\352\270\260/index.html" deleted file mode 100644 index 8a0b5c82b7..0000000000 --- "a/files/ko/web/svg/tutorial/\354\213\234\354\236\221\355\225\230\352\270\260/index.html" +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: 시작하기 -slug: Web/SVG/Tutorial/시작하기 -tags: - - SVG - - 'SVG:Tutorial' - - 초보자 - - 튜토리얼 -translation_of: Web/SVG/Tutorial/Getting_Started ---- -

{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

- -

간단한 예제

- -

다음의 코드와 같이 간단한 예제로 시작해보겠습니다.

- -
<svg version="1.1"
-     baseProfile="full"
-     width="300" height="200"
-     xmlns="http://www.w3.org/2000/svg">
-
-  <rect width="100%" height="100%" fill="red" />
-
-  <circle cx="150" cy="100" r="80" fill="green" />
-
-  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
-
-</svg>
-
- -

코드를 복사하여 demo1.svg로 저장하고, 파이어폭스 에서 실행해 봅시다. 아래와 같은 화면이 그려질 것입니다.(파이어 폭스 사용자 : 링크)

- -

svgdemo1.png

- -

화면이 그려지는 과정은 다음과 같습니다.

- -
    -
  1. SVG 루트 요소(Element)부터 시작합니다. -
      -
    • DTD기반의 SVG유효성 검사는 해결할 수 있는 것보다 많은 문제를 야기하기 때문에 (X)HTML로 알려진 Doctype 선언은 사용하지 않습니다.
    • -
    • 다른 유형의 유효성 검사를 위해 SVG버전을 식별하려면 항상 version과 baseProfile 속성(Attribute)을 사용해야 합니다.
    • -
    • XML 특수언어(dialect)로서 SVG는 (xmlsn 속성에서) 항상 네임 스페이스(namespace)를 올바르게 바인딩 해야합니다. 자세한 내용은 네임 스페이스 충돌 과정 페이지를 참조하십시오.
    • -
    -
  2. -
  3. 전체 이미지 영역을 포함하는 사각형 <rect />을 그려 배경을 빨간색으로 설정합니다.
  4. -
  5. 빨간색 직사각형의 중앙에 반경 80px의 녹색 원 <circle />이 그려집니다
  6. -
  7. 텍스트 "SVG"가 그려집니다. 각 문자의 내부는 흰색으로 채워집니다. 텍스트는 중심점이 되고자 하는 지점에 앵커를 설정하여 배치됩니다.이 경우 중심점은 녹색 원의 중심에 일치해야합니다. 글꼴 크기와 수직 위치를 미세 조정하여 심미적으로 뛰어난 최종 결과를 얻을 수 있습니다.
  8. -
- -

SVG 파일의 기본 속성

- -
    -
  • 가장 먼저 주목해야 할 것은 요소를 렌더링하는 순서입니다. SVG 파일 전체에서 유효한 규칙은, 내용의 위에서 부터 아래로 렌더링된다는 것입니다. 요소는 아래에 위치할수록 더 잘보이게 됩니다.
  • -
  • 웹의 SVG 파일은 브라우저에 직접 표시되거나 HTML파일에 여러가지 방법을 통해 포함될 수 있습니다: -
      -
    • HTML이 XHTML이고 application/xhtml+xml 유형으로 제공되는 경우 SVG는 XML 소스에 직접 포함될 수 있습니다.
    • -
    • HTML이 HTML5이고 브라우저가 HTML5 브라우저를 준수하는 경우 SVG를 직접 삽입 할 수도 있습니다. 그러나 HTML5 사양을 준수하는 데 필요한 구문 변경이 있을 수 있습니다.
    • -
    • SVG 파일은 object 요소로 참조 할 수 있습니다: -
              <object data="image.svg" type="image/svg+xml" />
      -
    • -
    • 마찬가지로 iframe 요소로 사용할 수 있습니다: -
              <iframe src="image.svg"></iframe>
      -
    • -
    • 이론적으로, img 요소로 사용될 수 있습니다만 4.0 이전의 Firefox에서는 작동하지 않습니다.
    • -
    • 마지막으로 SVG는 JavaScript로 동적으로 생성되어 HTML DOM에 삽입 될 수 있습니다. 이는 SVG를 처리 할 수없는 브라우저에서 대체하여 구현할 수 있다는 장점이 있습니다.
    • -
    - 이 주제에 대해 깊이있게 다루기 위해 이 문서를 참조하십시오.
  • -
  • SVG에서 크기와 단위를 처리하는 방법에 대해서는 다음 페이지에서 설명 할 것입니다.
  • -
- -

SVG 파일 형식

- -

SVG 파일은 두 가지 형태로 제공됩니다. 일반 SVG 파일은 SVG 마크업이 포함 된 간단한 텍스트 파일입니다. 이러한 파일의 권장 파일 확장자는 소문자로 ".svg"입니다.

- -

일부 응용 프로그램 (예 : 지리적 응용 프로그램)에 사용될 때 매우 큰 크기의 SVG 파일이 있을 수 있기 때문에 SVG 사양에서는 gzip으로 압축 된 SVG 파일을 허용합니다. 이러한 파일의 권장 파일 확장자는 소문자로 ".svgz"입니다. 하지만 안타깝게도 gzip으로 압축 된 SVG 파일을 Microsoft IIS 서버에서 서비스 할 때 모든 SVG 가능 브라우저(사용자 에이전트)에서 안정적으로 작동하게 하려면 문제가 많습니다. 그리고 Firefox는 로컬 컴퓨터에서 gzip으로 압축 된 SVG를 로드 할 수 없습니다. 웹 서버에 게시 할 때를 제외하고는 gzip으로 압축 된 SVG를 피하십시오 (아래 참조).

- -

웹서버 관련 한 마디

- -

이제 기본 SVG 파일을 만드는 방법에 대해 알아봤으므로 다음 단계는 웹 서버에 업로드하는 것입니다. 이 단계에서는 몇 가지 문제가 있습니다. 보통, SVG 파일의 경우 서버는 다음과 같이 HTTP 헤더를 보내야합니다.

- -
Content-Type: image/svg+xml
-Vary: Accept-Encoding
- -

gzip으로 압축 된 SVG 파일의 경우, 서버는 다음과 같이 HTTP 헤더를 보내야합니다.

- -
Content-Type: image/svg+xml
-Content-Encoding: gzip
-Vary: Accept-Encoding
- -

네트워크 모니터 패널이나 web-sniffer.net과 같은 사이트를 사용하여 서버가 SVG 파일과 함께 올바른 HTTP 헤더를 보내고 있는지 확인할 수 있습니다. SVG 파일 중 하나의 URL을 전송하고 HTTP 응답 헤더를 확인해 보십시오. 서버가 위의 값으로 헤더를 보내지 않으면 웹 호스트에 문의해야합니다. 서버에 SVG를 올바르게 구성하도록하는 데 문제가 있으면 직접 할 수있는 방법이있을 수 있습니다. 다양한 간단한 솔루션에 대해서는 w3.org의 서버 구성 페이지를 참조하십시오.

- -

SVG를 사용하는데 있어 서버 구성 오류가 SVG로드에 실패하는 가장 일반적인 이유이기에 확인하십시오. 서버가 SVG 파일을 제공하면서 올바른 헤더를 보내도록 설정되어 있지 않다면 Firefox는 SVG파일의 마크업을 텍스트 또는 인코딩된 의미없는 값으로 표시하거나 뷰어에게 열어 볼 응용 프로그램을 선택하도록 요청할 가능성이 큽니다.

- -

{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

diff --git "a/files/ko/web/svg/tutorial/\354\234\204\354\271\230/index.html" "b/files/ko/web/svg/tutorial/\354\234\204\354\271\230/index.html" deleted file mode 100644 index 391765175c..0000000000 --- "a/files/ko/web/svg/tutorial/\354\234\204\354\271\230/index.html" +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: 위치 -slug: Web/SVG/Tutorial/위치 -translation_of: Web/SVG/Tutorial/Positions ---- -

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

- -

그리드

- -

모든 요소(Element)에 대해 SVG는 캔버스를 포함한 컴퓨터에서 무언가 그리고자 할때 많이 사용되는 것과 유사한 좌표계 또는 그리드 시스템을 사용합니다. 즉, 문서의 왼쪽 위 모서리는 (0,0)으로 간주되며 한 지점의 위치는 왼쪽 상단 모서리에서 픽셀 단위로 표시되고 X축의 양의 방향은 오른쪽, Y축의  양의 방향은 아래쪽으로 향하게됩니다. 어린시절 배웠던 그래프와는 반대라는 점을 기억하세요. 그러나 이것은 HTML의 요소가 배치되는 것과는 같은 방법입니다 (기본적으로 LTR 문서는 X를 오른쪽에서 왼쪽으로 배치하는 RTL 문서가 아닙니다).

- -

예제:

- -

아래 요소는

- -
<rect x="0" y="0" width="100" height="100" />
-
- -

왼쪽 상단에서 100px의 정사각형을 정의합니다.

- -

"픽셀"이란?

- -

기본적으로 SVG 문서에서 1픽셀은 출력 장치(화면)의 1픽셀에 매핑됩니다. 하지만 이러한 방식만 가능했다면 SVG의 이름에 "확장성(Scalable)"이란 단어가 들어가 있지는 않았겠죠. CSS의 절대 및 상대 글꼴 크기와 매우 흡사하게 SVG는 절대적인 단위 ( "pt"또는 "cm"와 같은 식별자가있는 것)를 정의하고 이것을 사용자 단위(User Unit)로 명칭하며, 이것은 별도의 식별자 없이 숫자 그대로를 사용합니다.

- -

별도로 명시하지 않았다면, 사용자 단위와 화면 단위는 1:1의 비율로 동작합니다. SVG에는 이 비율을 변경하기 위한 몇가지 방법이 있습니다.

- -
<svg width="100" height="100">
-
- -

위 요소는 100x100px 의 SVG 캔버스를 정의합니다. 사용자 단위와 화면 단위는 1:1의 비율로 동작합니다.

- -
<svg width="200" height="200" viewBox="0 0 100 100">
-
- -

SVG 캔버스 전체 크기는 200x200 픽셀입니다. 그러나 viewBox속성을 사용하여 (0,0)에서 시작하는 100x100px의 화면을 200x200px의 화면에 출력합니다. 이렇게하면 100x100 단위 영역을 효과적으로 확대하고 이미지를 두 배 크기로 확대 할 수 있습니다.

- -

이러한 요소 혹은 전체 이미지의 사용자 단위와 화면 단위의 매핑을 사용자 좌표계(User coordinate system)이라고 합니다. 스케일링 외에도 회전, 기울이기, 뒤집기가 가능합니다. 기본 사용자 좌표계는 하나의 사용자 픽셀을 하나의 장치 픽셀에 매핑합니다. SVG파일에서 "in"또는 "cm"과 같은 특정 치수는 결과 이미지에서 1:1로 보이도록 계산됩니다.

- -

SVG 1.1 스펙에서는 다음과 같이 인용합니다:

- -
-

[...] 사용자 환경에서 "1px"이 "0.2822222mm" 에 대응한다고 가정했을때(90dpi), SVG는 다음과 같이 처리한다: [...] "1cm"는 "35.43307px"과 같다. (그리고 35.43307 사용자 단위와 같다.)

-
- -

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

-- cgit v1.2.3-54-g00ecf