[CSS] SVG 레이아웃 잡기

svg의 크기나 위치가 제각각이라 나열 시, 조금씩 위치가 안 맞는 경우가 종종 있었다. 그럴 때를 위해 적은 간단한 팁이다.

<div class="svg-wrapper">
	<p class="svg-box">
    	<svg></svg>
    </p>
</div>

 

• svg를 항상 이중 박스로 감싼다.
• svg는 레이아웃에 따라 크기가 자동으로 결정되지만, 그렇지 않을 때는 height 값을 주면 고정된 크기를 잡을 수 있다.
• svg-wrapper는 svg의 크기나 위치를 재조정한다.(flex, padding 등)
• svg-box는 svg의 위치를 미세하게 조정할 때 사용한다.(position:relative, svg에 position:absolute를 줘서 조작)