[HTML5&CSS3] SVG

Web/HTML5 & CSS3

by 클리엘 클리엘 2020. 2. 27. 11:41

728x90

SVG(Scalable Vector Graphics)는 벡터 그래픽을 표현하는 데 사용되는 태그입니다.

우선 SVG를 사용해 그래픽을 표현하려면 SVG태그를 통해 그래픽으로 표현할 영역을 잡아야 합니다.

<body>
    <svg width="500" height="500">
        
    </svg>
</body>

그런 다음 svg태그 안에서 실제 표현할 그래픽을 작성합니다.

<body>
    <svg width="500" height="500">
        <rect width="500" height="500" fill="yellow"></rect>
    </svg>
</body>

이번에는 원을 그려보도록 하겠습니다.

<body>
    <svg width="500" height="500">
        <circle cx="300" cy="150" r="100" fill="orange"></circle>
    </svg>
</body>

SVG와 일반 이미지의 차이점은 이미지는 확대하면 품질이 깨지게 되지만 SVG는 벡터 방식이라 확대해도 깨지지 않고 품질을 계속 유지한다는 이점이 있습니다.

안타깝게도 본인이 이해하고 있는 SVG의 수준이 낮아서 본래 SVG에 관한 글을 올릴 생각이 없었으나 간단히 소개하는 정도로만 마무리하려고 합니다.

728x90

CLIEL LAB