Responsive SVG

ViewBox

<Svg width="100%" height="100%" viewBox="0 0 100 100">
  <Path id="canvas1-bezier" stroke="rgb(34, 43, 55)" stroke-width="4.5" stroke-miterlimit="10" fill="rgb(0, 255, 28)" d="M 51.5,-0.5 L 0.5,99.5 99.5,99.5 51.5,-0.5 Z M 51.5,-0.5" />
</Svg>

캔버스의 사이즈를 100px, 100px로 맞추고 path를 그린다. 그리고 내 앱에 쓸때 viewBox를 0 0 100 100으로 지정해 주면, 안에있는 path가 마치 100×100 사이즈의 캔버스에 그려지는것처럼 그려진다. 실제로 저 Svg는 100px이 아님에도 불구하고 예쁘게 그려진다.

캔버스를 200×200으로 해서 다시 그려도 viewBox만 0 0 200 200으로 맞춰주면 안에 path도 그 화면 안에서 잘 그려진다.

Responsive하게 그려져서 너무 다행이다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

Up Next:

Aspect Ratio

Aspect Ratio