# svg

saemileee

이슈 Recharts 라이브러리로 차트를 구현하는 중 차트 데이터가 패칭 된 후 컴포넌트를 렌더링하도록 설정하였음에도 불구하고 SVG가 화면에 그려지는 시간 때문에 잠깐 빈 화면이 렌더링 되었다. 차트 컴포넌트 렌더링 시 빈 화면이 노출되는 이미지 위 이미지 처럼 레이아웃은 잡힌 상태지만 SVG 요소들이 페인트 되는 시간 때문에 빈 화면이 잠깐 노출되는 듯하다. 해결 방법 의도적으로 로딩 시간을 지연시키고 그 동안 로딩 스피너를 렌더링하면 이와 같은 현상을 해결할 수 있을 것 같았다. children 컴포넌트의 렌더링 시간을 임의로 조정하는 Wrapper 형 컴포넌트인 DeferredComponent를 활용해 보기로 했다. [출처:무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도

hichulog

🚀 SVG >What is SVGs? SVGs are a very common image format on the web. SVGs are a scalable image format, which means they will easily scale to any size and retain their quality without increasing their filesize. They’re also very useful if you need to create or modify your images programmatically, because you can change their properties through CSS and JavaScript. [Example] SVG는 사람이 읽을 수 있고 HTML 요소와 마찬가지로 DOM의 요소가 될 수 있다. 💡 Use Icons Graphs/Charts Large, simple

ksr20612

svg animation Rockie Talkie ] 를 비롯한 React 기반의 개인 프로젝트에서 [🔗 framer-motion을 사용하고 있습니다. 간결하지만 강력하고 확실한 기능을 보장하기 때문입니다. Framer-motion이 제공하는 독특한 기능 중 하나로 와 의 조합을 꼽을 수 있는데요, 선언적인 형태로 애니메이션 조작할 수 있다는 점에서 주목할 만합니다(애니메이션이라는 특성상 완전히 선언적일 수는 없지만요). 이 글에서는 framer의 motionValue와 useTransform, flubber의 조합을 통해 구현하기 어려운 s

aborile

React Native React Native에서 글자 외곽선 효과를 주려면 어떻게 구현할 수 있을까? React Native는 일반 웹과 달리 text-stroke가 존재하지 않는다. 가장 많이 답변되고 그나마 정확한 방식은 svg(react-native-svg 등의 라이브러리 사용)로 글자와 stroke를 아예 그려내는 방식인 것 같다. 그러나 svg로 직접 그릴 경우, stroke width가 굵어지면 글자를 잡아 먹고(text-stroke와 비슷한 이슈인 것 같다), Svg와 width/height, Text의 x/y를 조정해야 하는데 번거롭기도 하고 실측해서 정확한 값을 넣기 어렵다는 단점이 있다. 또한 커스텀 폰트를 사용하고 있는 경우 이를 반영하여 svg를 그리는 것이 어렵다. ![](https://velog.velcdn.com/images/aborile/post/e3ed99dc-490a-45fe-ae85-9713561c9a17/image.png

kipsong

문제 & 상황 Flutter 에 SVG 이미지를 입력했으나, 일부 요소가 반영되지 않는 이슈가 발생했습니다. 아래 이미지는 Figma 로부터 Export 한 이미지 입니다. 아래 이미지는 디바이스에서 랜더링한 이미지 입니다. 자세히 보면, AI 의 그라데이션 영역이 빠져있습니다. 해결방법 “flutter_svg” 패키지 내부에서, 이슈가 제기되어 있었고, 그중에서 많은 사람들의 좋아요를 받은 답변이 있었습니다. ![](https://velog.velcdn.com/images/kipsong/post/ab

no-pla

이번에 처음으로 svg파일을 사용해봤는데 이미지 파일과 다르게 크기를 조절하는 방식이 어려웠다. 이미지의 크기를 조절하기 위해서는 width, height, viewbox, preserveAspectRatio를 설정해주어야 한다. 방법 svg 파일을 컴포넌트화하여 가져왔다. 상위 컴포넌트의 크기에 맞게 크기를 유동적으로 조절하기 위해 width와 height를 각각 70%로 지정한다. (상위 컴포넌트보다 작게 설정하기 위해...) viewBox 설정 viewBox는 svg의 위치, 크기 등을 조절할 수 있는 속성이다. 순서대로 x좌표, y좌표, width, height를 받는다. > min-x: viewBox에서 보여질 영역의 왼쪽 X 좌표 min-y: viewBox에서 보여질 영역의 상단 Y 좌표 width: viewBox에서 보여질 영역의 너비 height: viewBox에서 보여질 영역의 높이 예를 들어 내가 작성한 컴포넌트는

ony_

제주 웹 컨퍼런스 연사 참여 후 강제(?) 제주 1주살이 후 쓰는 글. 📗 I CANVAS SVG 무료 책 집필기를 담아 인터랙션 웹을 계기로 시작하게 된 개발이었기에 이를 구현하기 위해서 일단 기초적으로 알아야할 것에는 무엇이 있을까하는 의문을 가졌고, 여러 이유를 바탕으로 `와 `를 꼽았고 팀원 분들과 함께 2, 3개월 여간 이에 대한 책을 집필했고 6월 중순 'I CANVAS SVG' 책이 출판됐다. 지금 생각해도 뿌듯했던 순간😊 제주 웹 컨퍼런스에 연사자로 참여하고 싶었기에 바쁜 최종 프로젝트 중에도 함께 집필한 팀원들에게 의견을 물어보고 참여의사가 있는 분들과 함께 지원하여 참여하게 되었다! 👩‍💻 팀장으로서 참여한 연사 책 집필 기간에는 민지님이 팀장을 해주셨지만 연사에서는 빠지시기도하셨고, 뭔가 내가 가장(?) 의지가 커보였기에 팀장이 되었다.

kozel

조금.. 은 지난 일이지만 드디어 svg만을 활용하여 그리니를 완성하였다. 우선 저번 글에서는 '그리니'의 소스가 없어서 직접 본따서 그렸다고 하였는데, 찾아보니 있었다! 사내 서비스 중 디자인을 제공해주는 곳을 찾아내서 그리니 소스도 어렵지 않게 받을 수 있었다. 그런데 그 소스도 이모티콘에 대한 소스만 존재하였기 때문에 그나마 표현이 덜한 이모티콘을 선택하고 각도를 조절하여 기본적인 모습을 하게 만들었다. ![](h

just-do-justin

Redux 리덕스는 애플리케이션의 상태가 하나의 중앙 스토어에서 관리되므로, 상태의 일관성을 유지하고 예측 가능함을 보장합니다. 이는 애플리케이션의 모듈화와 독립성을 강화하여 코드의 유지보수성을 높이고, 결합도를 낮추는 데 도움을 줍니다. decoupling Decoupling은 애플리케이션의 다양한 부분들 간의 결합도를 낮추는 개념입니다. 결합도란 하나의 모듈이 다른 모듈에 의존하는 정도를 나타냅니다. Redux에서는 상태 관리를 중앙에서 처리하기 때문에 컴포넌트 간에 상태를 공유하고 통신하기 위해 직접적인 의존성을 갖지 않아도 됩니다. 이로 인해 컴포넌트들은 더 독립적이며, 결합도가 낮아져 컴포넌트의 재사용성과 유지보수성이 높아집니다. stand alone Redux의 스토어와 리듀서는 모듈화되어 독립적으로 작성할 수 있습니다. 각각의 리듀서는 특정 상태 조각을 관리하며, 이들은 서로 영향을 미치지 않고 독립적으로 작동합니다. 이렇게 모듈화된 스토어와 리듀

kozel

목표 중 하나인 역동적인 로그인 UI 개발을 시작해보려 한다. 여기서 목표를 간단히 설명하자면 마우스 커서나 인풋 커서에 따라 캐릭터의 모션이 적용되는,, 그런 UI인데 직접 보는게 빠르겠다. 출처: https://dribbble.com/shots/21953371-WeStud-Creative-Log-In-For-The-Educational-Platform?utm-medium=ownedsocial&utmcontent=bufferd73c5&utmmedium=ownedsocial&utmsource=twitter&utmcampaign=buffer 이런건데, 이것과 비슷하게 카카오프렌즈 캐릭터를 svg로 구현한 분도 있어서 첨부한다. https://taegon.kim/archives/9658 이 두

ubin_ing

계기 Next.JS 프로젝트에서 퍼블리싱을 진행하던 도중, 선배님께 한 가지의 코드 리뷰를 받았다. 바로 svg를 컴포넌트로 만들어서 사용하면 어떻겠냐는 코드 리뷰였다. 이 당시 svg 파일이 조금 많았었는데, 하나하나 바꾸려고 하니 조금 피곤한 작업인 것 같았다. 그렇다면, 컴포넌트를 사용하지 않은 기존 방식에는 어떤 문제가 있을까? 코드의 가독성이 낮아진다 보통은 Next.JS에서 svg를 사용할 때, 파일로 따로 선언해둔 뒤 이를 모듈로 import한 후, 'next/image'의 Image 컴포넌트에 src로 전달하는 식으로 사용한다. 이렇게 되면 코드를 해석할 때, Image로 한 번, src 내에 있는 Like로 한 번, 총 두 번에 걸쳐 코드를 해석해야 하며, 넓게 보았을

sumi-0011

Satori란? > 공식 문서 : https://github.com/vercel/satori HTML과 CSS를 SVG로 변환할 수 있는 라이브러리입니다. Satori를 이용해서 svg를 만들때 두가지 인자를 넘겨주어야 하는데, (element, options) 그중 필수적으로 필요한 것은 아래와 같습니다. 이미지를 만들 dom element 이미지 크기 (width, height) svg 안 text의 font satori는 서버에서 svg 이미지를 만드는 라이브러리로, Next.js 환경에서 사용한다면 getServerSideProps 등을 이용하여 Server Side에서 실행해야합니다. 또한, safoti에서 텍스트를 그릴때 기본적으로 `가 아닌 in SVG`로 그립니다. 그렇기 때문에 텍스트를 그릴 font를 지정해주어야 합니다. 저같은 경우에는 google fonts를 이용해 server에서

1000_yj

React에서 SVG를 사용하는 방법 -> component로 만들어서 사용하면 된다. 실제 도입 방법 svg 파일을 열어보면 다음과 같이 생겼다. 위 파일을 직접 컴포넌트로 만들어서 사용하면 된다. 사용법은 다음과 같다. SVG component 주의할 점 : JS에서 전달되는 속성은 방식이 아니라 CamelCase 방식으므로 속성을 바꿔줘야 한다! 위의 컴포넌트를 가져다 쓰면 된다. SVG component에서 onClick 이벤트 발생시키기 방법이 크게 2가지다. svg 컴포넌트를 나 으로 감싸서 이벤트 발생시키기 이벤트를 직접 svg tag에게 전달하기 2번 방법을 구현하는 방법은 다음과 같다. TS 환경이어서 전달하는 를 type으로 전달해주었다. 태그 내에서 사용 가능한 속성은 [MDN 공식문서 - SVG Attribute reference](https://developer.mozilla.org/en

agnusdei1207

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

jjvoiture99

figma에서 이미지를 svg 확장자로 export했는데 두 반투명한 사각형 오브젝트가 겹친 이미지로, 두 오브젝트가 겹치는 부분은 뒷쪽 오브젝트가 blur 처리되어 보여야 하나, 실제 export된 결과물에서는 뒷쪽 사각형이 그대로 보이는 결과물이 나왔다. | ---|------| 원인 export한 svg 파일에서는 를 를 이용하여 구현했다. 예시) 문제는 는 svg 내의 지정된 해당 요소에 대해서만 blur 처리를 할 뿐 그 이외의 요소에 대해서는 영향을 주지 못한다. SVG 스펙 내부에는 이를 지원하

bnb8419

각 이미지 확장자들의 특징 정리 펫모리 프로젝트에서 SVG형태의 아이콘들을 컴포넌트화 한 코드 정리 이미지 확장자 보통 많이쓰는 이미지 확장자에는 GIF, JPEG, SVG, PNG가 있다. 보통 웹에서는 SVG를 통해 이미지 작업을 많이 하지만, 상황별로 각 이미지 확장자 특성에 맞게 이미지를 사용 할 필요성을 느꼈다. 이에 각 이미지 확장자 특징들을 정리해보려고 한다. Lossless(무손실압축) vs Lossy(손실압축) 무손실압축은 이미지를 압축해도 이미지의 퀄리티가 손상되지 않는 특징을 말한다. 손실압축은 이미지를 압축하여 크기를 줄이지만, 이미지 품질은 손상된다. Indexed color vs Direct Color 디지털 이미지가 구현되는 이론적 내용 중 색 깊이에 대한 내용이다. 먼저 Indexed color는 컴퓨터의 저장용량과 전송속도를 절약하기 위해 한정적으로 맞춘 칼러를 제공하는 기

jungmin88919

SVG란? 확장가능한 벡터그래픽을 말한다. XML파일형식의 마크업언어로 이루어진 이미지인데, css나 js로 수정가능한게 신기.. 확장성도 있어 이미지를 확대해도 품질이 떨어지지않아 그것도 신기.. 단점은 ie8에서 지원이 안된다고한다 ^^ 역시 ie!! 사용법 인라인(inline) html상에 코드를 그대로 넣어주는 방법으로 이미지로드가 필요없다는 장점이 있음!! 단점은 html코드가 엄청엄청엄청!! 더러워짐!!! 신경쓰여 미칠거같아짐!!! object >예시 // type이 src가 아닌 data인걸 알수있음. 외부 css 기능을 사용할수없다는 단점이 있다. svg파일 자체에 스타일을 박아야하는 신경쓰이는 일을 해야댐;; 기각 내가 사용하고싶은건 background로 쓰면서 외부 css기능을 사

hyeongwoo1279

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

koyk0408

ts 전에는 {ReactComponents as Logo} 이런식으로 import해서 사용이 가능했다. 그런데 tsx로 확장자를 바꾸니까 svg 경로에 빨간줄이...^^ 찾아보니 d.ts를 추가하라고 해서 svg.d.ts 파일을 src 폴더내에 만들었다. 그리고 tsconfig.json 파일도 수정해줌 이제 잘 된다! 아 이렇게 할 경우에는 ReactComponents 말고 보통 컴포넌트 import하듯이 해주어야 한다.

lize

자주 구경하는 SANKOU에서 효과나 모션이 예쁜 곳들을 북마크를 해 놓는다. 그중에 桜十字病院 이 병원 사이트의 호버 효과들이 예뻐서 따라해보려고 북마크해 놨었다. 웹사이트의 장점은 브라우저 개발자도구로 소스코드를 확인할 수 있는 것 아닌가. 호버할 때마다 (분명 SVG인)아이콘 색이 자연스럽게 바꾸길래 어떻게 하고 있나 CSS 코드를 살펴보았는데, SVG 자체에 fill을 바꾸는 코드는 안보이고 상위 i태그에 color만 바꾸고 있는거다. 오잉? 어떻게 한거지? 싶어서 SVG 태그의 CSS를 살펴보았다. 포인트는 바로 이것! fill에 컬러값만 직접 넣어봤지, 이렇게 쓰는건 처음 봐서 찾아봤다. https://css-tricks.com/cascading-svg-fill-color/ 여기를 보면 처음 문단에 다