What is SVG?

#html #css #svg #scalablevectorgraphics

Is SVG image? Nope. It's a document. SVG is Scalable Vector Graphics. It defines the graphics in XML format and can be used to draw vector graphics. Every element and every attribute in SVG files can be animated. It can be used to create an image either by specifying all the lines and shapes necessary, by modifying already existing raster images, or by a combination of both. The image an it's components can also be transformed, composited together, or filtered t change their appearance.

Pros using SVG.

Scalability: Vector images are resolution-independent and can scale to any dimension without losing quality.
Compact file-size: Pixel-based images are saved at a large size from the start because you can only retain the quality when you make the image smaller, but not when you make it larger. This can impact a site’s download speed. Since SVGs are scalable, they can be saved at a minimal file size.

Cons using SVG.

The file size is growing very fast, if the object consists of a large number of small elements. It's used a lot when implementing simple icon, logo or diagrams but not for complicated image.

You can convert png file to SVG file here

How to load / use SVG in HTML

1.Use <img> tag.

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

2.Use css background.

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

3.Use the SVG code in html.
This is what SVG look like.

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="219.000000pt" height="230.000000pt" viewBox="0 0 219.000000 230.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,230.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M890 2175 c-210 -47 -389 -145 -533 -291 -408 -413 -404 -1067 9
-1478 126 -125 288 -217 472 -269 66 -18 103 -21 262 -21 173 0 191 2 274 28
300 91 525 280 656 551 138 284 142 609 9 893 -130 280 -362 478 -664 568 -78
23 -111 27 -255 30 -118 3 -183 -1 -230 -11z m-63 -177 c17 -17 41 -55 52 -87
12 -31 30 -66 40 -78 27 -33 117 -46 214 -32 43 6 96 9 117 6 47 -6 57 1 156
103 71 74 101 89 139 72 45 -21 78 -190 56 -291 -10 -49 -9 -57 23 -135 25
-59 37 -107 42 -162 3 -44 15 -104 26 -134 23 -65 50 -163 77 -275 26 -105 47
-511 28 -533 -25 -32 -160 -133 -222 -168 -87 -48 -232 -99 -328 -114 -102
-17 -299 -8 -392 18 -159 43 -314 127 -423 228 l-54 49 21 49 c19 44 28 94 35
211 1 22 8 60 15 84 11 40 11 48 -13 100 -35 79 -45 132 -46 237 0 63 6 112
19 155 11 35 29 106 41 157 15 61 32 108 53 139 36 53 88 93 123 93 33 0 82
46 94 88 6 20 13 80 17 132 9 139 21 152 90 88z"/>
<path d="M1380 1776 c0 -21 -6 -36 -15 -40 -8 -3 -15 -12 -15 -21 0 -8 7 -15
15 -15 11 0 15 -11 15 -40 l0 -40 43 1 c70 2 91 11 111 53 16 32 17 44 7 77
-14 48 -34 59 -105 59 l-56 0 0 -34z m94 -6 c22 -8 26 -16 26 -48 0 -45 -14
-62 -52 -62 -21 0 -28 5 -28 19 0 10 9 21 20 24 11 3 20 10 20 17 0 7 -9 14
-20 17 -23 6 -28 43 -6 43 8 0 26 -4 40 -10z"/>
<path d="M646 1524 c-33 -32 -32 -96 1 -108 21 -8 77 25 81 48 2 10 -2 23 -10
28 -10 8 -10 11 0 15 10 4 10 8 1 19 -15 19 -54 18 -73 -2z m39 -13 c3 -5 0
-13 -5 -16 -6 -4 -16 -19 -22 -33 l-10 -27 -11 23 c-8 17 -6 26 8 42 20 22 31
25 40 11z"/>
<path d="M1001 1435 c-48 -55 -40 -86 25 -98 46 -9 99 9 128 44 30 36 28 42
-24 69 -59 30 -92 26 -129 -15z m89 15 c0 -5 -11 -17 -25 -26 -30 -20 -31 -28
-6 -53 16 -16 17 -20 5 -25 -8 -3 -25 -1 -39 4 -29 11 -33 44 -10 77 13 19 24
24 68 32 4 0 7 -3 7 -9z"/>
<path d="M580 1299 c-33 -13 -40 -26 -40 -74 0 -35 6 -47 39 -79 l40 -39 61
53 c33 29 65 60 70 70 13 25 -7 47 -59 65 -49 17 -75 18 -111 4z"/>
<path d="M561 1061 c-12 -8 -10 -11 10 -15 255 -59 294 -64 352 -46 58 17 39
22 -40 10 -67 -11 -73 -10 -144 19 -85 33 -157 46 -178 32z"/>
</g>
</svg>

Add this inline in HTML.

Optimising svg

By compressing the code, you can make the file smaller. SVG Compressor

Playing with SVG

<!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></title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@800&display=swap');

        .eye {
            animation-duration: 0.2s;
            animation-name: moveEye;
            animation-direction: alternate;
            animation-iteration-count: infinite;
        }

        @keyframes moveEye {
            to {
                transform: scaleX(0.98) scaleY(0.99);
            }
        }

        @keyframes change-background {
            0% {
                fill: #ff2d2d
            }

            50% {
                fill: #dd8500;
            }

            100% {
                fill: #ffcd07;
            }
        }

        @keyframes textMove {
            to {
                transform: scaleY(0.9) scaleX(0.89);
            }
        }

        .background {
            animation: change-background 3s infinite;
        }

        .nose {
            position: relative;
        }

        .blush-right {
            position: absolute;
            width: 26px;
            height: 22px;
            background: pink;
            border-radius: 50%;
            left: 139px;
            top: 150px;
        }

        .blush-left {
            position: absolute;
            width: 14px;
            height: 15px;
            background: pink;
            border-top-left-radius: 60%;
            border-bottom-left-radius: 60%;
            border-top-right-radius: 40%;
            border-bottom-right-radius: 40%;
            transform: rotate(26deg);
            left: 62px;
            top: 129px;
        }

        .d {
            fill: #ff5d00;
        }

        .container {
            position: relative;
        }

        .text2,
        .text {
            animation-duration: 0.2s;
            animation-name: textMove;
            animation-direction: alternate;
            animation-iteration-count: infinite;
        }

        .text {
            position: absolute;
            font-size: 30px;
            font-weight: 900;
            top: 214px;
            left: 48px;
            font-family: 'Work Sans', sans-serif;
            fill: #ff2d2d
        }

        .text2 {
            position: absolute;
            font-size: 30px;
            font-weight: 900;
            top: 210px;
            left: 44px;
            font-family: 'Work Sans', sans-serif;
            text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 1px white;
        }
    </style>
</head>

<body>
    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="219.000000pt" height="230.000000pt"
        viewBox="0 0 219.000000 230.000000" preserveAspectRatio="xMidYMid meet">

        <g class="container" transform="translate(0.000000,230.000000) scale(0.100000,-0.100000)" fill="#000000"
            stroke="none">
            <path class="background" d="M890 2175 c-210 -47 -389 -145 -533 -291 -408 -413 -404 -1067 9
-1478 126 -125 288 -217 472 -269 66 -18 103 -21 262 -21 173 0 191 2 274 28
300 91 525 280 656 551 138 284 142 609 9 893 -130 280 -362 478 -664 568 -78
23 -111 27 -255 30 -118 3 -183 -1 -230 -11z m-63 -177 c17 -17 41 -55 52 -87
12 -31 30 -66 40 -78 27 -33 117 -46 214 -32 43 6 96 9 117 6 47 -6 57 1 156
103 71 74 101 89 139 72 45 -21 78 -190 56 -291 -10 -49 -9 -57 23 -135 25
-59 37 -107 42 -162 3 -44 15 -104 26 -134 23 -65 50 -163 77 -275 26 -105 47
-511 28 -533 -25 -32 -160 -133 -222 -168 -87 -48 -232 -99 -328 -114 -102
-17 -299 -8 -392 18 -159 43 -314 127 -423 228 l-54 49 21 49 c19 44 28 94 35
211 1 22 8 60 15 84 11 40 11 48 -13 100 -35 79 -45 132 -46 237 0 63 6 112
19 155 11 35 29 106 41 157 15 61 32 108 53 139 36 53 88 93 123 93 33 0 82
46 94 88 6 20 13 80 17 132 9 139 21 152 90 88z" />
            <path class="d" d="M1380 1776 c0 -21 -6 -36 -15 -40 -8 -3 -15 -12 -15 -21 0 -8 7 -15
15 -15 11 0 15 -11 15 -40 l0 -40 43 1 c70 2 91 11 111 53 16 32 17 44 7 77
-14 48 -34 59 -105 59 l-56 0 0 -34z m94 -6 c22 -8 26 -16 26 -48 0 -45 -14
-62 -52 -62 -21 0 -28 5 -28 19 0 10 9 21 20 24 11 3 20 10 20 17 0 7 -9 14
-20 17 -23 6 -28 43 -6 43 8 0 26 -4 40 -10z" />
            <path class="eye" d="M646 1524 c-33 -32 -32 -96 1 -108 21 -8 77 25 81 48 2 10 -2 23 -10
28 -10 8 -10 11 0 15 10 4 10 8 1 19 -15 19 -54 18 -73 -2z m39 -13 c3 -5 0
-13 -5 -16 -6 -4 -16 -19 -22 -33 l-10 -27 -11 23 c-8 17 -6 26 8 42 20 22 31
25 40 11z" />
            <path class="eye" d="M1001 1435 c-48 -55 -40 -86 25 -98 46 -9 99 9 128 44 30 36 28 42
-24 69 -59 30 -92 26 -129 -15z m89 15 c0 -5 -11 -17 -25 -26 -30 -20 -31 -28
-6 -53 16 -16 17 -20 5 -25 -8 -3 -25 -1 -39 4 -29 11 -33 44 -10 77 13 19 24
24 68 32 4 0 7 -3 7 -9z" />
            <path class="nose" d="M580 1299 c-33 -13 -40 -26 -40 -74 0 -35 6 -47 39 -79 l40 -39 61
53 c33 29 65 60 70 70 13 25 -7 47 -59 65 -49 17 -75 18 -111 4z" />
            <div class="blush-right"></div>
            <div class="blush-left"></div>
            <path d="M561 1061 c-12 -8 -10 -11 10 -15 255 -59 294 -64 352 -46 58 17 39
22 -40 10 -67 -11 -73 -10 -144 19 -85 33 -157 46 -178 32z" />
        </g>
        <div class="text">TO THE MOON</div>
        <div class="text2">TO THE MOON</div>
    </svg>


</body>

</html>