CSS에서 SVG를 사용한 그래픽 디자인

HTML&CSS

by 코드공작소 2023. 12. 23. 09:54

SVG(Scalable Vector Graphics)는 XML 기반의 벡터 그래픽 포맷으로, 해상도에 상관없이 확대 또는 축소해도 깨지지 않는 이미지를 만들 수 있습니다. SVG는 텍스트 기반으로 작성되며, CSS와 함께 사용하여 스타일링할 수 있습니다.
SVG(Scalable Vector Graphics)를 이용하여 웹페이지에 동적이고 아름다운 그래픽을 추가하는 방법을 알아봅시다. 이 블로그 포스팅에서는 초보자도 쉽게 따라 할 수 있는 다양한 SVG 예제를 제공하고, 각 예제에 대한 세부적인 설명을 포함할 것입니다.

1. SVG 파일 삽입하기
SVG 파일을 웹페이지에 삽입하기 위해서는 <img> 태그나 CSS의 background-image 속성을 사용할 수 있습니다. 예를 들어, 다음과 같이 <img> 태그를 사용하여 SVG 파일을 삽입할 수 있습니다:

<img src="image.svg" alt="SVG 이미지">

2. SVG의 기본 구조 이해하기
SVG는 XML 형식으로 작성되며, 간단한 원, 사각형부터 복잡한 경로까지 다양한 그래픽 요소를 표현할 수 있습니다. SVG 문서의 기본 구조를 살펴보고 시작해봅시다.

<svg width="200" height="100">
  <circle cx="50" cy="50" r="40" fill="lightblue" />
</svg>

<svg> 태그는 SVG 문서의 시작을 나타냅니다.
width와 height 속성은 SVG 영역의 너비와 높이를 지정합니다.
<circle> 태그는 원을 그리는데 사용되며, cx, cy, r은 각각 원의 중심 x좌표, y좌표, 반지름을 나타냅니다.
fill 속성은 원의 색상을 지정합니다.

3. 다양한 그래픽 요소 조합하기
SVG를 사용하여 여러 그래픽 요소를 조합하여 더 복잡한 디자인을 만들어봅시다.

<svg width="300" height="150">
  <rect x="50" y="20" width="200" height="100" fill="orange" />
  <circle cx="150" cy="70" r="40" fill="green" />
</svg>

<rect> 태그는 사각형을 그리는데 사용되며, x, y, width, height는 위치와 크기를 지정합니다.
<circle> 태그는 앞서 소개한 원 그리기와 같은 방식으로 사용됩니다.

4. SVG에 CSS 스타일 적용하기
SVG 그래픽에 CSS를 활용하여 스타일을 추가해봅시다.

<svg width="200" height="100">
  <circle cx="50" cy="50" r="40" class="custom-circle" />
</svg>

<style>
  .custom-circle {
    fill: skyblue;
    stroke: navy;
    stroke-width: 3;
  }
</style>

.custom-circle 클래스를 만들어 SVG 요소에 적용합니다.
fill은 원의 색상을, stroke는 테두리의 색상을, stroke-width는 테두리의 두께를 지정합니다.

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="blue" stroke="black" stroke-width="2" />
</svg>

5. SVG에 애니메이션 추가하기
CSS를 사용하여 SVG에 애니메이션 효과를 적용할 수 있습니다. @keyframes 규칙과 animation 속성을 사용하여 움직이는 그래픽을 만들 수 있습니다. SVG 그래픽에 애니메이션을 적용하여 더 생동감 있게 만들어봅시다.

<svg width="200" height="100">
  <circle cx="50" cy="50" r="40" fill="purple">
    <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

<animate> 태그를 사용하여 cx 속성을 애니메이션화하고, from, to로 시작과 끝 값을, dur로 지속 시간을 설정합니다.

6. SVG 그래픽을 사용한 예제
아래는 CSS와 SVG를 결합하여 만든 예제입니다. 이 예제는 SVG를 사용하여 그래픽 요소를 그리고, CSS로 스타일을 적용하고 애니메이션을 추가한 것입니다. 이 예제를 통해 CSS에서 SVG를 사용한 그래픽 디자인에 대한 아이디어를 얻을 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 200px;
  height: 200px;
  background-color: lightgray;
}

.square {
  width: 100px;
  height: 100px;
  fill: blue;
  transition: fill 0.5s;
}

.square:hover {
  fill: red;
}

.circle {
  cx: 100;
  cy: 100;
  r: 50;
  fill: green;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
  <svg width="100%" height="100%">
    <rect class="square" x="50" y="50" />
    <circle class="circle" />
  </svg>
</div>
</body>
</html>

위의 예제는 .container 클래스로 지정된 요소 내에 SVG를 삽입하고, .square 클래스로 지정된 사각형과 .circle 클래스로 지정된 원에 스타일과 애니메이션을 적용한 것입니다.
마우스를 사각형 위로 올리면 사각형의 색상이 변경되고, 원은 회전 애니메이션을 수행합니다.
이렇게 CSS와 SVG를 결합하여 그래픽 디자인을 할 수 있습니다. SVG는 벡터 그래픽 포맷이므로 다양한 디바이스와 해상도에 대응할 수 있고, CSS를 사용하여 스타일과 애니메이션을 적용할 수 있어 다양한 효과를 구현할 수 있습니다.

저작자표시

'HTML&CSS' 카테고리의 다른 글

CSS Blend Mode를 활용한 이미지 효과(background-blend-mode) (0)	2023.12.26
CSS 그리드 시스템 구현하기: Float vs. Grid (0)	2023.12.26
CSS 박스 모델 이해하기: Content, Padding, Border, Margin (0)	2023.12.22
CSS에서 SVG를 사용한 그래픽 디자인 (1)	2023.12.21
Flexbox와 Grid를 조합하여 복잡한 웹 레이아웃 구성하기 (2)	2023.12.21