SVG

피그마 SVG 파일 추출시 컴포넌트상에서 다른 이미지 생성

피그마에서 svg파일로 추출해서 프로젝트에 넣어서 사용하고 있었다 그러던 중 문제가 발생하였다 직접 파일을 볼때는 정상 작동 하였지만 React 코드 상에서 불러올때는 다른파일 이미지가 불러와 지는 것이다. 이유는 정말 참신했다 피그마에서 svg파일을 export할시에 svg파일에 있는 pattern의 id값이 각 svg의 고유값이 아닌 전부다 pattern0을 띄우고 있기 떄문이었다. // svg 파일중에 있는 코드 rect라는 태그의 fill이 pattern0을 가르키고 있다 여기서 지정하는 pattern0은 바로 밑에있는 pattern 태그를 뜻한다 이 pattern에서 이미지를 불러오게 된다 하지만 이게 페이지 단에 업로드가 되면 문제가 된다. 피그마에서 image가 있는 모든 파일들을 svg로 ..

SVG 태그

이번 프로젝트를 하면서 처음으로 SVG태그라는 것을 보았다 평소에 fontawsome에서 아이콘을 쓰고 있었는데 여기에 SVG태그가 사용이 되고 있었고 클론 코딩 중에 SVG태그를 사용할 일이 생겨서 한번 찾아보았다 SVG 만능설 이 svg태그는 백터형 이미지 포맷이다 이와 비교되는 것으로는 이미지 파일(jpg,png등) 이 있다. 이 둘의 차이점을 보면 이미지 파일을 이루는 것은 작은 픽셀이어서 크기를 키울수록 픽셀이 깨지는 화질 차이가 나지만 svg는 백터로써 크기가 변해도 화질이 깨지지 않는다 svg는 각 좌표에 점을 찍어서 이으는 개념으로 만들어지기 때문이다 그렇다 보니 이미지 파일은 이 픽셀을 저장하기 위해 용량이 svg파일보다 상대적으로 크다. svg파일은 점을 찍어서 이으는 개념인 백터이므로..