# svg

10개의 포스트

[알쓸신잡] 2. React에서 SVG 다루는 법

이전에 따로 svg 파일을 잘 다룬적이 없어서 react에서 material-ui와 함께 svg를 icon으로 녹임에 있어서 많은 고민과 시행착오가 있었다.svg 파일을 다 뜯어보는 것은 예사였고, 안의 path값만 가져오거나, 어떻게든 통일된 커스텀 컴포넌트를 만들어

어제
·
0개의 댓글
post-thumbnail

2021 01 11 월 TIL - 12

JavascriptReactCSS svgapple-clone : gitHubapple-clone in gitHubreact-movie : gitHubreact-movie in gitHub업무에서 svg를 사용해본적이 있는데 내가 사용했던 svg랑 너무 달라서 내가 아직

6일 전
·
0개의 댓글

SVG Pie Chart 그리기

이번 프로젝트에서 파이차트를 svg로 직접 만들어보려고 하였다.유튜브와 학습 자료를 보며 정리한 내용을 글로 남기고자 한다.1\. 하나의 파이차트 그리기stroke-width : 반지름의 2배stroke-dasharray : 파이차트에서 하나의 파이는 stroke-da

2020년 12월 4일
·
0개의 댓글

SVG를 공부해보자! - (2) SVG Path

SVG 이미지를 표현할 때 가장 자주 쓰이는 엘리먼트로 복잡한 도형을 그릴 때 사용한다. 앞서 정리한 polylines로도 도형을 그릴 수 있지만 이는 직선을 사용할 때만 가능하므로 여러 직선과 곡선을 사용할 때는 path를 사용한다.대문자는 절대위치, 소문자는 상대위

2020년 12월 1일
·
0개의 댓글

SVG를 공부해보자 (1) - SVG란?

SVG는 Scalable Vector Graphics라는 뜻인데, 번역하자면 확장가능한 벡터 그래픽이다. 픽셀을 이용하여 그림을 그리는 `png` `jpg` 파일들과 다르게 벡터를 기반으로 이미지를 표현한다. 그러다보니 크기를 조절함에 따라 깨지는 것이 없고, 용량이

2020년 12월 1일
·
0개의 댓글

svg 파일 react, next에서 사용하기

@svgr/webpack 깃헙npm i -D @svgr/webpacksvg파일을 react or next프로젝트에서 사용하자! 먼저 npm에서 svg 로더를 받아야 한다.next는 next.config.js를 프로젝트 루트에 작성하여 기존 설정을 수정할 수 있게 함sv

2020년 8월 1일
·
0개의 댓글
post-thumbnail

피그마로 SVG 파일 추출하기(id 값 자동생성) Exporting SVG files in Figma

벡터 이미지를 SVG로 추출할 때 Figma가 정말정말정말 유용하다.특히 이미지의 요소들을 따로 따로 애니메이션으로 조작해야 할 때, 피그마에서 미리 그룹을 지어서 내보내서 그룹별로 ID를 가져와서 사용하면 되니 아주아주 간편하다. (파일 추출시 "Include ID

2020년 7월 12일
·
1개의 댓글
post-thumbnail

왕초보도 가능한 SVG 애니메이션 만들기 feat. Figma(무료)

svg를 다룰 줄 알게되면 별별 신기한 효과를 낼 수가 있다. https://www.stellaachenbach.com/ (우측 하단에 눈동자모양에 마우스를 올려보세요👀)그치만 코드로 그림을 표현한다는 것에 대한 심적 부담감이 크다면 Figma를 통해서 한번

2020년 6월 20일
·
6개의 댓글

[Vue.js] SVG 와 v-if, v-show 에 의한 랜더링 문제

개인적으로 진행중인 프로젝트에 Nuxt.js 를 도입해서 작업을 하고 있었는데 뜻밖의 상황에 한참을 삽질을 했습니다 문제 발생 문제가 발생한 조건은 다음과 같습니다. Fontawsome 을 설치하여 아이콘으로 사용 computed 에 정의된 값의 변화에 따라 토글이 되도록 v-if 를 사용 코드로 살펴보면 대략 이렇습니다. 굉장히 흔하고 간단한 vu...

2019년 2월 1일
·
4개의 댓글