# svg

165개의 포스트
post-thumbnail

[React] SVG, 이미지 렌더링 시 Deferred Component로 빈 화면이 노출 되는 순간을 로딩 컴포넌트로 대체하기

SVG, 이미지 로딩 시간 때문에 빈 화면이 노출될 때

2023년 9월 17일
·
0개의 댓글
·
post-thumbnail

[The Odin Project | Full Stack JS] SVG

Intermediate HTML and CSS Course > Intermediate HTML Concepts > SVG

2023년 9월 13일
·
0개의 댓글
·
post-thumbnail

framer-motion과 Flubber를 이용해 우아한 svg 애니메이션 만들기

motionValue와 useTransition, flubber를 이용해 자연스러운 svg 애니메이션을 구현해보았습니다.

2023년 9월 10일
·
0개의 댓글
·
post-thumbnail

[React Native] 글자 Stroke 효과 주기

React Native에서 글자 외곽선 효과를 주려면 어떻게 구현할 수 있을까? React Native는 일반 웹과 달리 text-stroke가 존재하지 않는다.

2023년 9월 1일
·
0개의 댓글
·
post-thumbnail

ErrorNote - Flutter SVG 인식 에러

Flutter 에 SVG 이미지를 입력했으나, 일부 요소가 반영되지 않는 이슈가 발생했습니다.아래 이미지는 Figma 로부터 Export 한 이미지 입니다.아래 이미지는 디바이스에서 랜더링한 이미지 입니다.자세히 보면, AI 의 그라데이션 영역이 빠져있습니다.“flut

2023년 8월 30일
·
0개의 댓글
·
post-thumbnail

svg 파일 크기 컴포넌트에 따라 조절하기

svg파일 상위 컴포넌트에 따라 크기 조절

2023년 8월 16일
·
0개의 댓글
·
post-thumbnail

2023 제주 웹 컨퍼런스 연사 회고

제주 웹 컨퍼런스 연사 참여 후 강제(?) 제주 1주살이 후 쓰는 글.인터랙션 웹을 계기로 시작하게 된 개발이었기에 이를 구현하기 위해서 일단 기초적으로 알아야할 것에는 무엇이 있을까하는 의문을 가졌고, 여러 이유를 바탕으로 <canvas>와 <svg>를 꼽

2023년 8월 15일
·
2개의 댓글
·
post-thumbnail

[TIL] svg로 팔다리를 그리고 합쳐보자!

조금.. 은 지난 일이지만 드디어 svg만을 활용하여 그리니를 완성하였다.우선 저번 글에서는 '그리니'의 소스가 없어서 직접 본따서 그렸다고 하였는데, 찾아보니 있었다!사내 서비스 중 디자인을 제공해주는 곳을 찾아내서 그리니 소스도 어렵지 않게 받을 수 있었다.그런데

2023년 8월 9일
·
4개의 댓글
·
post-thumbnail

redux 원리

Redux 리덕스는 애플리케이션의 상태가 하나의 중앙 스토어에서 관리되므로, 상태의 일관성을 유지하고 예측 가능함을 보장합니다. 이는 애플리케이션의 모듈화와 독립성을 강화하여 코드의 유지보수성을 높이고, 결합도를 낮추는 데 도움을 줍니다. decoupling Deco

2023년 8월 7일
·
1개의 댓글
·
post-thumbnail

[TIL] 캐릭터를 그려 보자! 근데 이제 그래픽 툴 없이 svg만을 활용해서..

목표 중 하나인 역동적인 로그인 UI 개발을 시작해보려 한다.여기서 목표를 간단히 설명하자면 마우스 커서나 인풋 커서에 따라 캐릭터의 모션이 적용되는,, 그런 UI인데 직접 보는게 빠르겠다.출처: https://dribbble.com/shots/21953371

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

svg를 컴포넌트로 만들어서 사용하자

SVG 강화 카즈아ㅏ아ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ~~~~~~~~~~~~

2023년 7월 21일
·
8개의 댓글
·
post-thumbnail

Satori를 이용하여 서버에서 svg 만들기

HTML과 CSS를 SVG로 변환할 수 있는 라이브러리 Satori를 이용하여 서버에서 svg를 만들어보자

2023년 7월 11일
·
0개의 댓글
·

React SVG component 생성 & onClick 클릭이벤트 발생시키기 (ts)

react에서 svg 파일을 사용하는 방법 & 클릭 이벤트 발생시키기

2023년 7월 11일
·
0개의 댓글
·

SVG change color

svg 태그에 fill = 'none' 부분을 제외하고 자식 태그들의 fill, stroke 속성의 값을 currentColor 로 지정하게 되면부무태그의 색상을 그대로 가져와서 override 하게 됩니다.opacity, stroke-opacity = 1 투명도 1

2023년 7월 5일
·
0개의 댓글
·
post-thumbnail

SVG에서는 backdrop-filter: blur() 같은 효과를 지원할까?

figma에서 이미지를 svg 확장자로 export했는데 두 반투명한 사각형 오브젝트가 겹친 이미지로, 두 오브젝트가 겹치는 부분은 뒷쪽 오브젝트가 blur 처리되어 보여야 하나, 실제 export된 결과물에서는 뒷쪽 사각형이 그대로 보이는 결과물이 나왔다.export

2023년 6월 13일
·
0개의 댓글
·
post-thumbnail

React에서 SVG 컴포넌트 형태로 사용하기

이미지 확장자 특징 정리 + React에서 SVG 컴포넌트 형태로 사용법

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

svg 활용법

SVG란? 확장가능한 벡터그래픽을 말한다. XML파일형식의 마크업언어로 이루어진 이미지인데, css나 js로 수정가능한게 신기..

2023년 5월 4일
·
0개의 댓글
·
post-thumbnail

svg의 fill 수정이 안먹힌다면!?

svg파일에서 태그에 fill이 있는지 확인해보자본인의 경우엔 이런 부분이 있어 이 부분을 지워줬고 잘 동작하였다.

2023년 4월 19일
·
0개의 댓글
·

[typescript] svg 파일 사용하기

ts 전에는 {ReactComponents as Logo} 이런식으로 import해서 사용이 가능했다.그런데 tsx로 확장자를 바꾸니까 svg 경로에 빨간줄이...^^찾아보니 d.ts를 추가하라고 해서 svg.d.ts 파일을 src 폴더내에 만들었다.그리고 tsconf

2023년 3월 24일
·
0개의 댓글
·

svg 이미지 색을 현재 color로 설정하기

자주 구경하는 SANKOU에서 효과나 모션이 예쁜 곳들을 북마크를 해 놓는다. 그중에 桜十字病院 이 병원 사이트의 호버 효과들이 예뻐서 따라해보려고 북마크해 놨었다. 웹사이트의 장점은 브라우저 개발자도구로 소스코드를 확인할 수 있는 것 아닌가.호버할 때마다 (분명 SV

2023년 3월 24일
·
0개의 댓글
·