👨‍💻

가장 간단하게 SVG Responsible 하게 만들기

아래 글 다 필요 없고
svg 객체에 max-width 100% 먹여주면 된다.. 끗

1. SVG Container 만들기

<div class="svg-container"></div>
HTML
복사
svg를 담을 적절한 container를 만들어준다.

2. SVG 객체 만들기

<svg viewBox="0 0 800 600" preserveAspectRatio="xMinYMin meet" class="svg-content-responsive"> </svg>
HTML
복사
viewBox를 원래 이미지의 크기로 지정해주고 위와 같이 작성한다.

3. CSS 설정

.svg-container { display: inline-block; position: relative; width: 100%; padding-bottom: 100%; vertical-align: top; overflow: hidden; } .svg-content-responsive { display: inline-block; position: absolute; top: 0; left: 0; }
CSS
복사
위와 같이 CSS를 먹여준다.
자바스크립트로 일일히 짜야하나 싶었지만... 역시 구글은 신이야...
REF