From de8eddb11dd3ef1861950e712d7811723b8b95b1 Mon Sep 17 00:00:00 2001 From: alattalatta Date: Thu, 15 Jul 2021 13:11:38 +0900 Subject: Rewrite SVG main page (#1464) * Rewrite SVG main page * Apply review suggestion Co-authored-by: JO YUN HO * Add all tags of the source Co-authored-by: JO YUN HO --- files/ko/web/svg/index.html | 133 +++++++++++++++++++------------------------- 1 file changed, 58 insertions(+), 75 deletions(-) (limited to 'files/ko/web/svg/index.html') diff --git a/files/ko/web/svg/index.html b/files/ko/web/svg/index.html index 7faba4911a..af97d6a6d8 100644 --- a/files/ko/web/svg/index.html +++ b/files/ko/web/svg/index.html @@ -1,99 +1,82 @@ --- -title: SVG +title: 'SVG: Scalable Vector Graphics' slug: Web/SVG tags: - 2D Graphics - - 2D 그래픽 - - References + - Graphics + - Icons + - Images + - Reference + - Responsive Design - SVG - - TopicStub + - Scalable Graphics + - Scalable Images + - Vector Graphics + - Web + - l10n:priority translation_of: Web/SVG --- -
시작하기
-이 튜토리얼은 SVG를 시작할 수 있도록 도움을 줄 것입니다.
-

가변 가능한 벡터 그래픽 (SVG)은 2차원의 벡터 그래픽을 기술하기 위한 XML 기반 마크업 언어이다.  HTML이 텍스트를 표현하는 것처럼, SVG는 본질적으로 그래픽을 표현한다.

+
{{SVGRef}}
-

SVG는 텍스트 기반의 오픈 웹 표준이다. SVG는 의심할바 없이 CSS, DOM, SMIL 같은 다른 웹 표준과 함께 작동하기 위해서 디자인 되었다.

+

SVG 시작하기

-

SVG 이미지들, 그것과 관련된 작동들은 XML XML 텍스트 파일로 정의되어있다. 그렇기에 검색될 수 있고, 색인 가능하고, 스크립트 될 수 있고 압축 가능하다. SVG파일은 추가적으로 어떤 텍스트 에디터에서나 드로잉 소프트웨어에서도 만들어질 수 있다.

+

+ SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는 + XML 기반의 마크업 언어입니다. + SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술하며 + CSS, DOM, + JavaScript, SMIL 등 다른 + 웹 표준과도 잘 동작하도록 설계됐습니다. SVG는 달리 말하자면 HTML과 텍스트의 관계를 + 그래픽에 적용한 것입니다. +

-
-
-

문 서

+

+ SVG 이미지와 그 동작 방식은 XML 텍스트 파일로 정의합니다. 따라서 검색, 색인, 스크립트 + 적용, 그리고 압축이 가능하며, 그래픽 도구 외에도 아무 텍스트 편집기로 생성 및 편집이 가능합니다. +

-
-
SVG 요소 레퍼런스
-
SVG 요소들에 대한 상세한 정보를 담고있다.
-
SVG 속성 레퍼런스
-
SVG 속성들에 대한 상세한 정보를 담고있다.
-
SVG DOM 인터페이스 레퍼런스
-
전체 SVG DOM API에 대한 상세한 정보를 담고있다.
-
HTML 컨텐츠에 SVG 효과 적용하기
-
SVG는 {{Glossary("HTML")}}, {{Glossary("CSS")}}, {{Glossary("JavaScript")}}와 함께 동작한다. SVG를 사용해 일반적인 HTML와 웹애플리케이션을 개선할 수 있다.
-
Mozilla 에서 SVG
-
Mozilla에서 어떻게 SVG가 구현되었는지에 대한 참고 자료와 정보를 담고있다. - -
-
- -

커뮤니티

- -
    -
  • Mozilla 포럼들을 보라. {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}
    • -
- -

도구들

+

+ {{Glossary("JPEG")}}와 {{Glossary("PNG")}} 등 고전적인 비트맵 이미지 형식과 비교했을 때, SVG 형식의 벡터 이미지는 + 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하며 현지화 역시 그래픽 편집기 없이도 파일 내의 텍스트를 수정해서 + 쉽게 처리할 수 있습니다. 적절한 라이브러리를 함께 사용하면 SVG 파일을 필요에 따라 즉각 현지화하는 것도 가능합니다. +

- -
+

SVG는 World Wide Web Consortium(W3C)가 1999년부터 개발하고 있습니다.

-
- +

SVG 자습서도 방문해보세요.

- +

문서

-

애니메이션과 상호작용들

+
+
SVG 요소 참고서
+
각각의 SVG 요소에 대한 세부 정보입니다.
+
SVG 특성 참고서
+
각각의 SVG 특성에 대한 세부 정보입니다.
+
SVG DOM 인터페이스 참고서
+
JavaScript 상호작용을 위한 SVG DOM 인터페이스의 세부 정보입니다.
+
HTML 콘텐츠에 SVG 효과 적용하기
+
+ SVG는 {{Glossary("HTML")}}, {{Glossary("CSS")}}, {{Glossary("JavaScript")}}와 사용할 수 있습니다. SVG를 사용해서 + 평범한 HTML 페이지나 웹 어플리케이션을 향상하세요. +
+
-

HTML과 마찬가지로 SVG은 도큐먼트 모델(DOM)와 이벤트를 가지고 있으며, JavaScript로 접근할 수 있다. 이를 통해 개발자는 풍부한 애니메이션과 이미지들의 상호작용을 생성할 수 있다.

+

도구

-

매핑, 차트, 게임 그리고 3D 실험들

- -

While 웹 컨텍스트를 향상히기는 방법으로 작은 SVG는 먼길을 갈 수 있는 동안 여기 많은 SVG 사용법들에 대한 몇몇 예제가 있다..

+

예제

-
-
-- cgit v1.2.3-54-g00ecf