Posted onNov 9, 2021

What is SVG?

Is SVG image? Nope. It's a document. SVG isScalable 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'sused a lot when implementing simple icon, logo or diagrams but not for complicated image.

You can convert png file to SVG filehere

How to load / use SVG in HTML

1.Use<img> tag.

<imgsrc="puppy.svg"alt="">

2.Use css background.

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

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

<svgversion="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"><gtransform="translate(0.000000,230.000000) scale(0.100000,-0.100000)"fill="#000000"stroke="none"><pathd="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 28300 91 525 280 656 551 138 284 142 609 9 893 -130 280 -362 478 -664 568 -7823 -111 27 -255 30 -118 3 -183 -1 -230 -11z m-63 -177 c17 -17 41 -55 52 -8712 -31 30 -66 40 -78 27 -33 117 -46 214 -32 43 6 96 9 117 6 47 -6 57 1 156103 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 35211 1 22 8 60 15 84 11 40 11 48 -13 100 -35 79 -45 132 -46 237 0 63 6 11219 155 11 35 29 106 41 157 15 61 32 108 53 139 36 53 88 93 123 93 33 0 8246 94 88 6 20 13 80 17 132 9 139 21 152 90 88z"/><pathd="M1380 1776 c0 -21 -6 -36 -15 -40 -8 -3 -15 -12 -15 -21 0 -8 7 -1515 -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"/><pathd="M646 1524 c-33 -32 -32 -96 1 -108 21 -8 77 25 81 48 2 10 -2 23 -1028 -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 3125 40 11z"/><pathd="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 2424 68 32 4 0 7 -3 7 -9z"/><pathd="M580 1299 c-33 -13 -40 -26 -40 -74 0 -35 6 -47 39 -79 l40 -39 6153 c33 29 65 60 70 70 13 25 -7 47 -59 65 -49 17 -75 18 -111 4z"/><pathd="M561 1061 c-12 -8 -10 -11 10 -15 255 -59 294 -64 352 -46 58 17 3922 -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><htmllang="ko"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title></title><style>@importurl('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;}@keyframesmoveEye{to{transform:scaleX(0.98)scaleY(0.99);}}@keyframeschange-background{0%{fill:#ff2d2d}50%{fill:#dd8500;}100%{fill:#ffcd07;}}@keyframestextMove{to{transform:scaleY(0.9)scaleX(0.89);}}.background{animation:change-background3sinfinite;}.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:-1px0white,01pxwhite,1px0white,01pxwhite;}</style></head><body><svgversion="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"><gclass="container"transform="translate(0.000000,230.000000) scale(0.100000,-0.100000)"fill="#000000"stroke="none"><pathclass="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 28300 91 525 280 656 551 138 284 142 609 9 893 -130 280 -362 478 -664 568 -7823 -111 27 -255 30 -118 3 -183 -1 -230 -11z m-63 -177 c17 -17 41 -55 52 -8712 -31 30 -66 40 -78 27 -33 117 -46 214 -32 43 6 96 9 117 6 47 -6 57 1 156103 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 35211 1 22 8 60 15 84 11 40 11 48 -13 100 -35 79 -45 132 -46 237 0 63 6 11219 155 11 35 29 106 41 157 15 61 32 108 53 139 36 53 88 93 123 93 33 0 8246 94 88 6 20 13 80 17 132 9 139 21 152 90 88z"/><pathclass="d"d="M1380 1776 c0 -21 -6 -36 -15 -40 -8 -3 -15 -12 -15 -21 0 -8 7 -1515 -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"/><pathclass="eye"d="M646 1524 c-33 -32 -32 -96 1 -108 21 -8 77 25 81 48 2 10 -2 23 -1028 -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 3125 40 11z"/><pathclass="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 2424 68 32 4 0 7 -3 7 -9z"/><pathclass="nose"d="M580 1299 c-33 -13 -40 -26 -40 -74 0 -35 6 -47 39 -79 l40 -39 6153 c33 29 65 60 70 70 13 25 -7 47 -59 65 -49 17 -75 18 -111 4z"/><divclass="blush-right"></div><divclass="blush-left"></div><pathd="M561 1061 c-12 -8 -10 -11 10 -15 255 -59 294 -64 352 -46 58 17 3922 -40 10 -67 -11 -73 -10 -144 19 -85 33 -157 46 -178 32z"/></g><divclass="text">TO THE MOON</div><divclass="text2">TO THE MOON</div></svg></body></html>