# svg

51개의 포스트
post-thumbnail

[TIL] CSS) SVG, JS) split과 join과 map을 이용한 dom manipulation

출처 : section Hangman | SVG, section Meal finder | Fetch & Meal DB API ) 20 mini projects - Brad Traversy확장 가능한 벡터 그래픽. 그래픽을 마크업하기 위한 W3C XML의 특수언어(dia

7일 전
·
0개의 댓글

ReactSVG Class Component 리팩토링하기 2 - zoom, panning편 (작성중)

이전의 Component 리팩토링에 있어서 Zoom/Panning이 완전히 적용되지 않는 문제가 있어 관련된 처리를 한다.

2021년 12월 23일
·
0개의 댓글

ReactSVG Class Component 리팩토링하기 1 - 최초 리팩토링

이전까지 작성하였던 항목들의 테스트가 완료되었으므로, 리팩토링과 함께 코드를 정리한다.

2021년 11월 29일
·
0개의 댓글
post-thumbnail

ReactSVG에 애니메이션 넣어보기

ReactSVG에 viewBox를 조작하는 애니메이션을 넣어본다.

2021년 11월 29일
·
0개의 댓글
post-thumbnail

ReactSVG에서 Panning, Zoom In/Out 사용해보기

Panning과 Zoom In/Out을 구현해본다.

2021년 11월 27일
·
0개의 댓글
post-thumbnail

React에서 SVG 이미지를 사용하기

SVG이미지의 특징은 xml로 되어있어, 각 요소들에 대한 접근이 가능하다는 것이다. 일반적인 비트맵이미지로는 수행할 수 없는 엘리먼트 단위의 제어등이 가능하다. (특정 Path의 색상만을 바꾼다던지, 크기를 변경한다던지, 보이지 않게 한다던지 등..)

2021년 11월 26일
·
0개의 댓글

리액트에서 SVG 사용하기

Scalable Vector Graphics로 각 위치 값을 표시하는 벡터와 같은 방식으로 깨지지 않고, 용량이 적고, 빠른 출력이 가능하며, 수정과 애니메이션이 가능하다. 확대나 축소를 해도 깨지지 않고 선명하게 볼 수 있다. .svg비트맵 기반의 이미지이기 때문에

2021년 11월 11일
·
0개의 댓글
post-thumbnail

SVG를 활용해 도넛차트 만들기

회사에서 다음 프로젝트를 들어가기 전까지 여유시간이 생기면서 어떤걸 공부하지? 고민에 빠졌다. 회사의 서비스에는 차트가 많이 사용되는 만큼 빈 시간을 통해 '직접 SVG를 활용해서 차트를 구현하면 좋지 않을까' 생각하게 되었다. 여러 차트중 적은 데이터로 쉽게 나타낼

2021년 11월 9일
·
0개의 댓글

SVG란

Scalable Vector Graphics 로 확장가능한 벡터 그래픽이다. 픽셀을 이용하는 png, jpg 과는 다르게 벡터를 기반으로 이미지를 표현한다. 따라서 크기에 따라 깨지는 것이 없고 용량도 적다고 한다.SVG 이미지는 마크업으로 쓰이므로 텍스트 에디터로 작

2021년 10월 30일
·
0개의 댓글

Next.js에서 SVG 파일 불러오는 방법

1. SVG 파일 그대로 불러오기 2. Webpack next.config.js A.tsx 3. React.js 컴포넌트로 변환하기 HomeIcon.tsx

2021년 10월 25일
·
0개의 댓글
post-thumbnail

SVG에 대해 알아봅시다.

SVG Study

2021년 10월 18일
·
0개의 댓글

[엄청 늦은 TIL]RN FlatList, AsyncStorage,SVG

기업 협업 부터, 취업 준비까지 핑계를 대자면 엄청 바쁘게 달려오다보니 해야지해야지 하던 블로깅이 무려 한달가까이 늦어버렸다.... 처음에는 '글의 퀄리티를 좀 높여서 블로깅을 해야지'라는 생각이었는데 내 기준으로 봤을 때 꾸준하지 못한게 더 악영향.. 조만간 깃블로그

2021년 9월 7일
·
0개의 댓글

기술 면접 예상 질문

1) svg 파일 안에 해당 svg를 정의할 영역을 def로 지정한다. 2) 지정된 def 영역 안에 고유한 id를 지닌 symbol들을 정의한다. 3) 정의된 icon을 사용하기 위해서 use를 사용한다. use를 사용해 해당 아이콘의 아이디 값을 연결하여 html

2021년 9월 1일
·
0개의 댓글

Create React App에서 SVG 파일을 간단히 불러오는 방법

아래와 같이 불러오면 컴포넌트처럼 활용할 수 있다.arrow.svg를 ReactComponent로 불러오고 이름을 Arrow로 바꿔서fill이나 width 같은 속성을 넣을 수도 있다.

2021년 8월 21일
·
0개의 댓글
post-thumbnail

Inkscape를 이용한 svg path 합치기

자잘한 지도 svg path들을 합쳐보자

2021년 8월 21일
·
0개의 댓글

SVG Animation

최근에 제플린을 사용하게 되면서 SVG 파일을 쉽게 다운로드할 수 있게 되었다 SVG를 활용해서 모션을 쉽게 구현할 수 있는 방법에 대해 공부해보자 SVG 장점 SVG는 벡터이미지로 확대해도 깨지지 않는다 같은 이미지를 사이즈/색상 변경해서 재사용하기 쉽다 기존

2021년 8월 18일
·
0개의 댓글
post-thumbnail

벡터 그래픽 , Figma 사용해보기

레스터 : 미세한 무수히 많은 점(픽셀,화소)이 모여서 그림벡터 : 점과 점 사이의 곡선으로 이미지를 구성하는 방식으로, 마치 수학 공식처럼 이미지의 형태를 구성하는 다양한 선들의 좌표와 수치 정보를 바탕으로 이미지를 화면에 표시SVG 다운로드GIF 다운로드SVG 만

2021년 8월 10일
·
0개의 댓글

다방 클론 코딩 - 1

svg, hoc, react nice dates, git organization

2021년 7월 20일
·
0개의 댓글

create-react-app에서 SVG를 ReactComponent로 사용하기

create-react-app(이하 CRA) + electron 환경에서 작업 중에 svg icon 파일을 사용해야 하는 경우가 생겼다. (state에 따라 색상 등을 다르게 주는 등의 작업을 위해..)사실 이전에도 버튼 안에 svg icon을 넣는 것을 시도해보았으나

2021년 7월 12일
·
0개의 댓글