반응형
사이즈 용량 줄이기가 아니라 svg 크기 줄이기 방법입니다.
기존 svg 코드
<svg width="90" height="95" viewBox="0 0 102 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M89.8049 2H11.7561C6.36795 2 2 6.70418 2 12.5071V23.0142C2 28.8171 6.36795 33.5212 11.7561 33.5212H89.8049C95.193 33.5212 99.561 28.8171 99.561 23.0142V12.5071C99.561 6.70418 95.193 2 89.8049 2Z" stroke="#20A19B" stroke-width="3"/>
preserveAspectRatio="none" 을 넣고 width와 height를 수정하면 됩니다.
<svg width="90" height="95" preserveAspectRatio="none" viewBox="0 0 102 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M89.8049 2H11.7561C6.36795 2 2 6.70418 2 12.5071V23.0142C2 28.8171 6.36795 33.5212 11.7561 33.5212H89.8049C95.193 33.5212 99.561 28.8171 99.561 23.0142V12.5071C99.561 6.70418 95.193 2 89.8049 2Z" stroke="#20A19B" stroke-width="3"/>
svg 관련 추천 사이트
코드 입력시 svg 를 볼 수 있습니다.
반응형
'📌Language > HTML & CSS' 카테고리의 다른 글
| TIL) overflow-clip-margin 속성으로 정밀한 클리핑 제어하기 (0) | 2024.07.10 |
|---|---|
| 유용한 css 모음 (계속 추가중) (0) | 2022.08.16 |
| 리액트) 동적으로 클래스 추가해서 css 효과주기 (0) | 2022.07.20 |
| 리액트 fontawesome 사용방법 (0) | 2022.07.11 |
| TIL) id 속성과 class 속성의 차이에 대해서 설명해주세요. (0) | 2022.05.23 |
