19. SVG

SVG란?SVG의 장점 SVG의 단점 HTML에 SVG를 적용하는 여러가지 방법들 1. img 태그로 사용하기 2. css background로 사용하기 3. 인라인으로 구현하기 SVG 이미지 최적화 SVG를 CSS로 컨트롤 해보기 < 윙크하는 개구리 >전체 코드

SVG란?

확장 가능한 벡터 그래픽(scalable vector graphics)으로 XML 기반의 2차원 그래픽입니다. HTML 태그의 집합으로 이루어져 있습니다. 즉, css와 javascript로 컨트롤이 가능합니다.

SVG의 장점

아무리 확대를 해도 이미지가 깨지지 않습니다. 또한, 이미지의 크기를 키워도 용량이 늘어나지 않습니다.

SVG의 단점

코드로 이루어진 이미지이기 때문에 복잡한 이미지일수록 파일 사이즈가 커집니다. 단순한 모양일수록 효율이 좋습니다. 복잡한 이미지를 굳이 SVG로 표현하고자 하면 오히려 용량이 너무 거대해져 역효과가 날 수 있습니다. 그렇기 때문에 주로 단순한 아이콘, 로고, 도형 등을 구현할 때 많이 사용합니다.

** 사용해볼 실습 파일입니다. **

frog.svg.zip

2.3KB

HTML에 SVG를 적용하는 여러가지 방법들

기존에 가지고 있던 이미지를 아래와 같은 사이트에서 svg로 변환이 가능합니다.

PNG SVG 변환 (온라인 무료) - Convertio

PNG ● 수축은 무손실 압축 알고리즘을 사용 래스터 그래픽 데이터 저장 포맷이다. PNG는 GIF를 대체하는 자유 형식으로 작성되었습니다. 그레이 스케일 이미지, 컬러 인덱스 이미지와 컬러 이미지 : PNG는 래스터 이미지의 세 가지 주요 유형을 지원합니다. PNG 형식으로 저장 압축 된 형태의 그래픽 정보를 제공합니다.

https://convertio.co/kr/png-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. 인라인으로 구현하기

svg 파일의 코드를 그대로 html 코드 안에서 사용합니다.


<svg width="624" height="465" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
            d="m446.529 308.502 79.386-37.479c-37.824-34.863-111.48-58.521-196.146-58.521-123.264 0-223.191 50.142-223.191 112.002 0 61.857 99.927 112.002 223.191 112.002 94.674 0 175.575-29.586 208.011-71.334l-91.251-56.67Z"
            fill="#00A249" />
        <path
            d="m446.529 308.502 79.386-37.479c-37.824-34.863-111.48-58.521-196.146-58.521-123.264 0-223.191 50.142-223.191 112.002 0 61.857 99.927 112.002 223.191 112.002 94.674 0 175.575-29.586 208.011-71.334l-91.251-56.67Z"
            stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M427.656 312.627c1.5-16.5-15.081-29.259-34.239-28.641-3.018-7.002-16.917-33.714-20.511-40.359l-57.876-1.365-57.876 1.365c-3.594 6.645-17.493 33.357-20.511 40.359-19.155-.618-35.739 12.141-34.239 28.641 2.091 22.977 11.352 19.851 29.001 28.5-10.416 4.188-26.001 11.499-26.001 11.499l23.499 1.5-3.6 10.917s48.228-24.042 69.6-24.417c6.678-.12 14.595-.759 20.127-1.287 5.535.528 13.452 1.167 20.127 1.287 21.372.375 69.6 24.417 69.6 24.417l-3.6-10.917 23.499-1.5s-15.582-7.311-26.001-11.499c17.652-8.649 26.913-5.523 29.001-28.5"
            fill="#89C140" />
        <path
            d="M427.656 312.627c1.5-16.5-15.081-29.259-34.239-28.641-3.018-7.002-16.917-33.714-20.511-40.359l-57.876-1.365-57.876 1.365c-3.594 6.645-17.493 33.357-20.511 40.359-19.155-.618-35.739 12.141-34.239 28.641 2.091 22.977 11.352 19.851 29.001 28.5-10.416 4.188-26.001 11.499-26.001 11.499l23.499 1.5-3.6 10.917s48.228-24.042 69.6-24.417c6.678-.12 14.595-.759 20.127-1.287 5.535.528 13.452 1.167 20.127 1.287 21.372.375 69.6 24.417 69.6 24.417l-3.6-10.917 23.499-1.5s-15.582-7.311-26.001-11.499c17.652-8.649 26.913-5.523 29.001-28.5v0Z"
            stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M178.524 135.165c-1.785-20.466 10.644-46.113 54.507-48.666 29.568-1.722 41.121 15.627 47.496 31.002l20.502-1.002c3.669-19.797 19.497-38.874 60.372-36.624 29.592 1.629 39.051 26.535 42.123 39.126 3.591 14.7 2.502 20.499 6.252 28.749 4.725 10.398 30.009 13.749 25.755 55.749-7.821 77.217-249.189 72.888-270.255 23.001-14.25-33.75 6.753-49.5 14.253-59.25l-1.005-32.085Z"
            fill="#8FC23F" />
        <path
            d="M178.524 135.165c-1.785-20.466 10.644-46.113 54.507-48.666 29.568-1.722 41.121 15.627 47.496 31.002l20.502-1.002c3.669-19.797 19.497-38.874 60.372-36.624 29.592 1.629 39.051 26.535 42.123 39.126 3.591 14.7 2.502 20.499 6.252 28.749 4.725 10.398 30.009 13.749 25.755 55.749-7.821 77.217-249.189 72.888-270.255 23.001-14.25-33.75 6.753-49.5 14.253-59.25l-1.005-32.085Z"
            stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M270.528 291c10.404-10.239 30.216-15.207 44.25-15 19.386.279 42.096 6.012 53.394 22.404 9.006 13.071-12.129 39.6-24.057 40.347-18.759 1.167-37.395 2.637-56.139 3.582-11.889.597-27.174-41.76-17.448-51.333Z"
            fill="#FFFFFE" />
        <path
            d="M270.528 291c10.404-10.239 30.216-15.207 44.25-15 19.386.279 42.096 6.012 53.394 22.404 9.006 13.071-12.129 39.6-24.057 40.347-18.759 1.167-37.395 2.637-56.139 3.582-11.889.597-27.174-41.76-17.448-51.333Z"
            stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M373.41 179.388c.219 7.863-32.733 25.458-73.881 26.613-41.139 1.155-74.886-14.568-75.108-22.434-.219-7.863 148.767-12.042 148.989-4.179"
            fill="#E88194" />
        <path
            d="M373.41 179.388c.219 7.863-32.733 25.458-73.881 26.613-41.139 1.155-74.886-14.568-75.108-22.434-.219-7.863 148.767-12.042 148.989-4.179v0Z"
            stroke="#1A1919" stroke-width="7.425" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M213.528 195.375c0 8.49-7.218 15.375-16.125 15.375s-16.125-6.885-16.125-15.375c0-8.493 7.218-15.375 16.125-15.375s16.125 6.882 16.125 15.375Zm205.5-7.5c0 8.49-7.218 15.375-16.125 15.375-8.904 0-16.125-6.885-16.125-15.375 0-8.493 7.221-15.375 16.125-15.375 8.907 0 16.125 6.882 16.125 15.375Z"
            fill="#E88194" />
        <path
            d="M428.892 37.503c0 8.88-5.76 16.077-12.861 16.077-7.104 0-12.864-7.197-12.864-16.077 0-8.88 13.398-31.086 13.398-31.086s12.327 22.206 12.327 31.086"
            fill="#C9E8F2" />
        <path
            d="M428.892 37.503c0 8.88-5.76 16.077-12.861 16.077-7.104 0-12.864-7.197-12.864-16.077 0-8.88 13.398-31.086 13.398-31.086s12.327 22.206 12.327 31.086v0Z"
            stroke="#1A1919" stroke-width="7.074" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M518.526 189.084c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083"
            fill="#C9E8F2" />
        <path
            d="M518.526 189.084c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083v0Z"
            stroke="#1A1919" stroke-width="7.074" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M116.526 167.085c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083"
            fill="#C9E8F2" />
        <path
            d="M116.526 167.085c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083v0Z"
            stroke="#1A1919" stroke-width="7.074" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M529.278 289.875C515.403 306 530.529 324.501 552.528 324" stroke="#1A1919" stroke-width="5.844"
            stroke-linecap="round" stroke-linejoin="round" />
        <path d="M609.528 283.002c16.125 6.498 9.999 20.964 3.999 25.998" stroke="#1A1919" stroke-width="6.48"
            stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M581.421 283.671c7.503 1.605 12.891 5.862 13.089 11.058.171 4.5-2.232 10.146-9.381 11.025m-22.098 4.245c-9.375.375-15.096-5.766-15.378-11.124-.375-7.125 4.284-12.237 11.406-14.463l3.972 25.587Z"
            stroke="#1A1919" stroke-width="6.309" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M506.028 36v108m63.501 150.501V120v174.501Z" stroke="#1A1919" stroke-width="6.48"
            stroke-linecap="round" stroke-linejoin="round" />
        <path d="M573.03 324.999c9.378-.018 16.419-.681 24.501-5.499" stroke="#1A1919" stroke-width="5.844"
            stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="m442.77 254.502-28.002 18.999m-233.997-3.999L208.77 280.5l-27.999-10.998Zm-38.001 48h39.999-39.999Zm99.999 60.999-25.998 23.001 25.998-23.001Zm81 3 6.999 39-6.999-39Zm77.001 0 33.999 24-33.999-24Z"
            stroke="#1A1919" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M254 136c0 16.016-13.208 29-29.5 29S195 152.016 195 136s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
            fill="#fff" />
        <path d="M254 136c0 16.016-13.208 29-29.5 29S195 152.016 195 136s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
            stroke="#000" />
        <ellipse cx="224.5" cy="136" rx="12.5" ry="12" fill="#000" />
        <path d="M383 129c0 16.016-13.208 29-29.5 29S324 145.016 324 129s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
            fill="#fff" />
        <path d="M383 129c0 16.016-13.208 29-29.5 29S324 145.016 324 129s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
            stroke="#000" />
        <ellipse class="eye-right" cx="353.5" cy="129" rx="12.5" ry="12" fill="#000" />
    </svg>

SVG 이미지 최적화

svg 안의 코드를 최대한 압축하여 용량을 가볍게 만들 수 있습니다.

https://jakearchibald.github.io/svgomg/

하단에 얼마나 용량이 줄어드는지 보여줍니다.

SVG를 CSS로 컨트롤 해보기 < 윙크하는 개구리 >


<body>
    <svg width="624" height="465" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
            d="m446.529 308.502 79.386-37.479c-37.824-34.863-111.48-58.521-196.146-58.521-123.264 0-223.191 50.142-223.191 112.002 0 61.857 99.927 112.002 223.191 112.002 94.674 0 175.575-29.586 208.011-71.334l-91.251-56.67Z"
            fill="#00A249" />
        <path
            d="m446.529 308.502 79.386-37.479c-37.824-34.863-111.48-58.521-196.146-58.521-123.264 0-223.191 50.142-223.191 112.002 0 61.857 99.927 112.002 223.191 112.002 94.674 0 175.575-29.586 208.011-71.334l-91.251-56.67Z"
            stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M427.656 312.627c1.5-16.5-15.081-29.259-34.239-28.641-3.018-7.002-16.917-33.714-20.511-40.359l-57.876-1.365-57.876 1.365c-3.594 6.645-17.493 33.357-20.511 40.359-19.155-.618-35.739 12.141-34.239 28.641 2.091 22.977 11.352 19.851 29.001 28.5-10.416 4.188-26.001 11.499-26.001 11.499l23.499 1.5-3.6 10.917s48.228-24.042 69.6-24.417c6.678-.12 14.595-.759 20.127-1.287 5.535.528 13.452 1.167 20.127 1.287 21.372.375 69.6 24.417 69.6 24.417l-3.6-10.917 23.499-1.5s-15.582-7.311-26.001-11.499c17.652-8.649 26.913-5.523 29.001-28.5"
            fill="#89C140" />
        <path
            d="M427.656 312.627c1.5-16.5-15.081-29.259-34.239-28.641-3.018-7.002-16.917-33.714-20.511-40.359l-57.876-1.365-57.876 1.365c-3.594 6.645-17.493 33.357-20.511 40.359-19.155-.618-35.739 12.141-34.239 28.641 2.091 22.977 11.352 19.851 29.001 28.5-10.416 4.188-26.001 11.499-26.001 11.499l23.499 1.5-3.6 10.917s48.228-24.042 69.6-24.417c6.678-.12 14.595-.759 20.127-1.287 5.535.528 13.452 1.167 20.127 1.287 21.372.375 69.6 24.417 69.6 24.417l-3.6-10.917 23.499-1.5s-15.582-7.311-26.001-11.499c17.652-8.649 26.913-5.523 29.001-28.5v0Z"
            stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M178.524 135.165c-1.785-20.466 10.644-46.113 54.507-48.666 29.568-1.722 41.121 15.627 47.496 31.002l20.502-1.002c3.669-19.797 19.497-38.874 60.372-36.624 29.592 1.629 39.051 26.535 42.123 39.126 3.591 14.7 2.502 20.499 6.252 28.749 4.725 10.398 30.009 13.749 25.755 55.749-7.821 77.217-249.189 72.888-270.255 23.001-14.25-33.75 6.753-49.5 14.253-59.25l-1.005-32.085Z"
            fill="#8FC23F" />
        <path
            d="M178.524 135.165c-1.785-20.466 10.644-46.113 54.507-48.666 29.568-1.722 41.121 15.627 47.496 31.002l20.502-1.002c3.669-19.797 19.497-38.874 60.372-36.624 29.592 1.629 39.051 26.535 42.123 39.126 3.591 14.7 2.502 20.499 6.252 28.749 4.725 10.398 30.009 13.749 25.755 55.749-7.821 77.217-249.189 72.888-270.255 23.001-14.25-33.75 6.753-49.5 14.253-59.25l-1.005-32.085Z"
            stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M270.528 291c10.404-10.239 30.216-15.207 44.25-15 19.386.279 42.096 6.012 53.394 22.404 9.006 13.071-12.129 39.6-24.057 40.347-18.759 1.167-37.395 2.637-56.139 3.582-11.889.597-27.174-41.76-17.448-51.333Z"
            fill="#FFFFFE" />
        <path
            d="M270.528 291c10.404-10.239 30.216-15.207 44.25-15 19.386.279 42.096 6.012 53.394 22.404 9.006 13.071-12.129 39.6-24.057 40.347-18.759 1.167-37.395 2.637-56.139 3.582-11.889.597-27.174-41.76-17.448-51.333Z"
            stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M373.41 179.388c.219 7.863-32.733 25.458-73.881 26.613-41.139 1.155-74.886-14.568-75.108-22.434-.219-7.863 148.767-12.042 148.989-4.179"
            fill="#E88194" />
        <path
            d="M373.41 179.388c.219 7.863-32.733 25.458-73.881 26.613-41.139 1.155-74.886-14.568-75.108-22.434-.219-7.863 148.767-12.042 148.989-4.179v0Z"
            stroke="#1A1919" stroke-width="7.425" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M213.528 195.375c0 8.49-7.218 15.375-16.125 15.375s-16.125-6.885-16.125-15.375c0-8.493 7.218-15.375 16.125-15.375s16.125 6.882 16.125 15.375Zm205.5-7.5c0 8.49-7.218 15.375-16.125 15.375-8.904 0-16.125-6.885-16.125-15.375 0-8.493 7.221-15.375 16.125-15.375 8.907 0 16.125 6.882 16.125 15.375Z"
            fill="#E88194" />
        <path
            d="M428.892 37.503c0 8.88-5.76 16.077-12.861 16.077-7.104 0-12.864-7.197-12.864-16.077 0-8.88 13.398-31.086 13.398-31.086s12.327 22.206 12.327 31.086"
            fill="#C9E8F2" />
        <path
            d="M428.892 37.503c0 8.88-5.76 16.077-12.861 16.077-7.104 0-12.864-7.197-12.864-16.077 0-8.88 13.398-31.086 13.398-31.086s12.327 22.206 12.327 31.086v0Z"
            stroke="#1A1919" stroke-width="7.074" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M518.526 189.084c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083"
            fill="#C9E8F2" />
        <path
            d="M518.526 189.084c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083v0Z"
            stroke="#1A1919" stroke-width="7.074" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M116.526 167.085c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083"
            fill="#C9E8F2" />
        <path
            d="M116.526 167.085c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083v0Z"
            stroke="#1A1919" stroke-width="7.074" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M529.278 289.875C515.403 306 530.529 324.501 552.528 324" stroke="#1A1919" stroke-width="5.844"
            stroke-linecap="round" stroke-linejoin="round" />
        <path d="M609.528 283.002c16.125 6.498 9.999 20.964 3.999 25.998" stroke="#1A1919" stroke-width="6.48"
            stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M581.421 283.671c7.503 1.605 12.891 5.862 13.089 11.058.171 4.5-2.232 10.146-9.381 11.025m-22.098 4.245c-9.375.375-15.096-5.766-15.378-11.124-.375-7.125 4.284-12.237 11.406-14.463l3.972 25.587Z"
            stroke="#1A1919" stroke-width="6.309" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M506.028 36v108m63.501 150.501V120v174.501Z" stroke="#1A1919" stroke-width="6.48"
            stroke-linecap="round" stroke-linejoin="round" />
        <path d="M573.03 324.999c9.378-.018 16.419-.681 24.501-5.499" stroke="#1A1919" stroke-width="5.844"
            stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="m442.77 254.502-28.002 18.999m-233.997-3.999L208.77 280.5l-27.999-10.998Zm-38.001 48h39.999-39.999Zm99.999 60.999-25.998 23.001 25.998-23.001Zm81 3 6.999 39-6.999-39Zm77.001 0 33.999 24-33.999-24Z"
            stroke="#1A1919" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M254 136c0 16.016-13.208 29-29.5 29S195 152.016 195 136s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
            fill="#fff" />
        <path d="M254 136c0 16.016-13.208 29-29.5 29S195 152.016 195 136s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
            stroke="#000" />
        <ellipse cx="224.5" cy="136" rx="12.5" ry="12" fill="#000" />
        <path d="M383 129c0 16.016-13.208 29-29.5 29S324 145.016 324 129s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
            fill="#fff" />
        <path d="M383 129c0 16.016-13.208 29-29.5 29S324 145.016 324 129s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
            stroke="#000" />
        <ellipse class="eye-right" cx="353.5" cy="129" rx="12.5" ry="12" fill="#000" />
    </svg>
</body>



/** 적용 순서 **/
/* 1. 오른쪽 눈을 그리는 ellipses 요소에 class="eye-right" 클래스를 추가합니다. */
/* 2. 클래스에 애니메이션 속성을 작성해줍니다. */
/* 이때 transform-origin 으로 중심축을 설정해야합니다. 좌표는 ellipses 요소안의 cx="353.5" cy="129" 입니다. */

.eye-right {
    animation-duration: 0.5s;
    animation-name: blink;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    transform-origin: 353.5px 129px;
}

@keyframes blink {
    to {
        transform: scaleY(0.1);
    }
}

전체 코드


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>svg</title>
    <style>
        .eye-right {
            animation-duration: 0.5s;
            animation-name: blink;
            animation-direction: alternate;
            animation-iteration-count: infinite;
            transform-origin: 353.5px 129px;
        }

        @keyframes blink {
            to {
                transform: scaleY(0.1);
            }
        }
    </style>
</head>
<body>
    <svg width="624" height="465" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
            d="m446.529 308.502 79.386-37.479c-37.824-34.863-111.48-58.521-196.146-58.521-123.264 0-223.191 50.142-223.191 112.002 0 61.857 99.927 112.002 223.191 112.002 94.674 0 175.575-29.586 208.011-71.334l-91.251-56.67Z"
            fill="#00A249" />
        <path
            d="m446.529 308.502 79.386-37.479c-37.824-34.863-111.48-58.521-196.146-58.521-123.264 0-223.191 50.142-223.191 112.002 0 61.857 99.927 112.002 223.191 112.002 94.674 0 175.575-29.586 208.011-71.334l-91.251-56.67Z"
            stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M427.656 312.627c1.5-16.5-15.081-29.259-34.239-28.641-3.018-7.002-16.917-33.714-20.511-40.359l-57.876-1.365-57.876 1.365c-3.594 6.645-17.493 33.357-20.511 40.359-19.155-.618-35.739 12.141-34.239 28.641 2.091 22.977 11.352 19.851 29.001 28.5-10.416 4.188-26.001 11.499-26.001 11.499l23.499 1.5-3.6 10.917s48.228-24.042 69.6-24.417c6.678-.12 14.595-.759 20.127-1.287 5.535.528 13.452 1.167 20.127 1.287 21.372.375 69.6 24.417 69.6 24.417l-3.6-10.917 23.499-1.5s-15.582-7.311-26.001-11.499c17.652-8.649 26.913-5.523 29.001-28.5"
            fill="#89C140" />
        <path
            d="M427.656 312.627c1.5-16.5-15.081-29.259-34.239-28.641-3.018-7.002-16.917-33.714-20.511-40.359l-57.876-1.365-57.876 1.365c-3.594 6.645-17.493 33.357-20.511 40.359-19.155-.618-35.739 12.141-34.239 28.641 2.091 22.977 11.352 19.851 29.001 28.5-10.416 4.188-26.001 11.499-26.001 11.499l23.499 1.5-3.6 10.917s48.228-24.042 69.6-24.417c6.678-.12 14.595-.759 20.127-1.287 5.535.528 13.452 1.167 20.127 1.287 21.372.375 69.6 24.417 69.6 24.417l-3.6-10.917 23.499-1.5s-15.582-7.311-26.001-11.499c17.652-8.649 26.913-5.523 29.001-28.5v0Z"
            stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M178.524 135.165c-1.785-20.466 10.644-46.113 54.507-48.666 29.568-1.722 41.121 15.627 47.496 31.002l20.502-1.002c3.669-19.797 19.497-38.874 60.372-36.624 29.592 1.629 39.051 26.535 42.123 39.126 3.591 14.7 2.502 20.499 6.252 28.749 4.725 10.398 30.009 13.749 25.755 55.749-7.821 77.217-249.189 72.888-270.255 23.001-14.25-33.75 6.753-49.5 14.253-59.25l-1.005-32.085Z"
            fill="#8FC23F" />
        <path
            d="M178.524 135.165c-1.785-20.466 10.644-46.113 54.507-48.666 29.568-1.722 41.121 15.627 47.496 31.002l20.502-1.002c3.669-19.797 19.497-38.874 60.372-36.624 29.592 1.629 39.051 26.535 42.123 39.126 3.591 14.7 2.502 20.499 6.252 28.749 4.725 10.398 30.009 13.749 25.755 55.749-7.821 77.217-249.189 72.888-270.255 23.001-14.25-33.75 6.753-49.5 14.253-59.25l-1.005-32.085Z"
            stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M270.528 291c10.404-10.239 30.216-15.207 44.25-15 19.386.279 42.096 6.012 53.394 22.404 9.006 13.071-12.129 39.6-24.057 40.347-18.759 1.167-37.395 2.637-56.139 3.582-11.889.597-27.174-41.76-17.448-51.333Z"
            fill="#FFFFFE" />
        <path
            d="M270.528 291c10.404-10.239 30.216-15.207 44.25-15 19.386.279 42.096 6.012 53.394 22.404 9.006 13.071-12.129 39.6-24.057 40.347-18.759 1.167-37.395 2.637-56.139 3.582-11.889.597-27.174-41.76-17.448-51.333Z"
            stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M373.41 179.388c.219 7.863-32.733 25.458-73.881 26.613-41.139 1.155-74.886-14.568-75.108-22.434-.219-7.863 148.767-12.042 148.989-4.179"
            fill="#E88194" />
        <path
            d="M373.41 179.388c.219 7.863-32.733 25.458-73.881 26.613-41.139 1.155-74.886-14.568-75.108-22.434-.219-7.863 148.767-12.042 148.989-4.179v0Z"
            stroke="#1A1919" stroke-width="7.425" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M213.528 195.375c0 8.49-7.218 15.375-16.125 15.375s-16.125-6.885-16.125-15.375c0-8.493 7.218-15.375 16.125-15.375s16.125 6.882 16.125 15.375Zm205.5-7.5c0 8.49-7.218 15.375-16.125 15.375-8.904 0-16.125-6.885-16.125-15.375 0-8.493 7.221-15.375 16.125-15.375 8.907 0 16.125 6.882 16.125 15.375Z"
            fill="#E88194" />
        <path
            d="M428.892 37.503c0 8.88-5.76 16.077-12.861 16.077-7.104 0-12.864-7.197-12.864-16.077 0-8.88 13.398-31.086 13.398-31.086s12.327 22.206 12.327 31.086"
            fill="#C9E8F2" />
        <path
            d="M428.892 37.503c0 8.88-5.76 16.077-12.861 16.077-7.104 0-12.864-7.197-12.864-16.077 0-8.88 13.398-31.086 13.398-31.086s12.327 22.206 12.327 31.086v0Z"
            stroke="#1A1919" stroke-width="7.074" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M518.526 189.084c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083"
            fill="#C9E8F2" />
        <path
            d="M518.526 189.084c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083v0Z"
            stroke="#1A1919" stroke-width="7.074" stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M116.526 167.085c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083"
            fill="#C9E8F2" />
        <path
            d="M116.526 167.085c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083v0Z"
            stroke="#1A1919" stroke-width="7.074" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M529.278 289.875C515.403 306 530.529 324.501 552.528 324" stroke="#1A1919" stroke-width="5.844"
            stroke-linecap="round" stroke-linejoin="round" />
        <path d="M609.528 283.002c16.125 6.498 9.999 20.964 3.999 25.998" stroke="#1A1919" stroke-width="6.48"
            stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="M581.421 283.671c7.503 1.605 12.891 5.862 13.089 11.058.171 4.5-2.232 10.146-9.381 11.025m-22.098 4.245c-9.375.375-15.096-5.766-15.378-11.124-.375-7.125 4.284-12.237 11.406-14.463l3.972 25.587Z"
            stroke="#1A1919" stroke-width="6.309" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M506.028 36v108m63.501 150.501V120v174.501Z" stroke="#1A1919" stroke-width="6.48"
            stroke-linecap="round" stroke-linejoin="round" />
        <path d="M573.03 324.999c9.378-.018 16.419-.681 24.501-5.499" stroke="#1A1919" stroke-width="5.844"
            stroke-linecap="round" stroke-linejoin="round" />
        <path
            d="m442.77 254.502-28.002 18.999m-233.997-3.999L208.77 280.5l-27.999-10.998Zm-38.001 48h39.999-39.999Zm99.999 60.999-25.998 23.001 25.998-23.001Zm81 3 6.999 39-6.999-39Zm77.001 0 33.999 24-33.999-24Z"
            stroke="#1A1919" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M254 136c0 16.016-13.208 29-29.5 29S195 152.016 195 136s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
            fill="#fff" />
        <path d="M254 136c0 16.016-13.208 29-29.5 29S195 152.016 195 136s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
            stroke="#000" />
        <ellipse cx="224.5" cy="136" rx="12.5" ry="12" fill="#000" />
        <path d="M383 129c0 16.016-13.208 29-29.5 29S324 145.016 324 129s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
            fill="#fff" />
        <path d="M383 129c0 16.016-13.208 29-29.5 29S324 145.016 324 129s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
            stroke="#000" />
        <ellipse class="eye-right" cx="353.5" cy="129" rx="12.5" ry="12" fill="#000" />
    </svg>
</body>
</html>

아래 사이트에서 각 나라별 지도를 받아보실 수 있습니다.

Free SVG Maps - amCharts

All maps are available for free for non-commercial use under Creative Commons Attribution-NonCommercial 4.0 International License. For commercial use please consider acquiring an amCharts 4 license.

https://www.amcharts.com/svg-maps/

아래처럼 사용하실 수 있습니다.

코로나19 바이러스 현황판

질병관리본부의 데이터에 근거하여 코로나19 바이러스 감염증에 대한 정보, 안내, 현황 및 확산 지도를 신속하게 전달합니다.

https://livecorona.co.kr/

위니브 개리의 캐릭터를 꾸며준 모습입니다. 이것을 통해 다양한 실습을 해보세요!


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>gray</title>
    <style>
        .container {
            position: relative;
            margin-left: 50%;
            transform: translateX(-50%);
        }
        .왼쪽눈 {
            fill: brown;
        }
        .오른쪽눈{
            fill: brown;
        }
        .안경 .center{
            position: absolute;
            top: 86px;
            left: 133px;
            width: 12px;
            height: 10px;
            background: brown;
        }
        .안경 .right{
            transform: rotate(15deg);
            position: absolute;
            top: 86px;
            left: 210px;
            width: 50px;
            height: 10px;
            background: brown;
            border: 1px solid brown;
            border-radius: 10px;
        }
        .안경 .left{
            transform: rotate(15deg);
            position: absolute;
            top: 80px;
            left: 30px;
            width: 30px;
            height: 10px;
            background: brown;
            border: 1px solid brown;
            border-radius: 10px;
        }
        /* 연습용 코드 */
        .연습 {
            /* 기울임 */
            transform: skew(30deg);
            /* 크기 변환 */
            transform: scale(2);
            /* 이동 x축 y축  */
            transform: translate(20px, 30px);
            transform: scale(2) translate(20px, 30px) rotate(30deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="안경">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
        width="211.000000pt" height="240.000000pt" viewBox="0 0 211.000000 240.000000"
        preserveAspectRatio="xMidYMid meet">

        <g transform="translate(0.000000,240.000000) scale(0.100000,-0.100000)"
        fill="#000000" stroke="none">
        <path d="M1387 2271 c-20 -4 -61 -24 -90 -44 -72 -50 -152 -67 -316 -67 -131
        0 -135 1 -224 37 -146 59 -242 47 -324 -39 -17 -18 -58 -85 -91 -149 -33 -63
        -80 -147 -105 -186 -99 -154 -123 -228 -115 -357 4 -64 12 -94 36 -141 67
        -134 223 -227 447 -266 l64 -11 -6 -46 c-4 -29 -17 -61 -34 -82 -69 -87 -57
        -221 23 -270 17 -10 37 -32 43 -47 10 -25 8 -33 -32 -87 -24 -32 -43 -62 -43
        -67 0 -4 -18 -13 -40 -19 -97 -26 -93 -161 8 -252 49 -44 101 -62 154 -54 54
        9 145 56 211 110 51 41 57 43 113 42 45 -1 68 -8 93 -25 40 -29 111 -51 162
        -51 29 0 39 -5 44 -21 17 -53 122 -76 182 -39 38 23 90 109 99 162 6 34 10 38
        43 44 89 16 165 85 201 181 73 196 -9 461 -179 576 l-49 33 74 38 c194 100
        281 259 245 450 -16 85 -48 147 -141 271 -45 61 -103 146 -130 190 -55 91 -98
        139 -149 165 -43 21 -122 31 -174 21z m160 -97 c16 -11 69 -81 118 -155 50
        -75 113 -167 141 -205 67 -90 90 -137 104 -212 12 -70 2 -149 -26 -204 -63
        -122 -260 -219 -536 -263 -160 -26 -534 -32 -677 -11 -272 40 -422 130 -466
        279 -34 116 -12 206 94 382 43 72 96 164 116 205 20 41 49 90 62 109 52 68
        140 79 249 30 85 -39 199 -51 357 -39 122 9 182 27 262 79 45 29 56 32 112 29
        42 -3 72 -10 90 -24z m-277 -1126 c0 -2 -7 -25 -15 -52 -8 -27 -15 -62 -15
        -78 0 -16 -9 -46 -20 -68 -21 -41 -26 -103 -11 -142 l9 -23 -207 0 -207 0 13
        35 c17 50 16 143 -3 183 -15 32 -15 38 1 81 l18 46 141 1 c115 1 250 9 289 17
        4 1 7 1 7 0z m313 -58 c41 -49 57 -98 57 -179 0 -65 -14 -103 -49 -135 -26
        -24 -211 -44 -248 -27 -74 34 -86 187 -15 192 37 3 58 -4 79 -23 37 -35 86 -1
        63 43 -7 13 -8 31 -1 57 11 40 56 112 71 112 4 0 24 -18 43 -40z m-845 -112
        c14 -14 16 -106 2 -142 -21 -58 -80 -18 -80 54 0 70 45 121 78 88z m430 -268
        c53 -6 116 -18 139 -27 23 -8 63 -16 90 -17 46 -1 48 -2 51 -33 2 -17 -3 -44
        -11 -60 -31 -58 -123 -133 -200 -162 -24 -9 -31 -7 -59 19 -17 17 -32 30 -33
        30 -1 0 -15 -5 -32 -10 -20 -7 -44 -8 -73 -1 -39 9 -47 7 -74 -14 l-30 -24
        -61 57 c-33 31 -82 67 -108 80 -26 13 -47 25 -47 28 0 3 16 21 36 40 24 24 33
        41 29 53 -4 9 -7 21 -8 26 -4 22 236 31 391 15z m412 -257 c0 -69 -61 -163
        -105 -163 -24 0 -49 24 -59 57 -8 26 -36 37 -68 28 -15 -4 -10 1 12 15 46 29
        97 78 121 117 l20 31 39 -26 c34 -21 40 -31 40 -59z m-811 6 c33 -22 70 -52
        81 -67 l21 -26 -23 -18 c-38 -29 -126 -59 -155 -52 -14 4 -42 23 -63 43 -58
        55 -67 121 -16 121 35 0 56 10 56 26 0 25 36 15 99 -27z"/>
        <path class="오른쪽눈" d="M1283 2010 c-137 -28 -235 -141 -235 -269 0 -97 41 -165 124 -207
        176 -89 419 -14 466 145 16 51 15 77 -4 140 -39 133 -202 222 -351 191z m174
        -99 c108 -55 144 -181 75 -262 -54 -65 -176 -94 -274 -65 -103 30 -152 106
        -128 196 15 57 90 133 146 148 54 15 134 8 181 -17z"/>
        <path d="M1270 1873 c-30 -11 -50 -37 -50 -62 0 -34 10 -48 41 -59 51 -20 109
        12 109 59 0 39 -61 77 -100 62z"/>
        <path class="왼쪽눈" d="M625 1977 c-62 -21 -97 -42 -136 -84 -102 -106 -105 -248 -10 -343
        134 -133 426 -97 505 62 65 131 2 287 -141 350 -56 25 -166 32 -218 15z m193
        -93 c158 -79 151 -266 -12 -321 -158 -52 -316 20 -316 144 0 60 21 104 68 144
        78 65 172 77 260 33z"/>
        <path d="M620 1830 c-11 -11 -20 -29 -20 -40 0 -27 43 -70 70 -70 24 0 61 18
        72 34 14 20 8 63 -10 79 -26 24 -87 22 -112 -3z"/>
        <path d="M1631 1526 c-89 -94 -360 -156 -685 -156 -233 0 -387 30 -464 90 -29
        24 -55 25 -72 5 -45 -54 118 -137 328 -165 112 -15 426 -7 547 14 186 32 348
        96 399 157 30 36 31 42 10 63 -21 22 -37 20 -63 -8z"/>
        </g>
        </svg>
    </div>
    
</body>
</html>