알아두면 쓸모 있는 SVG 지식

✍️ 퀄리티 있는 이미지 또는 애니메이션 적용시 SVG가 많이 사용 된다. 가장 기초가 되는 SVG 기본 도형과 속성 값에 대하여 알아보자.

✍️ viewport width height 과 viewbox width height의 개념을 정확히 몰라서 엄청 헤매었던 기억이 있다. (의도 하지 않았는데 반만 보이고 작아지고.... )그 때 고생했던 기억으로 정리해보았다.

✍️ gradient와 stroke animation을 같이 쓰면 괜찮은 UI 효과를 나타낼 수 있다. 예전에 사용 하면서 공부했던 gradient에 대해 정리 해 보았다.

✍️ svg의 stroke 속성에 animation을 걸어주면 괜찮은 UI 효과를 나타낼 수 있다. stroke animation + gradiant 를 이용하여 goldring이 반짝이는 모습을 구현한 예제와 함께 정리해보았다.