HTML5 SVG - 온더테크

Contents

HTML5 SVG(Scalable Vector Graphics)

SVG의 개념과 장점(Concept and Advantages of SVG)

SVG(Scalable Vector Graphics)는 XML 기반의 벡터 이미지 포맷으로, 해상도에 독립적인 이미지를 생성하고 조작할 수 있습니다. SVG는 벡터 그래픽이기 때문에 크기를 조정해도 품질이 저하되지 않으며, 자바스크립트와 CSS를 이용하여 스타일링 및 애니메이션 효과를 추가할 수 있습니다.

장점:

해상도 독립성: 크기를 조정해도 품질이 저하되지 않음.
검색 가능: 텍스트로 저장되어 검색 엔진이 읽을 수 있음.
편집 가능: XML 파일이므로 쉽게 편집 가능.
상호작용성: 자바스크립트와 CSS를 사용하여 상호작용 및 애니메이션 추가 가능.

SVG 요소와 속성(SVG Elements and Attributes)

SVG는 다양한 도형 요소와 속성을 사용하여 그래픽을 그릴 수 있습니다. 대표적인 SVG 요소는 <svg>, <rect>, <circle>, <ellipse>, <line>, <polygon> 등이 있습니다.

예제: SVG 기본 설정

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>SVG 기본 설정</title>
</head>
<body>
    <h1>SVG 기본 설정</h1>
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        <!-- SVG 콘텐츠는 여기에 삽입 -->
    </svg>
</body>
</html>

기본 도형 그리기(Drawing Basic Shapes): `<rect>`, `<circle>`, `<ellipse>`, `<line>`, `<polygon>`

예제: 사각형 그리기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>사각형 그리기</title>
</head>
<body>
    <h1>사각형 그리기</h1>
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        <rect x="50" y="50" width="150" height="100" fill="red" />
    </svg>
</body>
</html>

예제: 원 그리기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>원 그리기</title>
</head>
<body>
    <h1>원 그리기</h1>
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        <circle cx="200" cy="200" r="50" fill="blue" />
    </svg>
</body>
</html>

예제: 타원 그리기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>타원 그리기</title>
</head>
<body>
    <h1>타원 그리기</h1>
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        <ellipse cx="200" cy="200" rx="100" ry="50" fill="green" />
    </svg>
</body>
</html>

예제: 선 그리기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>선 그리기</title>
</head>
<body>
    <h1>선 그리기</h1>
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        <line x1="50" y1="50" x2="350" y2="350" stroke="black" stroke-width="2" />
    </svg>
</body>
</html>

예제: 다각형 그리기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>다각형 그리기</title>
</head>
<body>
    <h1>다각형 그리기</h1>
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        <polygon points="200,10 250,190 160,210" fill="purple" />
    </svg>
</body>
</html>

SVG를 HTML 문서에 삽입하기(Inserting SVG into HTML Document)

SVG는 여러 가지 방법으로 HTML 문서에 삽입할 수 있습니다.

예제: 인라인 SVG

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인라인 SVG</title>
</head>
<body>
    <h1>인라인 SVG</h1>
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        <rect x="50" y="50" width="150" height="100" fill="red" />
    </svg>
</body>
</html>

예제: <img> 태그를 사용하여 SVG 삽입

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>img 태그를 사용하여 SVG 삽입</title>
</head>
<body>
    <h1>img 태그를 사용하여 SVG 삽입</h1>
    <img src="path_to_svg_image.svg" alt="SVG 이미지" />
</body>
</html>

예제: 배경 이미지로 SVG 사용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>배경 이미지로 SVG 사용</title>
    <style>
        .svg-background {
            width: 400px;
            height: 400px;
            background-image: url('path_to_svg_image.svg');
        }
    </style>
</head>
<body>
    <h1>배경 이미지로 SVG 사용</h1>
    <div class="svg-background"></div>
</body>
</html>

SVG 애니메이션(SVG Animation)

SVG는 애니메이션을 구현하기 위한 다양한 방법을 제공합니다. CSS 애니메이션과 함께 <animate> 요소를 사용하여 SVG 내부에서 직접 애니메이션을 정의할 수 있습니다.

예제: <animate> 요소를 사용한 애니메이션

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>SVG 애니메이션</title>
</head>
<body>
    <h1>SVG 애니메이션</h1>
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        <circle cx="200" cy="200" r="50" fill="blue">
            <animate attributeName="cx" from="50" to="350" dur="5s" repeatCount="indefinite" />
        </circle>
    </svg>
</body>
</html>

예제: CSS를 사용한 SVG 애니메이션

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>CSS를 사용한 SVG 애니메이션</title>
    <style>
        .moving-circle {
            animation: move 5s infinite alternate;
        }

        @keyframes move {
            from {
                cx: 50;
            }
            to {
                cx: 350;
            }
        }
    </style>
</head>
<body>
    <h1>CSS를 사용한 SVG 애니메이션</h1>
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        <circle class="moving-circle" cx="50" cy="200" r="50" fill="blue" />
    </svg>
</body>
</html>

SVG는 HTML5에서 강력한 그래픽 도구로, 해상도에 독립적인 벡터 이미지를 생성하고 조작할 수 있습니다. 다양한 도형을 그리고, 애니메이션을 적용하여 인터랙티브하고 다이나믹한 웹 페이지를 만들 수 있습니다.

Post Views: 60