[SVG] svg를 이용해서 차트만들기

일러스트에서 path으로 만들면 선이 끊겨지지 않아 일반 선(line..?)으로 만들었다.

(분명 방법이 있을 것 같은데 일러스트를 잘모르겠다..)

일단 다음에 만들때는 선을 이어그리되 하나씩 분할이 되도록 선을 만들어야겠다.

그리고 IE 버전은 거의 지원이 안되니 크롬에서 보기로만 하고..

svg만드는게 어려워서 여러 플러그인이 많던데 이를 활용해서 좀 더 유연하고 다양하게 제어할 수 있도록 연습해봐야겠다~~~!😋

Reference

[SVG] SVG 다루기

1. SVG란? SVG는, 확장 가능한 벡터 그래픽(Scalable Vector Graphics)을 말합니다. 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어인데요, 텍스트 편집기에서 CSS나 JS로 수정이 가능하

nykim.work

ny-kim.tistory.com/4

SVG Line Animation

SVG Line Animation SVG 속성을 활용한 애니메이션 최근 열심히 웹 애니메이션을 찾아 공부하고 있습니다 :-9 웹 애니메이션을 그리는 데는 CSS 애니메이션이나 JS 라이브러리 등이 있는데, 오늘은 SVG 속

ny-kim.tistory.com

stackoverflow.com/questions/32409101/resizing-svg-circle-radius-using-css-animation

Resizing SVG Circle Radius Using CSS Animation

I'm trying to animate an SVG circle's radius attribute with CSS. Whilst (using the Firefox Inspect Element tool) I can see that the animation itself is setup and running correctly, the size of the ".

stackoverflow.com

chart.zip

0.03MB

jakearchibald.github.io/svgomg/

SVGOMG - SVGO's Missing GUI

jakearchibald.github.io

추가적으로 위의 사이트는 svg용량을 낮춰준다.(web용)

저작자표시 비영리 동일조건

Reference

티스토리툴바