본문 바로가기

웹언어/HTML5

[HTML기초문법] 16강 SVG태그의 effect와 gradient - 오쌤의 니가스터디

728x90
반응형

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. SVG 태그란?

- SVG태그는 Scalable Vector Graphics의 약자로 벡터 기반 그래픽을 XML 형식으로 정의하는 것을 의미합니다.

- SVG태그는 SVG그래픽을 담기 위한 요소입니다.

- SVG태그 내부에 담을 수 있는 것은 원, 사각형, 다각형, 라인,  path 등이 있습니다. 

- SVG태그는 파일의 모든 요소와 모든 속성에 애니메이션을 적용할 수 있습니다. 

 

 

## SVG태그

<svg width="가로영역" height="세로영역">
	SVG그래픽
    ...
</svg>

- svg는 컨테이너로 묶음을 의미합니다. 내부에 그래픽을 담기 위한 그릇과 같은 태그입니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. SVG Filters

- SVG 필터는 SVG 그래픽에 특수 효과를 추가하는 데 사용됩니다.

 

## 태그

<fe...>

- 뒤에 기능들이 영문으로 붙음

- <feBlend> : 이미지 결합용 필터

- <feColorMatrix> : 색상 변환을 위한 필터

- <feOffset> : 그림자를위한 필터

- <feDistantLight>, <fePointLight>, <feSpotLight> : 조명용 필터

- 많은 필터 태그가 존재합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. SVG Blur Effects

- 벡터 요소를 번지게 처리하는 효과입니다.

- 모든 SVG필터는 <defs>태그 내에 존재합니다. 

- defs는 definition of special elements를 줄임말입니다.

 

 

## 블러효과를 주기 전 벡터 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>SVG 태그</title>
    </head>
    <body>
        <svg width="150" height="150">
            <rect x="10" y="10" width="90" height="90" stroke="green" stroke-width="3" fill="yellow" />
        </svg>
    </body>
</html>

 

 

## 블러효과를 주기 전 결과

 

 

 

## 블러효과를 준 벡터 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>SVG 태그</title>
    </head>
    <body>
        <svg width="150" height="150">
            <defs>
                <filter id="f1" x="0" y="0">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
                </filter>
            </defs>
            <rect x="10" y="10" width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
        </svg>
    </body>
</html>

- <defs>태그 안에 <filter>태그를 처리했습니다. 

- <filter>태그의 아이디를 추후에 벡터태그들에 filter효과의 이름으로 줄수 있습니다.

- <filter>태그의 아이디값을 f1으로 설정했습니다.

- 블러효과는 <feGaussianBlur> 요소로 정의됩니다.

- in="SourceGraphic"부분은 전체 요소에 대해 효과가 생성됨을 정의합니다.

- stdDeviation 속성은 흐림 정도를 정의합니다. 수치가 높을 수록 많이 번집니다.

- <rect>태그에 filter속성으로 <filter>태그의 아이디값을 정의해주면 효과가 들어갑니다.

 

 

 

## 블러효과를 준 결과

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. SVG Drop Shadows

- Drops Shadow는 벡터 요소에 그림자를 주는 효과입니다. 

- 모든 SVG필터는 <defs>태그 내에 존재합니다. 

 

 

## 그림자효과를 주기 전 벡터 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>SVG 태그</title>
    </head>
    <body>
        <svg width="150" height="150">
            <rect x="10" y="10" width="90" height="90" stroke="green" stroke-width="3" fill="yellow" />
        </svg>
    </body>
</html>

 

 

 

## 그림자효과를 주기 전 결과

 

 

 

## <feOffset>으로 그림자 처리한 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>SVG 태그</title>
    </head>
    <body>
        <svg width="150" height="150">
            <defs>
                <filter id="f1" x="0" y="0" width="200%" height="200%">
                    <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
                    <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
                </filter>
            </defs>
            <rect x="10" y="10" width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
        </svg>
    </body>
</html>

- <feOffset> 요소는 그림자 효과를 만드는 데 사용됩니다.

- in="SourceGraphic"은 SVG 그래픽 (이미지 또는 요소)을 가져와서 그림자처리를 한다는 것입니다. 

- dx와 dy속성은 요소에서 이동하는 것입니다.

- <feBlend>는 원본 그래픽을 가져와 오프셋 이미지 위에 원본을 혼합합니다.

 

 

 

## <feOffset>으로 그림자 처리한 결과

 

 

 

## <feGaussianBlur>으로 그림자 번짐처리한 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>SVG 태그</title>
    </head>
    <body>
        <svg width="150" height="150">
            <defs>
                <filter id="f1" x="0" y="0" width="200%" height="200%">
                    <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
                    <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
                    <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
                </filter>
            </defs>
            <rect x="10" y="10" width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
        </svg>
    </body>
</html>

- <feGaussianBlur>태그를 추가하여 <feOffset>과 연결을 위해 in속성을 사용합니다.

- <feGaussianBlur>태그를 추가하여 <feBlend>와 연결을 위해 result속성을 사용합니다.

- <feBlend>의 in2값을 <feGaussianBlur>태그의 result값으로 변경합니다.

- <feGaussianBlur> 요소의 stdDeviation 속성은 흐림 정도를 정의합니다.

 

 

 

 

## <feGaussianBlur>으로 그림자 번짐처리한 결과

 

 

 

 

## 그림자를 검은색으로 변경한 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>SVG 태그</title>
    </head>
    <body>
        <svg width="150" height="150">
            <defs>
                <filter id="f1" x="0" y="0" width="200%" height="200%">
                    <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
                    <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
                    <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
                </filter>
            </defs>
            <rect x="10" y="10" width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
        </svg>
    </body>
</html>

- <feOffset> 요소의 in 속성이 전체 RGBA 픽셀 대신 흐림에 알파 채널을 사용하는 "SourceAlpha"로 변경됩니다.

 

 

 

## 그림자를 검은색으로 변경한 결과

 

 

 

 

## 그림자를 다른 색으로 변경한 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>SVG 태그</title>
    </head>
    <body>
        <svg width="150" height="150">
            <defs>
                <filter id="f1" x="0" y="0" width="200%" height="200%">
                    <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
                    <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
                    <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
                    <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
                </filter>
            </defs>
            <rect x="10" y="10" width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
        </svg>
    </body>
</html>

- <feColorMatrix> 필터는 오프셋 이미지의 색상을 검은 색에 가깝게 변환하는 데 사용됩니다. 행렬에서 '0.2'의 세 가지 값은 모두 빨강, 녹색 및 파랑 채널로 곱해집니다. 값을 줄이면 색상이 검은 색에 가까워집니다 (검정은 0).

- <feOffset>의 in은 다시 SourceGraphic으로 변경합니다.

- <feGaussianBlur>의 in은 <feColorMatrix>의 result값과 같게 처리합니다.

 

 

 

 

 

## 그림자를 다른 색으로 변경한 결과

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5. SVG Linear Gradient 

- 그라디언트는 한 색상에서 다른 색상으로 부드럽게 전환되는 것입니다.

- 두가지 색 이상(여러 색 적용 가능)을 이용하여 입체적 느낌을 줄 수 있습니다.

- <defs> 태그 내에 <linearGradient>태그가 중첩되어야 합니다.

- 색포인트는 <stop>태그로 처리합니다. offset속성은 색포인트가 몇%에 위치하는지 설정합니다.

- 선형 그라디언트의 각도는 좌표를 통해서 처리가 가능합니다.

- 수평적 그라디언트 : y1과 y2가 같고 x1과 x2가 다를 때

- 수직적 그라디언트 : x1과 x2가 같고 y1과 y2가 다를 때

- 대각선 그라디언트 : x1과 x2가 다르고 y1과 y2가 다를 때 

 

 

 

## 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>SVG 태그</title>
    </head>
    <body>
        <svg width="400" height="150">
            <defs>
                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
                    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
                </linearGradient>
            </defs>
            <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
        </svg>
    </body>
</html>

- <linearGradient> 태그의 id 속성은 그라디언트의 고유한 이름을 정의합니다.

- id속성에 작성한 값을 벡터 태그에  fill속성의 값으로 정의해줍니다.

- 위의 예제는 y속성들을 같고, x속성의 위치가 다르므로 수평적 그라디언트입니다.

 

 

 

## 결과

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6. SVG Radial Gradient 

- 그라디언트는 한 색상에서 다른 색상으로 부드럽게 전환되는 것입니다.

- 두가지 색 이상(여러 색 적용 가능)을 이용하여 입체적 느낌을 줄 수 있습니다.

- radial은 원형 혹은 방사형 그라디언트를 의미합니다. 

- <defs> 태그 내에 <radialGradient>태그가 중첩되어야 합니다.

- <radialGradient>태그의 cx, cy 및 r 속성은 가장 바깥 쪽 원을 정의하고 fx 및 fy는 가장 안쪽 원을 정의합니다.

- 색포인트는 <stop>태그로 처리합니다. offset속성은 색포인트가 몇%에 위치하는지 설정합니다.

 

 

 

 

## 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>SVG 태그</title>
    </head>
    <body>
        <svg width="500" height="150">
            <defs>
                <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                    <stop offset="0%" style="stop-color:rgb(255,255,255);
                    stop-opacity:0" />
                    <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
                </radialGradient>
            </defs>
            <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
        </svg>
    </body>
</html>

- <radialGradient> 태그의 id 속성은 그라디언트의 고유한 이름을 정의합니다.

- 벡터 요소의 fill값으로 id값을 입력합니다.

- 그라디언트의 색상 범위는 둘 이상의 색상으로 구성 될 수 있습니다. 각 색상은 <stop> 태그로 지정됩니다. offset 속성은 그라디언트 색상이 시작되고 끝나는 위치를 정의하는 데 사용됩니다.

 

 

 

## 결과

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형