# svg
[typescript] svg 파일 사용하기
ts 전에는 {ReactComponents as Logo} 이런식으로 import해서 사용이 가능했다.그런데 tsx로 확장자를 바꾸니까 svg 경로에 빨간줄이...^^찾아보니 d.ts를 추가하라고 해서 svg.d.ts 파일을 src 폴더내에 만들었다.그리고 tsconf
svg 이미지 색을 현재 color로 설정하기
자주 구경하는 SANKOU에서 효과나 모션이 예쁜 곳들을 북마크를 해 놓는다. 그중에 桜十字病院 이 병원 사이트의 호버 효과들이 예뻐서 따라해보려고 북마크해 놨었다. 웹사이트의 장점은 브라우저 개발자도구로 소스코드를 확인할 수 있는 것 아닌가.호버할 때마다 (분명 SV
이미지
https://css-tricks.com/data-uris/HTML에서 요소를 사용하거나 CSS에서 배경 이미지를 선언할 때 외부 이미지 파일에 링크할 필요가 없다는 것을 알고 있었나요? 데이터 URI를 사용하여 이미지 데이터를 문서에 직접 포함할 수 있습니
Very long vector path... 이슈를 마주했을 때 어떻게 해결할까?
Android 앱을 만들 때 개발자가 자주 직면하는 문제 중 하나는 앱의 성능을 최적화하는 것입니다. 성능에 영향을 줄 수 있는 일반적인 문제 중 하나는 앱에서 사용되는 SVG 파일의 크기입니다. SVG 파일의 크기가 크면 "벡터 경로가 매우 길어 성능이 좋지 않습니다
아이콘폰트 사용법
아이콘 이미지들을 SVG파일로 뽑았는데 그대로 사용하면코드가 길어지면 알아보기 힘든 경우가 있다.그때 쓸 수 있는게 바로 아이콘폰트!https://icomoon.io/app/이 링크로 들어가면 아이콘 폰트를 만들 수 있다.사이트로 접속하여 상단에 Import
bug: svg | pattern id 중복 - 이미지 중복
svg 사용 시 다른 파일임에도 svg 이미지가 중복되었다면내부에 image 태그를 사용한 svg 파일인지 확인 후그렇다면 각 파일의 pattern 태그의 id 와 rect 태그의 url(
SVG / viewBox, viewPort
SVG(Scalable Vector Graphics)란? 확장 가능한 마크업 언어(Extensible Markup Language; XML)로 작성된 벡터 기반의 그래픽 이미지 포맷 " svg = 코드로 구성된 이미지 " 👉 장점 1) 컬러를 바꿀 수 있다. 2)
[React] bitmap to svg
비트맵 이미지를 벡터로 꼭 바꿔야하는 사람들을 위한 코드일반적으로는 브라우저에서 이 짓을 수행해야할 이유는 없다!!
SVG "Filter" 에 대한 정리 - 3
가장 많이 쓰이고, 가장 복잡한 feComponentTransfer에 대해 알아보자. 이름에서는 용도를 추측하기 어렵지만, 필터 영역에 대한 색상 구성 요소(Component)를 재매핑하는 역할을 수행한다. 색조, 채도, 밝기 변경부터 색조화(Color Balance
PNG Image Sprite에서 SVG Symbol Sprite 적용하기
웹 접근성을 위해 아이콘 버튼 IR 기법을 활용하기위 코드는 웹 접근성을 위해 아이콘 버튼 IR 기법을 활용하기에서 추가로 여러 아이콘을 이용한 svg 이미지 포맷을 png 이미지 포맷으로 바뀌 IS(Image Sprites) 기법을 이용한 코드이다.근데 아이콘 같은
SVG 이벤트 및 css 추가
SVG Scalable Vector Graphics 의 약자로 벡터 그래픽이다. 벡터란 무엇인가! 크기를 줄이거나 늘려도 픽셀이 깨지지않고 용량이 작은 이미지 형식이다. 기존에 단순한 아이콘들을 png로 사용했는데 이번기회에 svg를 사용해볼까 하다가 시작한 삽질 뭘
SVG "Filter" 에 대한 정리 - 1
위 예제의 지글거리는 텍스트는 편집 가능한(contenteditable 특성이 지정, 상속된) div, p 등의 텍스트 요소이다. JS 애니메이션 라이브러리 없이, div의 텍스트 요소와 별도로 마크업되어 있는 SVG의 <filter> 요소를 CSS 애니메이션으로 키
SVG 사용법
svg 파일 포맷은 웹 사이트에 2D 그래픽, 차트, 일러스트레이션을 표현하는 데 널리 사용되는 툴로, 특히 아이콘 및 로고 등에 많이 사용한다.벡터 파일이므로 확대하거나 축소해도 해상도가 저하되지 않는다.기본 SVG 파일은 많은 컬러 픽셀로 생성되는 래스터 이미지보다
SVG "SMIL Animation" 에 대해
SMIL은 원래 다양한 멀티미디어 데이터를 동기화해 프레젠테이션하기 위해 타이밍, 레이아웃을 지정할 수 있는 마크업 언어이다.그렇기 때문에 보통 과거 <embed>와 외부 어플리케이션(ActiveX)를 통해 실행되는 멀티미디어를 동기화시키기 위해 사용되었으나, 검
SVG "Path" 에 대한 정리
지난 글에 이어 MDN의 SVG 튜토리얼을 읽던 중, 계속 의문점이었던 <path> 요소에 대한 정리가 꽤 중요한 부분인것 같아서 정리해보았다.SVG의 도형 요소 중에는 다각선과 다각형을 그리기 위한 <polyline>과 <polygon>요소가 있다.하
SVG 스프라이트 기법으로 사이트 성능 향상시키기(리액트에서 스프라이트 SVG 사용하기)
프로젝트 배포가 끝났다. 첫 배포 후 라이트하우스에서 성능을 측정해보니 성능 65점, 접근성 86점으로 개선해야 하는 수치가 나왔다. 성능과 접근성 면에서 여러 가지 방법으로 리팩토링을 시도해볼 예정인데, 첫번째 시도는 이미지 스프라이트를 사용하여 Peformanc
SVG Miscellaneous - 1
들어가며 3개 시리즈에 걸쳐 UI 디자인 툴에서의 SVG 내보내기 최적화 이론에 대해 알아보았다. 정리할수록 SVG 자체에 대한 몰이해가 느껴져, 적당히 넘어갔던 부분을 기초부터 정리해보면서 노트한 내용을 적어보려 한다. 아래 내용은 MDN의 SVG 튜토리얼을 읽으