아래 글 다 필요 없고
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
