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

SVG(Scalable Vector Graphics)는 벡터 기반의 이미지를 정의하는 XML 기반의 포맷으로, CSS와 함께 사용하여 다양한 그래픽 디자인을 구현할 수 있습니다. 이 블로그 포스팅에서는 SVG의 기본 개념부터 시작하여 CSS를 활용한 다양한 예제를 제공하여 초보자도 쉽게 이해할 수 있도록 설명하겠습니다.

1. SVG의 기본 구조 이해하기:
SVG는 XML 형식으로 작성되며, 간단한 원, 사각형부터 복잡한 경로 등을 표현할 수 있습니다. 예제를 통해 SVG의 기본 구조를 살펴보겠습니다.

SVG 삽입하기
- SVG를 HTML에 직접 삽입하는 예제입니다

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

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

 

SVG 파일 불러오기

- 외부 SVG 파일을 불러와 사용하는 예제입니다

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

 

- 혹은 CSS의 background-image 속성을 사용하여 불러올 수도 있습니다:

.element {
  background-image: url('image.svg');
}

 

2. SVG에 CSS 스타일 적용하기:
SVG에 CSS를 사용하여 스타일을 적용할 수 있습니다. 아래 예제는 SVG 원에 CSS 스타일을 적용하는 방법을 보여줍니다.

<svg width="100" 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 내부의 원에 색상을 적용하는 예제입니다:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

circle {
  fill: blue; /* 내부 채우기 색상을 파란색으로 변경 */
  stroke: black; /* 테두리 색상을 검정색으로 변경 */
}

호버 효과
- 마우스를 올렸을 때 색상이 변하는 호버 효과를 적용하는 예제입니다:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

circle:hover {
  fill: orange;
}

 

3. SVG 그래픽 요소 조합하기:
여러 SVG 그래픽 요소를 조합하여 복잡한 디자인을 만들 수 있습니다. 다음 예제는 원과 사각형을 조합하여 간단한 도형을 만드는 방법을 보여줍니다.

<svg width="200" height="100">
  <circle cx="50" cy="50" r="40" fill="green" />
  <rect x="100" y="10" width="80" height="80" fill="orange" />
</svg>

 

4. SVG 그래픽에 애니메이션 추가하기:
SVG에 CSS를 활용하여 애니메이션을 추가할 수 있습니다. 아래 예제는 원이 좌우로 움직이는 애니메이션을 구현한 것입니다.

<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로 지속 시간을 설정합니다.

- CSS 애니메이션을 사용하여 SVG 요소를 애니메이션화하는 예제입니다:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

circle {
  animation: spin 2s linear infinite;
}

 

- SVG 아이콘을 사용하여 링크를 만드는 예제입니다

<a href="https://github.com" class="social-link">
  <svg class="social-icon" xmlns="http://www.w3.org/2000/svg" ...>
    <!-- 아이콘 SVG 코드 -->
  </svg>
</a>

<a href="https://github.com" class="social-link">
  <svg class="social-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <title>GitHub icon</title>
    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.755-1.333-1.755-1.09-.745.083-.73.083-.73 1.205.085 1.84 1.237 1.84 1.237 1.07 1.835 2.807 1.305 3.492.998.108-.776.42-1.305.763-1.605-2.665-.3-5.467-1.332-5.467-5.93 0-1.31.468-2.38 1.235-3.22-.123-.303-.536-1.524.117-3.176 0 0 1.005-.322 3.3 1.23.957-.267 1.983-.4 3.003-.405 1.02.005 2.047.138 3.005.405 2.292-1.552 3.297-1.23 3.297-1.23.655 1.652.242 2.873.12 3.176.77.84 1.232 1.91 1.232 3.22 0 4.61-2.805 5.625-5.475 5.92.432.372.817 1.103.817 2.222 0 1.605-.014 2.898-.014 3.292 0 .32.217.694.825.577C20.565 21.795 24 17.295 24 12c0-6.63-5.37-12-12-12z"/>
  </svg>
</a>

.social-link {
  display: inline-block;
  margin: 10px;
  transition: transform 0.3s ease;
}

.social-link:hover {
  transform: scale(1.1); /* 호버 시 아이콘 확대 */
}

.social-icon {
  fill: #1DA1F2; /* Twitter 브랜드 색상 */
  width: 30px;
  height: 30px;
}

 

SVG를 활용하여 다양한 그래픽 디자인을 구현할 수 있습니다. 위 예제들을 통해 SVG의 기본 개념, 스타일 적용, 그래픽 요소 조합, 애니메이션 추가에 대한 기초를 익힐 수 있습니다.