# svg

27개의 포스트
post-thumbnail

svg string convert to blob

Blob은 Binary Large OBject로서 binary data의 콜렉션으로 생각하면된다.Blob자바스크립트에서 Blob은 immutable file-like object이고, File 인터페이스도 Blob을 기반으로 한다. 🙂🙂🙂svg string을 bl

7일 전
·
0개의 댓글
post-thumbnail

Web에서 사용하는 Image들

웹에서 사용되는 이미지들은 크게 비트맵(Bitmap)과 벡터(Vector)로 나눌 수 있다. 비트맵 이미지는 레스터(Raster) 이미지라고도 부르는데 픽셀이 모여 만들어진 이미지이고, 벡터 이미지는 점, 선, 면의 위치좌표 값, 색상 등의 수학적 정보들로 이루어진

2021년 4월 23일
·
1개의 댓글

Squircle (스쿼클)

요즘 네모도 아니고 동그라미도 아닌 스쿼클을 많이 쓰는 것을 볼 수 있다.스쿼클은 svg파일을 이용해 코딩하는 것이 가능하다.Ex)!codepenroghabo/embed/dyNgYjM?height=265&theme-id=dark&default-tab=html,resul

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

[React] React에서 SVG 활용하기

React 프로젝트에서 PNG? JPG? 아니요, SVG!

2021년 4월 8일
·
6개의 댓글
post-thumbnail

[HTML] HTML SVG

svg 태그에 대해 알아보겠습니다😉

2021년 4월 6일
·
1개의 댓글
post-thumbnail

Snap.svg 시작하기

어제 작성한 "랜덤 숫자에 따라 SVG 출력"의 애니메이션은 많이 어색하다.컵을 그리기 시작할 때, svg가 그려지는 원리조차 몰랐기 때문에 path를 이용해서 한땀한땀 그려냈는데, 이젠 완성도를 위해서 snap라이브러리를 사용하려고 한다.(Snap.svg에서는 SVG

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

랜덤 숫자에 따라 SVG 출력

네개의 컵에 단계가 다른 물을 준비한다. 1단계부터 4단계까지 있으며, 단계가 올라갈수록 컵에 물이 차오르고, 물의 색은 위험을 나타내는 붉은색을 띈다.가장 높은 단계인 4단계에서는 물이 넘치면서 살짝 튀기는 모습도 구현했다.(어색하지만,,😢)준비한 물은 다음과 같다

2021년 3월 22일
·
0개의 댓글

Web에서 사용되는 이미지 포맷

벡터(Vector)는 수학적 정보의 형태(Shape)들이 만들어내는 결과물이다.이미지가 가지고 있는 점, 선, 면의 위치(좌표) 색상 등의 정보를 온전히 가지며 그것을 화면에 렌더링한다.이러한 특징이 가지는 장점은 JPG와 같은 BitMap이미지 처럼 축소, 확대시에

2021년 3월 16일
·
0개의 댓글

svg path를 따라 움직이는 애니메이션 만들기

.circle-on-path는 path를 따라 이동할 원을 정의한다.

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

svg 직선을 커브로 변환하기

Smooth a Svg path with cubic bezier curves - François Romain

2021년 3월 5일
·
0개의 댓글

Resources: Importing SVG In React

This is a new special syntax when importing SVG in React. The ReactComponent import name is special and tells Create React App that you want a React c

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

svg 개체 동적으로 생성하기

tagName에 생성하고자 하는 태그명(svg, path, circle...)을 지정하여 생성.

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

SVG

SVG GUIDE SVG Reference 1. LOTTE ON

2021년 2월 2일
·
0개의 댓글

[TIL] 20.02.01

목표 : 날씨 설명(description)에 해당하는 아이콘을 화면에 보여주자 (예: 비오는 날 -> 비 내리는 아이콘)문제점 : module parsed failed 에러가 뜬다. 적당한 loader가 없다면서..검색해보니 이미지(내가 사용하려는 확장자는 svg이다)

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

2021 01 22 금 TIL - 21

ReactSVGCSS flex/gridReact Movie Code in gitHubSVG Code in gitHubflex-grid Code in gitHub리액트에서 또 파일업로드의 문제가 있었다. 다행이도 전에 한번 겪었던 문제라 eject run 은 쉽게 할 수

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

2021 01 18 월 TIL - 17

Node.jsflex/gridsvgNode in gitHubflex-grid in gitHubsvg in gitHubinteraction in gitHub오랜만에 node를 보니 분석하는 시간이 조금 더 걸린듯 하다. flex는 업무에서 많이 사용했었는데 grid는 아

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

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

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

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

2021 01 11 월 TIL - 12

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

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

SVG Pie Chart 그리기

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

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