제플린에서 뽑은 svg 에셋이 디자인과 달리 미묘하게 색이 흐리다면? 원인은 스케치에서 tint 로 색상값을 조절한 경우 → svg 코드 상에 feColorMatrix 가 생성되어 이 부분이 색상 차이를 유발함 → 번거롭라도 아래와 같이 fill, border 색상을 직접 변경시켜줘야 함! AS-IS TO-BE 이 바로 들어가진 형태여야 오차없이 표현됩니다!
SVG
시작하며 카카오 프로필의 가장 대표적인 형태라고 할 수 있는 스퀘어클(squircle)에 대해 이야기 해보려고 합니다. Squicle은 Squre+Circle이 합성된 신조어로 모서리가 둥근 정사각형을 말합니다. 카카오에서 흔히 프로필을 표현할 때 자주 쓰곤 합니다. 처음에는 radius 값으로 비슷하게 깎아 놓았었는데 디자이너님께서 임의 값 대신 SVG path 그대로 사용해야 한다고 하셔서 수정했습니다. 계열사 디자인도 본사의 디자인 시스템에 소속되어 관리되기 때문에 공통 컴포넌트는 그 규칙을 잘 따라야 합니다. SVG 이해를 위한 추천 글 : a11y.gitbook.io/graphics-aria/svg-graphics 요구사항 - SVG 스퀘어클 path 를 반영 - 테두리에 inside 1px r..
1. SVG 코드를 활용할 순 없을까? See the Pen gyrqYe by zinee (@zineeworld) on CodePen. 2. SVG 코드를 Data URI로 변환하기 검정색 아이콘이 SVG의 Data URI 값을 넣은 것이고, 파란색이 SVG 코드를 그대로 넣은 것입니다. IE 에서는 background-image 에 코드를 넣으면 보이지 않는 다는 것을 확인했습니다. 아래 주소를 각 브라우저에 띄워 확인해 보실 수 있습니다. https://zineeworld.github.io/demo/svg_fonticon_test.html 을 주로 변환하는 단순한 작업이지만 아래 사이트를 이용하면 빠르고 쉽게 변환이 가능합니다. (2021/04/15 수정) 위 사이트를 통해 SVG 코드를 Data-U..
