From adbd0319b2279c38bcf1bafd9d4b803fef839426 Mon Sep 17 00:00:00 2001
From: wooooooood <13pft13@gmail.com>
Date: Wed, 18 May 2022 07:49:27 +0900
Subject: [PATCH 1/2] =?UTF-8?q?SVG=20=EC=BB=A8=ED=85=8C=EC=9D=B4=EB=84=88?=
 =?UTF-8?q?=20=EC=9A=94=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...4\353\204\210 \354\232\224\354\206\214.md" | 113 ++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 "Web-Animations/[SVG \352\270\260\354\264\210] SVG \354\273\250\355\205\214\354\235\264\353\204\210 \354\232\224\354\206\214.md"

diff --git "a/Web-Animations/[SVG \352\270\260\354\264\210] SVG \354\273\250\355\205\214\354\235\264\353\204\210 \354\232\224\354\206\214.md" "b/Web-Animations/[SVG \352\270\260\354\264\210] SVG \354\273\250\355\205\214\354\235\264\353\204\210 \354\232\224\354\206\214.md"
new file mode 100644
index 0000000..abb0733
--- /dev/null
+++ "b/Web-Animations/[SVG \352\270\260\354\264\210] SVG \354\273\250\355\205\214\354\235\264\353\204\210 \354\232\224\354\206\214.md"	
@@ -0,0 +1,113 @@
+# 4. SVG 컨테이너 요소
+
+<aside>
+😎 SVG는 다양한 요소들로 구성되어 화면에 그려집니다. 기본적인 몇 가지 요소와 각각의 특징을 간단하게 알아보겠습니다!
+
+</aside>
+
+## 1. `<g>`
+
+- 다른 SVG 요소들을 **group**하기 위함
+- `<g>`에 적용된 transformation은 자식 요소들에 적용됨
+  - ex. 자식 요소들에게 fill, stroke, stroke-width를 적용
+
+```svg
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Using g to inherit presentation attributes -->
+  <g fill="white" stroke="green" stroke-width="5">
+    <circle cx="40" cy="40" r="25" />
+    <circle cx="60" cy="60" r="25" />
+  </g>
+</svg>
+```
+
+## 2. `<use>`
+
+- SVG 내 요소를 재사용
+- `href`를 사용해 재사용할 요소를 호출
+  - ex. 기존에 정의된 `myCircle`의 속성을 따르는 복제본 생성
+
+```svg
+<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
+  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
+  <use href="#myCircle" x="10" fill="blue"/>
+  <use href="#myCircle" x="20" fill="white" stroke="red"/>
+  <!--
+stroke="red" will be ignored here, as stroke was already set on myCircle.
+Most attributes (except for x, y, width, height and (xlink:)href)
+do not override those set in the ancestor.
+That's why the circles have different x positions, but the same stroke value.
+  -->
+</svg>
+
+```
+
+## 3. `<defs>`
+
+- 그래픽 객체를 정의(**definitions**)
+- `<defs>` 내부의 요소들은 즉시 렌더링되지 않으며, 화면에 나타내기 위해서는 참조해야함
+  - ex. `<use href="#myDefinedCircle"/>`
+
+```svg
+<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+  <!-- Some graphical objects to use -->
+  <defs>
+    <circle id="myCircle" cx="0" cy="0" r="5" />
+
+    <linearGradient id="myGradient" gradientTransform="rotate(90)">
+      <stop offset="20%" stop-color="gold" />
+      <stop offset="90%" stop-color="red" />
+    </linearGradient>
+  </defs>
+
+  <!-- using my graphical objects -->
+  <use x="5" y="5" href="#myCircle" fill="url('#myGradient')" />
+</svg>
+```
+
+## 4. `<symbol>`
+
+- 요소들을 그룹핑하여 템플릿을 정의
+  - `viewBox`, `preserveAspectRatio` 속성을 설정할 수 있음
+- `<use>`로 참조하여 사용할 수 있음
+  - ex. 10x10 객체 가운데에 원이 있는 템플릿을 정의하여 사용
+
+```svg
+<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
+  <!-- Our symbol in its own coordinate system -->
+  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
+    <circle cx="1" cy="1" r="1" />
+  </symbol>
+
+   <!-- A grid to materialize our symbol positioning -->
+  <path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" />
+
+  <!-- All instances of our symbol -->
+  <use href="#myDot" x="5"  y="5" style="opacity:1.0" />
+  <use href="#myDot" x="20" y="5" style="opacity:0.8" />
+  <use href="#myDot" x="35" y="5" style="opacity:0.6" />
+  <use href="#myDot" x="50" y="5" style="opacity:0.4" />
+  <use href="#myDot" x="65" y="5" style="opacity:0.2" />
+</svg>
+```
+
+## 5. `<svg>`
+
+- 새로운 coordinate system과 viewport를 정의하는 컨테이너
+- `<svg>` 내부에 `<svg>` 를 중첩해서 사용할 수 있음
+
+```svg
+<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey">
+  <circle cx="50" cy="50" r="40" />
+  <circle cx="150" cy="50" r="4" />
+
+  <svg viewBox="0 0 10 10" x="200" width="100">
+    <circle cx="5" cy="5" r="4" />
+  </svg>
+</svg>
+
+```
+
+## Reference
+
+- [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Element)

From 08d590fae6ef09008c128cbc861ef390b92467d7 Mon Sep 17 00:00:00 2001
From: wooooooood <40855076+wooooooood@users.noreply.github.com>
Date: Wed, 18 May 2022 07:52:33 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80,=20=EC=A7=88?=
 =?UTF-8?q?=EB=AC=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...264\353\204\210 \354\232\224\354\206\214.md" | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git "a/Web-Animations/[SVG \352\270\260\354\264\210] SVG \354\273\250\355\205\214\354\235\264\353\204\210 \354\232\224\354\206\214.md" "b/Web-Animations/[SVG \352\270\260\354\264\210] SVG \354\273\250\355\205\214\354\235\264\353\204\210 \354\232\224\354\206\214.md"
index abb0733..ba32c94 100644
--- "a/Web-Animations/[SVG \352\270\260\354\264\210] SVG \354\273\250\355\205\214\354\235\264\353\204\210 \354\232\224\354\206\214.md"	
+++ "b/Web-Animations/[SVG \352\270\260\354\264\210] SVG \354\273\250\355\205\214\354\235\264\353\204\210 \354\232\224\354\206\214.md"	
@@ -10,6 +10,8 @@
 - 다른 SVG 요소들을 **group**하기 위함
 - `<g>`에 적용된 transformation은 자식 요소들에 적용됨
   - ex. 자식 요소들에게 fill, stroke, stroke-width를 적용
+  
+![image](https://user-images.githubusercontent.com/40855076/168924833-85c54f9b-0e5b-42fc-9e54-ab860b7fab30.png)
 
 ```svg
 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
@@ -27,6 +29,9 @@
 - `href`를 사용해 재사용할 요소를 호출
   - ex. 기존에 정의된 `myCircle`의 속성을 따르는 복제본 생성
 
+
+![image](https://user-images.githubusercontent.com/40855076/168924841-dc669f1f-bed1-4295-a81f-5073616f13af.png)
+
 ```svg
 <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
   <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
@@ -48,6 +53,9 @@ That's why the circles have different x positions, but the same stroke value.
 - `<defs>` 내부의 요소들은 즉시 렌더링되지 않으며, 화면에 나타내기 위해서는 참조해야함
   - ex. `<use href="#myDefinedCircle"/>`
 
+
+![image](https://user-images.githubusercontent.com/40855076/168924851-ad9225ef-fec6-47df-8c46-d0353a0cfdf9.png)
+
 ```svg
 <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
   <!-- Some graphical objects to use -->
@@ -72,6 +80,9 @@ That's why the circles have different x positions, but the same stroke value.
 - `<use>`로 참조하여 사용할 수 있음
   - ex. 10x10 객체 가운데에 원이 있는 템플릿을 정의하여 사용
 
+
+![image](https://user-images.githubusercontent.com/40855076/168924858-9bf0737d-eb7b-4518-a20b-4c34b6a98563.png)
+
 ```svg
 <svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
   <!-- Our symbol in its own coordinate system -->
@@ -96,6 +107,9 @@ That's why the circles have different x positions, but the same stroke value.
 - 새로운 coordinate system과 viewport를 정의하는 컨테이너
 - `<svg>` 내부에 `<svg>` 를 중첩해서 사용할 수 있음
 
+
+![image](https://user-images.githubusercontent.com/40855076/168924874-205dd3cb-b740-498d-91d2-aab5bfcce76c.png)
+
 ```svg
 <svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey">
   <circle cx="50" cy="50" r="40" />
@@ -111,3 +125,6 @@ That's why the circles have different x positions, but the same stroke value.
 ## Reference
 
 - [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Element)
+
+## 🧐 Questions 
+- `<svg>` 내부의 `<svg>`와 버전이 달라도 되나? => 됨. 하지만 svg versioning은 deprecated 상태