이미지 파일을 비트맵 형식으로 변환시킨 확장자인 SVG에 대해서 알게되었다.





이 JPG 파일을 SVG생성기로 변환시켜보았다. (convertio.co)



SVG의 장점은 글자(비트맵) 이기 때문에 jpg파일과는 다르게 확대하거나 축소하여도 깨지지가 않는다.

주로 로고(메인로고, 이모티콘) 등 작은 사진을 표현할 때 사용한다.



SVG 소스 코드 (HTML 편집기에 복사하면 SVG이미지가 출력된다)

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

<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M2270 4590 c-337 -47 -596 -166 -801 -370 -217 -214 -323 -482 -323
-815 1 -251 61 -490 178 -698 38 -69 142 -213 168 -235 12 -9 15 -24 11 -52
-4 -25 0 -48 9 -62 11 -19 12 -51 6 -178 -15 -288 29 -798 108 -1251 6 -36 5
-36 -32 -44 -87 -16 -182 -89 -210 -160 -25 -68 -3 -127 65 -169 49 -31 210
-83 301 -97 103 -16 375 -6 460 16 101 27 186 71 221 115 l31 39 32 -33 c78
-82 256 -136 477 -143 289 -10 476 48 518 160 36 95 -36 210 -151 245 -46 13
-58 21 -58 37 0 11 14 85 30 165 51 242 78 391 95 516 16 125 37 519 34 639
-1 39 4 84 10 100 7 17 11 46 9 65 -4 31 2 40 64 103 161 163 268 394 303 657
17 125 19 333 4 433 -58 387 -278 683 -645 865 -218 109 -403 152 -669 157
-99 2 -209 0 -245 -5z m333 -27 c-7 -2 -21 -2 -30 0 -10 3 -4 5 12 5 17 0 24
-2 18 -5z m622 -181 c-3 -3 -11 0 -18 7 -9 10 -8 11 6 5 10 -3 15 -9 12 -12z
m245 -172 c31 -30 36 -37 11 -15 -25 23 -72 60 -103 84 -32 24 -58 45 -58 48
0 10 96 -65 150 -117z m-1875 80 c-10 -11 -22 -20 -28 -20 -5 0 1 9 14 20 31
25 37 25 14 0z m-45 -33 c0 -1 -33 -34 -72 -72 l-73 -70 70 73 c64 67 75 77
75 69z m2084 -239 c11 -18 17 -31 14 -28 -12 11 -108 141 -108 147 0 9 74 -84
94 -119z m-2234 78 c0 -2 -8 -10 -17 -17 -16 -13 -17 -12 -4 4 13 16 21 21 21
13z m890 -61 c95 -48 154 -131 181 -251 16 -71 2 -197 -31 -271 -24 -56 -46
-74 -28 -23 19 55 -13 120 -58 120 -27 0 -74 -53 -74 -84 0 -46 22 -88 53
-101 l31 -13 -36 -15 c-50 -21 -137 -31 -202 -23 -67 9 -135 52 -175 110 -124
180 -45 491 143 560 52 20 150 15 196 -9z m608 -6 c125 -61 200 -229 180 -406
-20 -178 -157 -281 -335 -253 -36 6 -82 19 -102 30 -34 18 -35 19 -10 20 33 0
55 25 64 70 8 44 -7 84 -39 105 -64 42 -115 -40 -81 -130 5 -16 3 -15 -14 5
-32 39 -52 107 -58 200 -12 175 52 302 182 361 57 26 156 25 213 -2z m123 -56
c13 -16 12 -17 -3 -4 -17 13 -22 21 -14 21 2 0 10 -8 17 -17z m-1061 3 c0 -2
-8 -10 -17 -17 -16 -13 -17 -12 -4 4 13 16 21 21 21 13z m1715 -26 c9 -16 13
-30 11 -30 -3 0 -12 14 -21 30 -9 17 -13 30 -11 30 3 0 12 -13 21 -30z m-2375
-10 c-6 -11 -13 -20 -16 -20 -2 0 0 9 6 20 6 11 13 20 16 20 2 0 0 -9 -6 -20z
m2429 -105 c0 -5 -6 1 -14 15 -8 14 -14 30 -14 35 0 6 6 -1 14 -15 8 -14 14
-29 14 -35z m-1238 18 c-8 -15 -10 -15 -11 -2 0 17 10 32 18 25 2 -3 -1 -13
-7 -23z m1268 -103 c0 -10 -3 -8 -9 5 -12 27 -12 43 0 25 5 -8 9 -22 9 -30z
m-642 -97 c-2 -16 -4 -3 -4 27 0 30 2 43 4 28 2 -16 2 -40 0 -55z m670 -25
c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m10 -60 c-3 -7 -5 -2 -5
12 0 14 2 19 5 13 2 -7 2 -19 0 -25z m-1894 -41 c34 -74 79 -122 145 -153 52
-25 63 -26 159 -22 92 4 103 3 97 -11 -12 -30 -16 -90 -10 -126 10 -49 77
-121 127 -137 l39 -11 0 -364 0 -363 -26 0 c-111 0 -456 185 -668 358 l-69 57
39 7 c21 3 91 14 154 23 152 22 160 24 160 36 0 7 -12 9 -32 6 -18 -3 -105
-16 -192 -28 l-160 -23 -77 82 c-43 45 -80 82 -83 82 -17 0 1 -25 64 -93 l71
-75 -76 -13 c-41 -6 -75 -16 -75 -20 0 -12 10 -11 101 2 l76 12 74 -62 c158
-133 407 -282 571 -343 78 -28 89 -30 193 -25 92 3 128 10 222 41 142 47 347
150 500 251 124 83 300 245 288 265 -5 8 -11 8 -21 -1 -12 -9 -14 -5 -14 25 0
21 -5 46 -11 58 -14 25 -10 28 40 35 59 8 50 23 -13 23 -39 0 -68 7 -102 25
-76 40 -155 32 -239 -25 -26 -17 -46 -20 -142 -20 -111 0 -143 -5 -143 -21 0
-4 52 -5 115 -2 114 6 134 1 101 -26 -7 -6 -26 -38 -40 -72 l-28 -60 -86 7
c-106 8 -102 -7 6 -21 l77 -10 5 -65 c3 -45 14 -83 33 -119 15 -29 24 -57 21
-62 -7 -12 -158 -88 -245 -124 -98 -41 -217 -74 -287 -82 l-62 -6 2 363 3 363
42 12 c22 7 55 22 71 34 63 45 93 162 58 232 -14 29 -14 30 2 24 39 -15 140
-26 187 -20 99 13 196 89 231 181 17 44 17 44 58 38 224 -29 398 -139 471
-298 118 -257 33 -586 -212 -816 -103 -98 -180 -145 -291 -179 -201 -60 -347
-81 -577 -81 -258 0 -469 34 -674 109 -110 40 -154 67 -228 139 -171 168 -273
399 -273 623 0 215 185 429 433 500 91 26 93 26 120 -34z m611 -19 l22 -53
-48 0 c-26 0 -48 1 -48 3 0 1 9 20 20 42 11 22 20 47 20 56 0 25 10 11 34 -48z
m826 42 c8 -5 11 -10 5 -10 -5 0 -17 5 -25 10 -8 5 -10 10 -5 10 6 0 17 -5 25
-10z m467 -107 c-2 -16 -4 -3 -4 27 0 30 2 43 4 28 2 -16 2 -40 0 -55z m-1419
34 c2 -12 -3 -17 -17 -17 -12 0 -21 6 -21 13 0 31 32 34 38 4z m250 -10 c2
-12 -3 -17 -17 -17 -12 0 -21 6 -21 13 0 31 32 34 38 4z m853 -4 c13 -16 12
-17 -3 -4 -10 7 -18 15 -18 17 0 8 8 3 21 -13z m-2001 -38 c-24 -25 -46 -45
-49 -45 -3 0 15 20 39 45 24 25 46 45 49 45 3 0 -15 -20 -39 -45z m-313 -17
c-2 -13 -4 -5 -4 17 -1 22 1 32 4 23 2 -10 2 -28 0 -40z m2424 -60 c15 -28 5
-21 -21 15 -15 20 -17 27 -6 18 9 -8 22 -23 27 -33z m-2424 0 c-3 -7 -5 -2 -5
12 0 14 2 19 5 13 2 -7 2 -19 0 -25z m1299 -4 c37 -55 -25 -117 -80 -80 -30
19 -35 65 -10 90 25 25 71 20 90 -10z m1331 -126 c-2 -18 -4 -4 -4 32 0 36 2
50 4 33 2 -18 2 -48 0 -65z m-130 -65 c-3 -10 -5 -4 -5 12 0 17 2 24 5 18 2
-7 2 -21 0 -30z m-2480 5 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z
m2600 -25 c-3 -10 -5 -4 -5 12 0 17 2 24 5 18 2 -7 2 -21 0 -30z m-2470 -5
c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m-120 -20 c-3 -8 -6 -5
-6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m2480 -25 c-3 -10 -5 -2 -5 17 0 19 2
27 5 18 2 -10 2 -26 0 -35z m100 -5 c-3 -7 -5 -2 -5 12 0 14 2 19 5 13 2 -7 2
-19 0 -25z m-2470 -30 c-3 -7 -5 -2 -5 12 0 14 2 19 5 13 2 -7 2 -19 0 -25z
m2460 -20 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m-432 7 c-23
-8 -125 -11 -113 -4 7 5 38 8 68 8 30 0 51 -2 45 -4z m53 -21 c34 -24 52 -68
52 -128 0 -52 -2 -56 -47 -99 -27 -25 -60 -55 -75 -67 l-28 -21 2 48 c1 36 2
40 5 16 2 -18 8 -33 12 -33 4 0 33 23 64 51 57 50 57 51 57 107 0 62 -21 106
-62 128 -13 8 -18 13 -13 14 6 0 21 -7 33 -16z m-222 -23 c-80 -64 -119 -143
-118 -241 0 -66 32 -160 54 -160 5 0 41 20 79 45 l69 45 0 75 c0 75 11 115 31
115 6 0 3 -7 -5 -16 -12 -11 -16 -36 -16 -97 l0 -82 -81 -54 c-90 -60 -84 -61
-121 19 -33 71 -29 163 11 244 29 60 99 136 124 136 5 0 -7 -13 -27 -29z m591
-3 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m-2440 -40 c-3 -8 -6
-5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m2430 0 c-3 -8 -6 -5 -6 6 -1 11 2
17 5 13 3 -3 4 -12 1 -19z m-70 -20 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4
-12 1 -19z m34 -85 c-12 -20 -14 -14 -5 12 4 9 9 14 11 11 3 -2 0 -13 -6 -23z
m-404 -25 c-3 -7 -5 -2 -5 12 0 14 2 19 5 13 2 -7 2 -19 0 -25z m-2007 -13 c0
-5 -5 -3 -10 5 -5 8 -10 20 -10 25 0 6 5 3 10 -5 5 -8 10 -19 10 -25z m35 -65
c9 -16 13 -30 11 -30 -3 0 -12 14 -21 30 -9 17 -13 30 -11 30 3 0 12 -13 21
-30z m2320 -20 c-14 -27 -28 -50 -30 -50 -3 0 6 23 20 50 14 28 28 50 30 50 3
0 -6 -22 -20 -50z m-61 -52 c-9 -18 -25 -45 -35 -60 -24 -33 -24 -45 -2 -27
10 8 3 -5 -15 -28 -31 -40 -153 -153 -165 -153 -9 0 127 134 137 135 5 0 11 6
14 14 3 9 0 11 -8 6 -7 -5 0 12 17 36 17 24 38 59 47 77 9 17 19 32 22 32 2 0
-3 -15 -12 -32z m-2209 -14 c9 -15 12 -23 6 -20 -11 7 -35 46 -28 46 3 0 12
-12 22 -26z m56 -41 c12 -21 22 -46 21 -56 0 -9 3 -15 7 -12 5 2 14 -2 21 -10
7 -8 10 -15 7 -15 -3 0 18 -23 46 -51 46 -45 47 -48 12 -21 -22 17 -54 45 -71
64 -42 45 -93 116 -71 99 19 -15 22 -9 7 20 -19 34 -3 20 21 -18z m2159 13 c0
-2 -8 -10 -17 -17 -16 -13 -17 -12 -4 4 13 16 21 21 21 13z m-2053 -358 c-3
-7 -5 -2 -5 12 0 14 2 19 5 13 2 -7 2 -19 0 -25z m53 -4 c0 -2 -9 0 -20 6 -11
6 -20 13 -20 16 0 2 9 0 20 -6 11 -6 20 -13 20 -16z m1797 -156 c-2 -29 -3 -6
-3 52 0 58 1 81 3 53 2 -29 2 -77 0 -105z m-17 137 c0 -2 -10 -9 -22 -15 -22
-11 -22 -10 -4 4 21 17 26 19 26 11z m-67 -52 c-7 -2 -21 -2 -30 0 -10 3 -4 5
12 5 17 0 24 -2 18 -5z m-86 -9 c-3 -3 -12 -4 -19 -1 -8 3 -5 6 6 6 11 1 17
-2 13 -5z m-702 -35 c72 -20 145 -90 114 -110 -17 -10 -336 -11 -363 0 -16 6
-13 12 25 52 62 64 135 82 224 58z m-620 -29 c3 -6 -1 -7 -9 -4 -18 7 -21 14
-7 14 6 0 13 -4 16 -10z m249 -35 c48 -8 91 -17 94 -20 4 -3 -7 -16 -22 -29
-25 -19 -27 -25 -17 -43 6 -12 11 -36 11 -54 l0 -32 -63 62 c-35 34 -85 77
-111 96 -66 47 -67 49 -21 40 22 -4 80 -13 129 -20z m-617 -122 c-2 -27 -3 -5
-3 47 0 52 1 74 3 48 2 -27 2 -69 0 -95z m1342 114 c-68 -54 -109 -92 -138
-131 -19 -25 -38 -46 -41 -46 -8 0 3 76 14 102 5 12 0 22 -18 33 -14 10 -26
21 -26 25 0 7 128 26 195 28 25 1 28 -1 14 -11z m21 -21 c0 -2 -8 -10 -17 -17
-16 -13 -17 -12 -4 4 13 16 21 21 21 13z m-210 -47 c0 -13 -68 -19 -230 -19
-162 0 -230 6 -230 19 0 3 104 6 230 6 127 0 230 -3 230 -6z m-595 -19 c10
-11 16 -20 13 -20 -3 0 -13 9 -23 20 -10 11 -16 20 -13 20 3 0 13 -9 23 -20z
m745 17 c0 -2 -15 -16 -32 -33 l-33 -29 29 33 c28 30 36 37 36 29z m-164 -86
c-11 -81 -85 -161 -163 -177 -30 -6 -31 -5 -35 35 -3 35 0 44 19 57 13 8 23
24 23 36 0 28 -28 58 -53 58 -50 0 -76 -68 -37 -92 15 -10 20 -24 20 -55 0
-47 -6 -50 -61 -31 -76 25 -131 92 -144 174 l-7 41 222 -1 222 0 -6 -45z
m-501 -1 c10 -11 16 -20 13 -20 -3 0 -13 9 -23 20 -10 11 -16 20 -13 20 3 0
13 -9 23 -20z m585 -4 c0 -2 -8 -10 -17 -17 -16 -13 -17 -12 -4 4 13 16 21 21
21 13z m627 -129 c-2 -23 -3 -1 -3 48 0 50 1 68 3 42 2 -26 2 -67 0 -90z
m-1146 56 c13 -16 12 -17 -3 -4 -10 7 -18 15 -18 17 0 8 8 3 21 -13z m449 -23
c-6 -11 -13 -20 -16 -20 -2 0 0 9 6 20 6 11 13 20 16 20 2 0 0 -9 -6 -20z
m-1143 -52 c-3 -7 -5 -2 -5 12 0 14 2 19 5 13 2 -7 2 -19 0 -25z m104 15 c13
-16 12 -17 -3 -4 -10 7 -18 15 -18 17 0 8 8 3 21 -13z m673 -55 c22 -39 11
-29 -29 27 -17 23 -21 33 -9 23 10 -9 28 -32 38 -50z m896 -13 c-41 -41 -77
-75 -79 -75 -3 0 28 34 69 75 41 41 77 75 79 75 3 0 -28 -34 -69 -75z m120 72
c0 -2 -10 -12 -22 -23 l-23 -19 19 23 c18 21 26 27 26 19z m-739 -63 c-10 -21
-27 -67 -36 -101 l-18 -63 -59 0 c-47 0 -60 3 -64 18 -3 9 -18 45 -35 80 -35
75 -36 87 -8 72 36 -20 133 -13 186 12 26 13 49 23 50 23 2 -1 -6 -19 -16 -41z
m47 21 c-6 -14 -13 -23 -15 -21 -5 5 15 46 22 46 3 0 -1 -11 -7 -25z m-997
-12 c13 -16 12 -17 -3 -4 -17 13 -22 21 -14 21 2 0 10 -8 17 -17z m26 -35 c-3
-8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m113 -15 c0 -7 -39 17 -46
28 -3 6 5 3 20 -6 14 -10 26 -19 26 -22z m1587 -10 c-3 -10 -5 -4 -5 12 0 17
2 24 5 18 2 -7 2 -21 0 -30z m-1631 2 c14 -9 25 -34 33 -72 33 -171 164 -326
344 -407 121 -55 187 -69 327 -68 299 1 542 103 649 271 35 54 47 88 61 170 7
40 18 63 42 88 17 18 36 33 41 33 6 0 7 -30 3 -75 -26 -284 -204 -474 -516
-550 -91 -22 -317 -31 -418 -16 -202 30 -382 127 -484 262 -71 94 -107 188
-123 322 -7 62 1 71 41 42z m-189 -62 c-3 -10 -5 -2 -5 17 0 19 2 27 5 18 2
-10 2 -26 0 -35z m120 -5 c-3 -7 -5 -2 -5 12 0 14 2 19 5 13 2 -7 2 -19 0 -25z
m155 13 c35 -21 220 -49 456 -71 272 -25 636 -9 800 34 l52 14 0 -29 c0 -49
-50 -157 -96 -208 -182 -203 -633 -277 -910 -150 -61 28 -159 97 -200 141 -63
66 -120 174 -138 261 -8 32 -6 32 36 8z m1535 -33 c-3 -7 -5 -2 -5 12 0 14 2
19 5 13 2 -7 2 -19 0 -25z m-973 -3 c4 -10 -1 -15 -15 -15 -17 0 -18 2 -7 15
16 18 15 18 22 0z m603 9 c-3 -3 -12 -4 -19 -1 -8 3 -5 6 6 6 11 1 17 -2 13
-5z m-720 -10 c-3 -3 -12 -4 -19 -1 -8 3 -5 6 6 6 11 1 17 -2 13 -5z m310 -16
c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m340 16 c-3 -3 -12 -4
-19 -1 -8 3 -5 6 6 6 11 1 17 -2 13 -5z m350 -26 c-3 -7 -5 -2 -5 12 0 14 2
19 5 13 2 -7 2 -19 0 -25z m-434 15 c-7 -2 -19 -2 -25 0 -7 3 -2 5 12 5 14 0
19 -2 13 -5z m514 -65 c-3 -7 -5 -2 -5 12 0 14 2 19 5 13 2 -7 2 -19 0 -25z
m-10 -60 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m-1770 -20 c-3
-8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m1760 -40 c-3 -7 -5 -2 -5
12 0 14 2 19 5 13 2 -7 2 -19 0 -25z m-1546 -75 c13 -16 12 -17 -3 -4 -10 7
-18 15 -18 17 0 8 8 3 21 -13z m1379 -17 c0 -2 -8 -10 -17 -17 -16 -13 -17
-12 -4 4 13 16 21 21 21 13z m-1349 -23 c13 -16 12 -17 -3 -4 -17 13 -22 21
-14 21 2 0 10 -8 17 -17z m1309 -26 c0 -2 -15 -16 -32 -33 l-33 -29 29 33 c28
30 36 37 36 29z m177 -19 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z
m-30 -140 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m-20 -90 c-3
-8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m-827 2 c0 -5 -4 -10 -10
-10 -5 0 -10 5 -10 10 0 6 5 10 10 10 6 0 10 -4 10 -10z m98 5 c-10 -10 -89
-15 -83 -5 3 5 25 10 47 10 23 0 39 -2 36 -5z m712 -125 c0 -11 -4 -20 -9 -20
-5 0 -7 9 -4 20 3 11 7 20 9 20 2 0 4 -9 4 -20z m-1588 -30 c71 -41 159 -53
393 -53 166 0 240 4 300 16 44 10 83 17 88 17 4 0 7 -39 7 -88 0 -91 -8 -115
-55 -154 -122 -104 -501 -135 -785 -66 -184 45 -246 107 -200 203 26 54 86
103 154 127 64 22 58 22 98 -2z m1715 -36 c56 -32 93 -95 93 -157 0 -119 -149
-179 -450 -180 -277 -1 -500 72 -540 178 -6 15 -10 60 -10 102 l0 76 33 -8
c17 -4 50 -11 72 -16 22 -5 121 -12 220 -15 203 -7 357 5 432 35 56 22 91 19
150 -15z m-404 9 c-7 -2 -19 -2 -25 0 -7 3 -2 5 12 5 14 0 19 -2 13 -5z"/>
<path d="M1525 3371 c3 -5 22 -15 43 -22 51 -16 298 -119 405 -168 49 -23 93
-41 98 -41 48 0 -109 77 -378 186 -127 51 -181 66 -168 45z"/>
<path d="M3390 3320 c-30 -10 -162 -51 -292 -91 -138 -42 -238 -77 -238 -84 0
-8 69 9 193 47 105 33 243 76 305 95 61 19 112 39 112 44 0 13 -16 10 -80 -11z"/>
<path d="M1420 3060 c0 -5 6 -10 13 -10 22 0 319 -30 462 -46 77 -8 148 -16
157 -17 9 -1 18 3 20 8 4 12 -99 26 -392 54 -246 24 -260 25 -260 11z"/>
<path d="M1440 2591 c0 -5 7 -15 17 -22 15 -13 15 -12 4 9 -12 23 -21 28 -21
13z"/>
<path d="M3580 1300 c0 -5 5 -10 10 -10 6 0 10 5 10 10 0 6 -4 10 -10 10 -5 0
-10 -4 -10 -10z"/>
</g>
</svg>


'국비지원 Spring프레임워크 > HTML' 카테고리의 다른 글

input 태그  (0) 2020.11.04
레이아웃 FLEX  (0) 2020.11.03
div로 컨텐츠 위치 조정하기  (0) 2020.11.03
Form 태그  (0) 2020.11.03
테이블 만들기 실습  (0) 2020.11.03

+ Recent posts