📑

데이터 시각화란? ~ SVG

Created

Nov 16, 2021 05:50 PM

Type

React

Mento

노지현님

Created By

데이터 시각화란?

데이터를 시각화 함.

수많은 데이터 속에서 유의미한 정보를 찾고 시각화 함.

SVG 다양한 도형 만들기

SVG

Scalable Vector Graphics.

크기를 축소, 확대하면 해상도를 스스로 조절함. 아무리 확대해도 픽셀이 보이지 않음.

HTML과 비슷한 마크업 언어로 작성.


<html>
    <body>
        <svg width="500px" height="500px">
            <text x="10" y="25" font-size="20">SVG로 도형만들기</text>
            <circle cx="100" cy="100" r="20" />
            <ellipse cx="50" cy="25" rx="40" ry="20" />
            <rect x="0" y="0" width="100" height="20" />
            <rect x="0" y="100" width="100" height="20" rx="10" ry="10" />
            <polygon points="100,0 50,50 150,50" /> <!--삼각형-->
            <Line x1="0" y1="0" x2="200" y2="50" stroke="black" />
            <path d="M 0 50 q 50 -50 100 0 l 100 0" />
        </svg>
    </body>
</html>