SVG
-
[에스비지] SVG -(13편)- 패턴만들기 (2/2) (feat. keyframes, animation, transform-origin, ...)SVG 2021. 2. 7. 20:36
패턴 만들기 Pattern 이번에는, svg를 body안에 넣는것이 아니라, css로 body태그의 background로 이미지를 링크해서 깔아 줄 것이다. 지난번에 사용한 face_hair.svg 파일을 사용하겠다. 그럼 이렇게 작게 나온다. 확대하면, 지난번에 머리 그라데이션 준걸 그대로 사용한 것이다. 확대를 하지말고, 이미지 사이즈를 키우면 된다. 그러면, 얼마든지 키울 수 있다. 자 여기서 만약에!!!, 저 이모티콘의 한쪽눈을 깜빡이는 애니메이션을 하고 싶다면, 직접 해당 svg 파일에서 css 애니메이션을 주면 된다. face_hair 세번째 circle에 left-eye라는 클래스명을 추가 지정하였다. 그리고나서 keyframes 로 눈이 감기듯이 세로길이가 작아졌다 돌아와야 하니까 scal..
-
[에스비지] SVG -(12편)- 패턴만들기 (1/2) (feat. pattern, viewBox, width, height, defs)SVG 2021. 2. 7. 20:02
패턴 만들기 Pattern 오늘 알아야 할 핵심 키워드는 바로바로!! defs pattern width height viewBox 우리가 보통 배경으로 사용하는 그림이나 사진파일 등을 패턴을 넣어서 벽지처럼 깔 수가 있다. 지난시간과는 달리 svg를 인라인으로 바로 적어주며 만들어보도록 하자. 1. 우선 svg의 영역이 필요하다. width: 500px; height: 500px; background-color: #eee; 2. pattern을 정의할 때는 참조를 위한 영역인 defs 안에서 해준다. 3. pattern이라는 태그를 이용한다. 그안에 패턴에 사용될 모양들을 그려주면 된다. 4. pattern에 id가 필요하다. 예) 5. pattern의 위치값을 좌표로 적는다. 예) 6. 그리고 너비와 ..
-
[에스비지] SVG -(11편)- 그라디언트 만들기 (Gradient) (feat. 화면중앙정렬, linearGradient, radialGradient, stop, offset, stop-color, <![CDATA[ ]]>)SVG 2021. 2. 7. 15:23
그라디언트 만들기 Gradient 오늘 알아야 할 핵심 키워드는 바로바로!! linearGradient radialGradient stop offset stop-color 그동안 svg 태그를 불러와 사용했다면, 이번에는 object 태그로 svg를 불러와 사용을 해보고자 한다. 이게 무슨말인가 하면, https://blog.naver.com/nicholasdw/222223307910 [에스비지] SVG (Scalable Vector Graphics) -(01편)(viewBox, 압축하기) #svg #scaleableVectorGraphics#확장가능벡터그래픽#벡터그래픽SVG vs. CanvasSVG를 HTML... blog.naver.com 여기에 svg를 문서안에 넣는 여러가지 방법들! 이란 파트..
-
[에스비지] SVG -(10편)- 곡선따라 글 쓰기 (feat. defs, path, text, textPath, href, tspan)SVG 2021. 2. 6. 21:40
Again, we got this! 이번에는 곡선을 따라 글을 적는 것을 해보자. 일러스트레이터나 포토샵에서 많이 해봤을 것이다. 패스를 그리고 그 패스에다가 text툴을 찍어서 패스를 따라 글이 배치되는 것을. 그렇다면, svg는 다를까? 크게 다르지 않다. 결국 우리가 필요한 것은 pass가 아닌 path다! path 를 지난시간에 다룬적이 있다. 모르겠다면 링크 참조! https://blog.naver.com/nicholasdw/222233249293 [에스비지] SVG (Scalable Vector Graphics) -(06편)- path(패스)로 그리기 (feat. M, L, Q, C, H, V, Z, A) #svg #svg그리기 #에스비지 #에스비지그리기 #에스비지직접그리기 #path로 ...
-
[에스비지] SVG -(09편)- 기본글자 쓰기 (feat. text)SVG 2021. 2. 6. 20:19
오늘 배울 것은 바로바로 기본적으로 글자를 쓸 때, text 라는 태그에 작성을 한다. Hello, SVG! 이렇게 작성을 하니까, 화면이 텍스트 태그에 x와 y값을 잡아줘야 하는데, 둘다 0 0 으로 하니 콤마 끄트머리만 살짝 보여서, y값만 1로 주니 저정도가 보였다. 기준점이 글자의 좌측 상단이 아니라, 좌측 하단이라는 것이 예상된다. background 대신 fill border 대신 stroke와 stroke-width를 줬는데, text는 기존방식과 똑같이, 크기는 font-size 굵기는 font-weight 기울기는 font-style: italic; 이런 식으로 사용하면 된다. Hello, SVG! 그러면 짜자잔!!! 단!!!, 다른점이 있다면, 기존 css에서 폰트의 색깔을 바꾸려면, ..
-
[에스비지] SVG -(07편)- 스트로크모양조정하기(stroke모양조정)(feat. stroke-linecap, stroke-linejoin)SVG 2021. 2. 5. 21:01
https://blog.naver.com/nicholasdw/222233361958 [에스비지] SVG -(07편)- 스트로크모양조정하기(stroke모양조정)(feat. stroke-linecap, stroke-linejoin) #svg #svg그리기 #에스비지 #stroke #stroke모양조정 #stroke-linecap #stroke-linejoin안녕들 하셨습... blog.naver.com 저의 또 다른 블로그를 링크했으니 그곳에서 확인 바라요.
-
[에스비지] SVG (Scalable Vector Graphics) -(06편)- path(패스)로 그리기 (feat. M, L, Q, C, H, V, Z, A)SVG 2021. 2. 5. 20:58
https://blog.naver.com/nicholasdw/222233249293 [에스비지] SVG (Scalable Vector Graphics) -(06편)- path(패스)로 그리기 (feat. M, L, Q, C, H, V, Z, A) #svg #svg그리기 #에스비지 #에스비지그리기 #에스비지직접그리기 #path로 ... blog.naver.com 제 또 다른 블로그를 링크하였습니다.