From 18c069635eacfce9cc3839f21f62254486e4e370 Mon Sep 17 00:00:00 2001 From: imukyee Date: Fri, 29 Jul 2022 19:22:13 +0900 Subject: [PATCH 1/2] #48 Post. What is SVG --- .../220729.md" | 328 ++++++++++++++++++ 1 file changed, 328 insertions(+) create mode 100644 "\354\235\264\354\234\244\352\262\275/220729.md" diff --git "a/\354\235\264\354\234\244\352\262\275/220729.md" "b/\354\235\264\354\234\244\352\262\275/220729.md" new file mode 100644 index 0000000..42048d9 --- /dev/null +++ "b/\354\235\264\354\234\244\352\262\275/220729.md" @@ -0,0 +1,328 @@ +## SVG + +SVG(Scalable Vector Graphics) : 확장 가능한 벡터 그래픽 + +JPEG같은 픽셀 기반의 파일과 달리, 점과 선을 기반으로 하는 수학 공식들을 통해 이미지를 저장한다. 때문에 아무리 이미지를 크게 해도 그림이 깨지지 않고, 용량도 늘어나지 않는다. 모양이 복잡할 수록 파일 사이즈가 커지므로, 로고와 같은 간단한 이미지일 수록 유리하다! + +SVG파일을 열면 코드(XML)로 이루어져 있다. DOM의 일부로서 각 개체별로 HTML 엘리먼트로 추가됨! + +==> CSS와 자바스크립트를 이용하여 조작이 가능하다! + +또한 SVG는 XML 코드로 작성되므로 텍스트 정보를 모양이 아닌, 텍스트로 저장한다. 따라서 Google과 같은 검색 엔진이 SVG 그래픽을 키워드로 읽을 수있어 웹사이트의 검색 순위를 높일 수도 있다! + + + +> Canvas : 비트맵 기반 그래픽(픽셀로 이루어진 이미지) +> +> 캔버스는 픽셀 하나하나를 조작할 수 있다. 자바스크립트로만 조작 가능. +> +> 픽셀 단위를 조작할 수 있기 때문에 일반 html 엘리먼트로는 불가능한 다양한 표현이 가능해 퍼포먼스가 중요한 이미지 조작에 쓰인다. 코딩량이 많기 때문에 크기가 클 수록 성능이 떨어짐! + + + +#### SVG를 html 문서에 넣는 방법 4가지! + +- ``태그 + + ```html + + ``` + +- css background로! + + ```html + +
+ ``` + +- svg 요소들을 직접 inline으로 + + ```html + + + + + + + + ``` + +- `` 태그 + + ```html + + ``` + +- 임베디드랑 iframe으로도 가능하지만 노추천 잊어버리기! + + + +#### CSS 적용해보기 + +> 작은 별의 색상이 yellow -> pink -> blue + +```html + + + + + + + Document + + + + + + + + + + + + + + +``` + +> gradient 색상 넣기 +> +> 참조해서 쓸 요소를 담는 태그인 `` 안에 정의해서 사용! + +```html + + + + + + + Document + + + + + + + + + + + + + + + + + + + + +``` + +
+ +#### JavaScript 적용해보기 + +``` html + + + + + + + Document + + + + + + + + + + + + + + + + + +``` + +
+ +#### 선 그리기 + +```html + + + + + + + Document + + + + + + + + + + + + + +``` + +
+ +#### 곡선을 따라 글자 쓰기 + +```html + + + + + + + Document + + + + + + + + + + + 안녕하세요 반갑습니다 잘부탁드립니다 조심히들어가세요 아ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ + + + + + + +``` + From ab5dd2f541c09e4b04864ecc8ee6cd4bf64c9499 Mon Sep 17 00:00:00 2001 From: imukyee Date: Fri, 29 Jul 2022 20:17:09 +0900 Subject: [PATCH 2/2] #48 Post. video link --- "\354\235\264\354\234\244\352\262\275/220729.md" | 2 ++ 1 file changed, 2 insertions(+) diff --git "a/\354\235\264\354\234\244\352\262\275/220729.md" "b/\354\235\264\354\234\244\352\262\275/220729.md" index 42048d9..83775dd 100644 --- "a/\354\235\264\354\234\244\352\262\275/220729.md" +++ "b/\354\235\264\354\234\244\352\262\275/220729.md" @@ -1,3 +1,5 @@ + + ## SVG SVG(Scalable Vector Graphics) : 확장 가능한 벡터 그래픽