Merge pull request #49 from imukyee/master

#48 Post. What is SVG
FE-Study-Archive · Aug 4, 2022 · 627ef1d · 627ef1d
2 parents 60041a2 + ab5dd2f
commit 627ef1d
Showing 1 changed file with 330 additions and 0 deletions.
diff --git a/이윤경/220729.md b/이윤경/220729.md
@@ -0,0 +1,330 @@
+<!-- 발표영상 : https://www.youtube.com/watch?v=sflhJ9Ug4FI -->
+
+## SVG
+
+SVG(Scalable Vector Graphics) : 확장 가능한 벡터 그래픽
+
+JPEG같은 픽셀 기반의 파일과 달리, 점과 선을 기반으로 하는 수학 공식들을 통해 이미지를 저장한다. 때문에 아무리 이미지를 크게 해도 그림이 깨지지 않고, 용량도 늘어나지 않는다. 모양이 복잡할 수록 파일 사이즈가 커지므로, 로고와 같은 간단한 이미지일 수록 유리하다!
+
+SVG파일을 열면 코드(XML)로 이루어져 있다. DOM의 일부로서 각 개체별로 HTML 엘리먼트로 추가됨!
+
+==> CSS와 자바스크립트를 이용하여 조작이 가능하다!
+
+또한 SVG는 XML 코드로 작성되므로 텍스트 정보를 모양이 아닌, 텍스트로 저장한다. 따라서 Google과 같은 검색 엔진이 SVG 그래픽을 키워드로 읽을 수있어 웹사이트의 검색 순위를 높일 수도 있다!
+
+
+
+> Canvas : 비트맵 기반 그래픽(픽셀로 이루어진 이미지)
+>
+> 캔버스는 픽셀 하나하나를 조작할 수 있다. 자바스크립트로만 조작 가능.
+>
+> 픽셀 단위를 조작할 수 있기 때문에 일반 html 엘리먼트로는 불가능한 다양한 표현이 가능해 퍼포먼스가 중요한 이미지 조작에 쓰인다. 코딩량이 많기 때문에 크기가 클 수록 성능이 떨어짐!
+
+
+
+#### SVG를 html 문서에 넣는 방법 4가지!
+
+- `<img>`태그
+
+  ```html
+  <img src="image/별.svg" alt="">
+  ```
+
+- css background로!
+
+  ```html
+    <style>
+      .star {
+        background: url('image/별.svg') no-repeat;
+      }
+      </style>
+  <div class="star"></div>
+  ```
+
+- svg 요소들을 직접 inline으로
+
+  ```html
+    <svg id="레이어_1" data-name="레이어 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 254.16 191.34">
+      <defs>
+        <style>
+          .cls-1 {
+            fill: #f8b62d;
+          }
+        </style>
+      </defs>
+      <polygon class="cls-1" points="160.24 185.73 99.2 154.68 39.02 187.37 49.68 119.72 0 72.58 67.64 61.82 97.11 0 128.25 61 196.15 69.93 147.76 118.39 160.24 185.73"/>
+      <polygon class="cls-1" points="254.16 160.51 227.27 166.05 216.59 191.34 203.01 167.49 175.66 165.15 194.16 144.86 187.93 118.12 212.94 129.44 236.44 115.26 233.4 142.54 254.16 160.51"/>
+    </svg>
+  ```
+
+- `<object>` 태그
+
+  ```html
+  <object data="image/별.svg" type="image/svg+xml"></object>
+  ```
+
+- 임베디드랑 iframe으로도 가능하지만 노추천 잊어버리기!
+
+
+
+#### CSS 적용해보기
+
+> 작은 별의 색상이 yellow -> pink -> blue
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    svg {
+      width: 500px;
+      height: 500px;
+    }
+      
+    @keyframes gradient-color {
+      0% {
+        fill: yellow;
+      }
+      50% {
+        fill: pink;
+      }
+      100% {
+        fill: blue;
+      }
+    }
+      
+    .little-star {
+      animation: gradient-color 1s infinite alternate linear;
+    }
+
+  </style>
+</head>
+<body>
+
+  <svg id="레이어_1" data-name="레이어 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 254.16 191.34">
+    <defs>
+      <style>
+        .cls-1 {
+          fill: #f8b62d;
+        }
+      </style>
+    </defs>
+    <polygon class="cls-1 big-star" points="160.24 185.73 99.2 154.68 39.02 187.37 49.68 119.72 0 72.58 67.64 61.82 97.11 0 128.25 61 196.15 69.93 147.76 118.39 160.24 185.73"/>
+    <polygon class="cls-1 little-star" points="254.16 160.51 227.27 166.05 216.59 191.34 203.01 167.49 175.66 165.15 194.16 144.86 187.93 118.12 212.94 129.44 236.44 115.26 233.4 142.54 254.16 160.51"/>
+  </svg>
+
+</body>
+</html>
+```
+
+> gradient 색상 넣기 
+>
+> 참조해서 쓸 요소를 담는 태그인 `<defs></defs>` 안에 정의해서 사용!
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    svg {
+      width: 500px;
+      height: 500px;
+    }
+    @keyframes gradient-color {
+      0% {
+        fill: yellow;
+      }
+      50% {
+        fill: pink;
+      }
+      100% {
+        fill: blue;
+      }
+    }
+
+    .little-star {
+      animation: gradient-color 1s infinite alternate linear;
+    }
+      
+  </style>
+</head>
+<body>
+
+  <svg id="레이어_1" data-name="레이어 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 254.16 191.34">
+    <defs>
+      <linearGradient id="grad-color">
+        <stop offset="0%" stop-color="yellow"/>
+        <stop offset="50%" stop-color="pink"/>
+        <stop offset="100%" stop-color="blue"/>
+      </linearGradient>
+
+      <style>
+        .cls-1 {
+          fill: #f8b62d;
+        }
+
+        .big-star {
+          fill: url('#grad-color');
+        }
+      </style>
+    </defs>
+    <polygon class="cls-1 big-star" points="160.24 185.73 99.2 154.68 39.02 187.37 49.68 119.72 0 72.58 67.64 61.82 97.11 0 128.25 61 196.15 69.93 147.76 118.39 160.24 185.73"/>
+    <polygon class="cls-1 little-star" points="254.16 160.51 227.27 166.05 216.59 191.34 203.01 167.49 175.66 165.15 194.16 144.86 187.93 118.12 212.94 129.44 236.44 115.26 233.4 142.54 254.16 160.51"/>
+  </svg>
+
+</body>
+</html>
+```
+
+<br>
+
+#### JavaScript 적용해보기
+
+``` html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    svg {
+      width: 500px;
+      height: 500px;
+    }
+
+    @keyframes rotate {
+      0% {
+        transform: rotate(0deg);
+      }
+      25% {
+        transform: rotate(10deg);
+      }
+      50% {
+        transform: rotate(20deg);
+      }
+      75% {
+        transform: rotate(10deg);
+      }
+      100% {
+        transform: rotate(0deg);
+      }
+    }
+
+    .move {
+      animation: rotate 1s infinite linear;
+      transform-origin: center;
+    }
+  </style>
+</head>
+<body>
+
+
+  <svg id="레이어_1" data-name="레이어 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 254.16 191.34">
+    <defs>
+      <style>
+        .cls-1 {
+          fill: #f8b62d;
+        }
+      </style>
+    </defs>
+    <polygon class="cls-1 big-star" points="160.24 185.73 99.2 154.68 39.02 187.37 49.68 119.72 0 72.58 67.64 61.82 97.11 0 128.25 61 196.15 69.93 147.76 118.39 160.24 185.73"/>
+    <polygon class="cls-1 little-star" points="254.16 160.51 227.27 166.05 216.59 191.34 203.01 167.49 175.66 165.15 194.16 144.86 187.93 118.12 212.94 129.44 236.44 115.26 233.4 142.54 254.16 160.51"/>
+  </svg>
+
+  <script>
+    const bigStar = document.querySelector('.big-star');
+    bigStar.addEventListener('click', function() {
+      this.classList.toggle('move');
+    });
+  </script>
+
+</body>
+</html>
+```
+
+<br>
+
+#### 선 그리기
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    .box {
+      width: 500px;
+      height: 500px;
+      background: bisque;
+    }
+
+    .curve {
+      stroke: tomato; 
+      stroke-width: 10px; 
+      fill: transparent;
+    }
+  </style>
+</head>
+<body>
+
+  <svg class="box">
+    <path d="M 10 10 L 300 300" stroke="tomato" stroke-width="10"></path>
+    <path class="curve" d="M 50 50 C 50 50, 100 250, 200 350 C 200 200, 300 300, 400 400"></path>
+    <path class="curve" d="M100.87,273.36c80.17,53.27,167.46,102.37,191.8,78.69,26.9-26.16-43.23-121.54-19.67-144.26,17.6-17,86,8,290.16,165.57" transform="translate(-100.59 -202.71)"/>
+  </svg>
+
+
+</body>
+</html>
+```
+
+<br>
+
+#### 곡선을 따라 글자 쓰기
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    .box {
+      width: 500px;
+      height: 500px;
+      background: bisque;
+    }
+  </style>
+</head>
+<body>
+
+  <svg class="box">
+    <defs>
+      <path id="text-curve" d="M100.87,273.36c80.17,53.27,167.46,102.37,191.8,78.69,26.9-26.16-43.23-121.54-19.67-144.26,17.6-17,86,8,290.16,165.57" transform="translate(-100.59 -202.71)"/>
+    </defs>
+    <text x="0" y="100">
+      <textPath href="#text-curve">
+        안녕하세요 반갑습니다 잘부탁드립니다 조심히들어가세요 아ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ
+      </textPath>
+    </text>
+  </svg>
+
+</body>
+</html>
+```
+