[CSS] SVG

나는경서·2021년 11월 9일

SVG란?

Scalable Vector Graphics
→ 확장 가능한 벡터 그래픽이다. 2차원 기반을 설명하기 위한 XML 기반 마크업 언어이며 HTML 태그의 집합으로 이루어져 있다. 즉, css와 javascript로 컨트롤이 가능하다.

장점

모든 크기에서 깔끔하게 렌더링 될 수 있다.
다른 웹 표준과 잘 작동하도록 특별히 설계된 이미지를 설명하기 위한 텍스트 기반의 개방형 웹 표준이다.
아무리 확대를 해도 이미지가 깨지지 않는다.
이미지의 크기를 키워도 용량이 늘어나지 않는다.
이미지 최적화가 가능하다.

단점

코드로 이루어진 이미지이기 때문에 복잡한 이미지일수록 파일 사이즈가 커진다.
따라서 단순한 아이콘, 로고, 도형 등을 구현할 때 많이 사용한다.

HTML에 SVG 적용하는 방법

1. img 태그로 사용하기
src="" 속성값으로 svg 파일을 연결한다.

<img src="frog.svg" alt="">

2. css background로 사용하기
background-image 속성값으로 svg 파일을 연결한다.

.cont-svg {
    width: 100vw;
    height: 100vh;
    background: url("frog.svg") no-repeat 0 0;
    background-size: contain;
}

3. 인라인으로 구현하기

나는 인라인으로만 구현해보았다.

  <style>
        @keyframes blink {
        to {
            transform: scaleY(1);
            }       
        }
        .위하트 {
        animation-duration: 0.5s;
        animation-name: blink;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        }
        .위하트 {
            fill:plum;
            transform: skew(-10deg); 
            transform: scale(1.1); 
        }
        .아래하트 {
            fill: purple;
        }
        .물방울1 {
            fill:skyblue;
        }
        .오른눈 {
            transform: scale(1.1); 
            fill: brown;
        }
        .왼눈 {           
             transform: scale(1.1); 
            fill: brown;
        }
        .코 {
            transform: scale(1.25) translate(-80px, -300px); 
            fill: brown;
        }
        .몸통 {
            fill: saddlebrown;
        }
    </style>

PNG 파일을 SVG 파일로 변경한 후, 코드를 수정하였다.

결과

정말 별거 없지만 .. 하트가 움직이는 쿼카를 만들었다 ~ ⭐️

gray씨 꾸며주자 ✨

    .container {
        position: absolute;
        margin-top: 10%;
        margin-left: 50%;
        transform: translateX(-50%);
    }
     .안경 .left {
        position: absolute;
        width: 25px;
        height: 10px;
        background: burlywood;
        border-radius: 10px;
        top: 70px;
        left: 40px;
        transform: rotate(20deg);
     }
     .안경 .right {
        position: absolute;
        width: 30px;
        height: 10px;
        background: burlywood;
        top: 70px;
        left: 210px;
        transform: rotate(-20deg);
        border-radius: 10px;         
        }
    .안경 .center {
        position: absolute;
        top: 80px;
        left: 130px;
        width: 20px;
        height: 20px;
        background-color: burlywood;
    }
    .왼쪽눈 {
        fill: burlywood;
    }
    .오른쪽눈 {
        fill: burlywood;
    }
    .몸통 {
        fill: green;
    }
    </style>

안경테는 개리씨가 이동해도 개리씨 눈에 꼭 붙어있어야 하므로 position: absolute; 을 주고 top,left 로 위치이동시켰다.

테는 수직이 아니라 기울어져 야하므로 transform: rotate(20deg); 로 회전시켰다. 오른쪽은 반시계 방향이므로 -20deg!!

border-radius 로 안경테 끝 부분을 둥글게 깍아주는 디테일 ✨

<fill>이라는 태그로도 색을 줄 수 있다는 걸 알았다.