Рисуем SVG своими руками и вставляем в html⁠⁠

Ссылка на страничку

Сделал страничку, позволяющую создавать cvg пути, для простой вставки в html код. Похожий на вставку иконок у bootstrap:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-android2" viewBox="0 0 16 16"> <path d="m10.213 1.471.691-1.26c.046-.083.03-.147-.048-.192-.085-.038-.15-.019-.195.058l-.7 1.27A4.832 4.832 0 0 0 8.005.941c-.688 0-1.34.135-1.956.404l-.7-1.27C5.303 0 5.239-.018 5.154.02c-.078.046-.094.11-.049.193l.691 1.259a4.25 4.25 0 0 0-1.673 1.476A3.697 3.697 0 0 0 3.5 5.02h9c0-.75-.208-1.44-.623-2.072a4.266 4.266 0 0 0-1.664-1.476ZM6.22 3.303a.367.367 0 0 1-.267.11.35.35 0 0 1-.263-.11.366.366 0 0 1-.107-.264.37.37 0 0 1 .107-.265.351.351 0 0 1 .263-.11c.103 0 .193.037.267.11a.36.36 0 0 1 .112.265.36.36 0 0 1-.112.264Zm4.101 0a.351.351 0 0 1-.262.11.366.366 0 0 1-.268-.11.358.358 0 0 1-.112-.264c0-.103.037-.191.112-.265a.367.367 0 0 1 .268-.11c.104 0 .19.037.262.11a.367.367 0 0 1 .107.265c0 .102-.035.19-.107.264ZM3.5 11.77c0 .294.104.544.311.75.208.204.46.307.76.307h.758l.01 2.182c0 .276.097.51.292.703a.961.961 0 0 0 .7.288.973.973 0 0 0 .71-.288.95.95 0 0 0 .292-.703v-2.182h1.343v2.182c0 .276.097.51.292.703a.972.972 0 0 0 .71.288.973.973 0 0 0 .71-.288.95.95 0 0 0 .292-.703v-2.182h.76c.291 0 .54-.103.749-.308.207-.205.311-.455.311-.75V5.365h-9v6.404Zm10.495-6.587a.983.983 0 0 0-.702.278.91.91 0 0 0-.293.685v4.063c0 .271.098.501.293.69a.97.97 0 0 0 .702.284c.28 0 .517-.095.712-.284a.924.924 0 0 0 .293-.69V6.146a.91.91 0 0 0-.293-.685.995.995 0 0 0-.712-.278Zm-12.702.283a.985.985 0 0 1 .712-.283c.273 0 .507.094.702.283a.913.913 0 0 1 .293.68v4.063a.932.932 0 0 1-.288.69.97.97 0 0 1-.707.284.986.986 0 0 1-.712-.284.924.924 0 0 1-.293-.69V6.146c0-.264.098-.491.293-.68Z"/> </svg>

Суть проста, рисуете что душе угодно и копируете получившийся код себе на страницу.

<svg id="drawing-canvas" width="500" height="500" >

<path stroke="#000000" stroke-width="1" fill="none" d="M 65,55 L 67,58 L 67,61 L 68,64 L 69,67 L 69,68 L 69,70 L 69,71 L 69,72 L 69,70 L 69,67 L 69,64 L 67,61 L 65,54 L 63,51 L 61,49 L 59,48 L 58,47 L 55,47 L 53,47 L 50,47 L 47,49 L 45,51 L 43,54 L 43,56 L 41,66 L 41,68 L 41,76 L 41,79 L 41,87 L 41,91 L 41,97 L 41,101 L 42,106 L 44,109 L 46,113 L 50,115 L 53,117 L 56,118 L 60,118 L 66,115 L 71,111 L 76,107 L 79,104 L 80,101 L 81,97 L 81,96 L 81,95"></path><path stroke="#000000" stroke-width="1" fill="none" d="M 84,80 L 85,79 L 86,80 L 86,84 L 86,87 L 86,95 L 86,97 L 86,101 L 86,103 L 86,106 L 86,108 L 86,109 L 85,109 L 84,108 L 84,106 L 84,102 L 84,95 L 84,90 L 84,84 L 84,80 L 84,78 L 84,76 L 84,75 L 86,75 L 89,75 L 94,76 L 97,77 L 99,78 L 100,78 L 101,80 L 102,81 L 103,83 L 104,86 L 104,90 L 104,92 L 104,96 L 104,101 L 104,105 L 104,108 L 104,111 L 106,113 L 107,115 L 109,117 L 111,117 L 112,117 L 114,117 L 118,117 L 120,117 L 124,117 L 128,115 L 129,115"></path><path stroke="#000000" stroke-width="1" fill="none" d="M 129,107 L 129,105 L 131,103 L 132,102 L 134,100 L 135,99 L 136,97 L 137,95 L 137,92 L 137,90 L 137,86 L 137,85 L 136,84 L 135,83 L 134,83 L 132,82 L 129,82 L 128,84 L 128,85 L 126,88 L 126,91 L 126,96 L 126,99 L 126,102 L 126,104 L 126,106 L 126,107 L 126,109 L 126,110 L 127,111 L 128,111 L 131,111 L 133,111 L 134,111 L 135,110 L 137,109 L 138,109 L 139,109 L 140,108 L 142,107 L 143,105 L 144,104 L 145,100 L 145,99 L 145,96 L 145,94 L 146,93 L 146,91 L 146,90 L 146,89 L 146,88 L 147,87 L 147,90 L 147,92 L 147,94 L 147,98 L 148,102 L 148,104 L 148,108 L 148,109 L 149,110 L 149,111 L 150,112 L 151,112 L 153,112 L 154,112 L 156,112 L 158,112 L 159,111 L 160,110 L 161,109 L 163,107 L 164,106 L 164,104 L 164,103 L 164,101 L 164,100 L 164,99 L 164,98 L 163,97 L 163,95 L 163,94 L 163,96 L 163,98 L 164,102 L 164,105 L 165,106 L 166,107 L 167,108 L 168,108 L 170,108 L 171,108 L 175,111 L 179,115 L 181,119 L 185,126 L 185,128 L 185,129 L 185,131 L 185,132 L 184,136 L 182,138 L 177,140 L 177,141 L 176,141"></path><path stroke="#000000" stroke-width="1" fill="none" d="M 183,91 L 183,93 L 184,94 L 185,96 L 187,100 L 188,101 L 190,106 L 191,108 L 193,110 L 195,110 L 197,110 L 200,110 L 201,110 L 202,109 L 203,108 L 203,105 L 203,103 L 203,100 L 203,98 L 203,97 L 203,96 L 203,95 L 203,96 L 203,98 L 205,100 L 205,103 L 207,107 L 209,110 L 210,112 L 211,112 L 212,112 L 214,113 L 215,113 L 216,113 L 217,113 L 218,113 L 219,113 L 220,113"></path><path stroke="#000000" stroke-width="1" fill="none" d="M 227,101 L 227,102 L 227,104 L 227,108 L 227,111 L 227,113 L 227,116 L 229,119 L 231,119 L 234,119 L 236,115 L 238,111 L 241,106 L 242,102 L 242,100 L 242,99 L 242,98 L 240,98 L 237,96 L 233,95 L 230,94 L 225,94 L 221,94 L 219,94 L 218,95 L 218,96 L 218,99 L 220,101 L 222,103 L 225,103"></path><path stroke="#000000" stroke-width="1" fill="none" d="M 238,94 L 238,95 L 239,97 L 239,100 L 241,104 L 241,105 L 242,107 L 243,109 L 244,111 L 245,111 L 246,111 L 249,111 L 254,111 L 256,111 L 257,111 L 258,111 L 259,111 L 260,110 L 262,109 L 262,108 L 263,107 L 265,105"></path><path stroke="#000000" stroke-width="1" fill="none" d="M 273,89 L 273,90 L 273,92 L 273,98 L 273,102 L 272,107 L 271,111 L 270,113 L 270,111 L 270,107 L 270,103 L 270,102"></path><path stroke="#000000" stroke-width="1" fill="none" d="M 271,88 L 272,88 L 273,88 L 275,90 L 275,92 L 277,94 L 277,98 L 279,101 L 279,104 L 279,108 L 281,110 L 283,114 L 283,115 L 284,115 L 285,115 L 285,114 L 285,112 L 285,106"></path><path stroke="#000000" stroke-width="1" fill="none" d="M 289,89 L 291,94 L 292,97 L 292,103 L 293,108 L 293,112 L 294,116 L 295,117 L 295,118 L 296,119 L 297,120 L 299,121 L 299,122 L 302,122 L 305,124 L 308,124 L 311,122 L 311,120 L 311,118 L 311,113 L 311,109 L 311,108 L 310,106 L 309,105 L 308,105 L 307,105 L 306,105 L 304,105 L 303,105 L 302,105 L 300,105 L 299,105 L 298,105 L 298,106 L 297,108 L 296,108"></path><path stroke="#000000" stroke-width="1" fill="none" d="M 313,87 L 314,87 L 315,89 L 316,93 L 318,99 L 320,105 L 320,110 L 320,113 L 320,117 L 320,118 L 320,119 L 321,121 L 322,122 L 322,121 L 322,116 L 321,113 L 320,110 L 320,108 L 320,106 L 320,105 L 321,105 L 323,105 L 324,105 L 325,105 L 326,105 L 327,105 L 327,104 L 327,102 L 327,101 L 327,99 L 327,95 L 327,91 L 327,89 L 327,90 L 330,96 L 331,102 L 331,108 L 331,111 L 331,115 L 332,116"></path><path stroke="#000000" stroke-width="1" fill="none" d="M 345,96 L 345,97 L 345,100 L 345,103 L 347,106 L 347,108 L 347,110 L 348,111 L 349,112 L 350,112 L 351,112 L 352,112 L 353,112 L 354,112 L 355,112 L 355,110 L 356,109 L 358,105 L 358,104 L 358,103 L 358,101 L 358,99 L 358,98 L 358,97 L 357,95 L 356,93 L 355,91 L 354,90 L 353,89 L 352,89 L 351,89 L 350,89 L 349,89 L 348,90 L 348,91 L 348,92 L 345,96"></path><path stroke="#000000" stroke-width="1" fill="none" d="M 153,174 L 153,176 L 151,182 L 149,190 L 148,192 L 148,196 L 150,201 L 153,205 L 157,208 L 166,208 L 173,208 L 180,205 L 187,199 L 189,194 L 190,189 L 190,186 L 189,182 L 186,180 L 184,178 L 179,176 L 174,174 L 172,174 L 171,174 L 170,174 L 163,174 L 155,176 L 150,179 L 148,181"></path><path stroke="#000000" stroke-width="1" fill="none" d="M 193,183 L 193,184 L 193,186 L 192,188 L 191,192 L 190,196 L 188,200 L 187,205 L 185,210 L 184,215 L 183,219 L 181,224 L 178,232 L 178,235 L 176,238 L 174,239 L 171,243 L 169,244 L 167,245 L 166,245 L 164,245 L 161,245 L 159,245 L 155,243 L 153,241 L 152,239 L 152,237 L 152,232 L 152,227 L 155,223 L 157,220 L 159,217 L 162,217 L 165,216 L 169,216 L 176,216 L 181,216 L 187,216 L 192,216 L 198,215 L 199,214 L 201,213 L 202,212 L 203,212 L 205,209 L 208,206 L 211,203 L 211,202 L 211,201 L 211,200 L 209,201 L 208,203 L 207,206 L 206,211 L 206,214 L 206,216 L 206,217 L 208,217 L 210,217 L 214,217 L 218,215 L 224,212 L 228,208 L 230,206 L 235,202 L 237,200 L 239,198 L 241,196 L 243,192 L 243,190 L 243,189 L 243,187 L 243,186 L 242,184 L 242,181 L 242,179 L 242,180 L 242,183 L 242,184 L 242,188 L 242,193 L 242,198 L 242,203 L 242,206 L 243,208 L 244,208 L 244,209 L 245,210 L 247,210 L 248,211 L 250,211 L 252,211 L 253,211 L 255,210 L 257,210"></path><path stroke="#000000" stroke-width="1" fill="none" d="M 266,201 L 266,202 L 267,203 L 267,205 L 269,208 L 271,208 L 273,208 L 276,208 L 278,208 L 280,208 L 284,207 L 288,204 L 294,202 L 297,200 L 299,197 L 301,194 L 302,193 L 302,190 L 302,188 L 302,185 L 302,180 L 300,175 L 299,172 L 298,171 L 296,170 L 295,169 L 292,169 L 291,169 L 290,169 L 289,169 L 289,170 L 289,175 L 289,176 L 289,181 L 291,185 L 293,187 L 296,189 L 297,190 L 298,191 L 301,194 L 302,195 L 304,195 L 306,196 L 307,197 L 309,197 L 311,198 L 312,198 L 313,198 L 314,198 L 315,199"></path><path stroke="#ff8040" stroke-width="4" fill="none" d="M 32,299 L 33,300 L 33,304 L 33,310 L 33,315 L 33,321 L 33,326 L 33,331 L 33,337 L 33,342 L 33,348 L 33,353 L 33,360 L 33,363 L 33,367 L 33,371 L 33,374 L 33,377 L 33,380 L 32,384 L 31,386 L 31,390 L 28,395 L 28,400 L 27,406 L 27,411 L 27,412 L 27,414 L 27,416 L 27,417 L 27,418 L 27,419 L 27,421 L 27,422 L 27,423"></path><path stroke="#ff8040" stroke-width="4" fill="none" d="M 31,298 L 30,299 L 30,300 L 34,300 L 40,300 L 45,300 L 52,300 L 56,300 L 60,300 L 62,302 L 64,304 L 68,308 L 71,312 L 72,316 L 73,320 L 75,326 L 75,332 L 75,336 L 75,340 L 75,344 L 75,348 L 73,351 L 69,353 L 65,356 L 57,358 L 50,358 L 45,360 L 43,360 L 41,360 L 36,360 L 33,360 L 32,360 L 33,360 L 35,360 L 38,360"></path><path stroke="#ff8040" stroke-width="4" fill="none" d="M 98,343 L 99,343 L 99,346 L 99,351 L 99,360 L 99,367 L 98,372 L 98,379 L 98,382 L 98,383 L 98,386 L 98,387 L 98,388 L 97,388 L 96,388 L 95,388"></path><path stroke="#ff8040" stroke-width="4" fill="none" d="M 103,304 L 103,305 L 103,306"></path><path stroke="#ff8040" stroke-width="4" fill="none" d="M 154,304 L 154,305 L 154,307 L 154,314 L 152,324 L 152,332 L 151,343 L 148,357 L 145,367 L 143,373 L 141,380 L 141,385 L 139,391 L 139,393 L 138,395 L 138,396 L 137,395 L 137,390"></path><path stroke="#ff8040" stroke-width="4" fill="none" d="M 152,352 L 152,351 L 154,350 L 154,349 L 157,347 L 159,346 L 163,345 L 165,343 L 170,341 L 178,337 L 185,333 L 193,329 L 196,327 L 198,325 L 199,323 L 200,321 L 202,318 L 202,314 L 203,311 L 203,309 L 203,308 L 203,307 L 203,306 L 203,305"></path><path stroke="#ff8040" stroke-width="4" fill="none" d="M 151,348 L 153,348 L 156,350 L 161,355 L 165,357 L 167,358 L 172,363 L 180,373 L 183,376 L 194,394 L 195,394"></path><path stroke="#ff8040" stroke-width="4" fill="none" d="M 235,330 L 235,332 L 233,339 L 232,345 L 230,351 L 230,355 L 230,360 L 230,363 L 230,366 L 230,367 L 231,370 L 233,372 L 234,373 L 236,376 L 241,380 L 244,380 L 248,380 L 251,380 L 254,380 L 257,380 L 259,380 L 262,380 L 264,377 L 266,375 L 267,373 L 269,370 L 269,367 L 269,362 L 269,358 L 269,350 L 269,345 L 269,341 L 269,338 L 267,334 L 264,331 L 260,329 L 253,328 L 246,328 L 240,328 L 237,328 L 236,328 L 229,329 L 226,331 L 222,332 L 220,333 L 220,336 L 220,338"></path><path stroke="#ff8040" stroke-width="4" fill="none" d="M 274,331 L 273,332 L 273,333 L 272,335 L 272,338 L 272,341 L 272,344 L 272,345 L 272,347 L 272,353 L 272,356 L 272,360 L 272,363 L 272,366 L 273,368 L 277,373 L 278,375 L 280,377 L 282,378 L 283,379 L 284,379 L 285,379 L 286,379 L 287,379 L 289,379 L 290,379"></path><path stroke="#ff8040" stroke-width="4" fill="none" d="M 318,298 L 318,299 L 320,304 L 320,319 L 320,326 L 320,333 L 320,337 L 320,344 L 320,351 L 320,356 L 320,361 L 320,364 L 320,367 L 320,368 L 320,369 L 320,370 L 320,373 L 320,376 L 320,377 L 320,375 L 320,372 L 320,366 L 320,361 L 320,355 L 320,350 L 320,346 L 320,342 L 321,338 L 322,335 L 323,333 L 325,331 L 325,329 L 326,329 L 327,329 L 329,327 L 333,327 L 336,327 L 339,327 L 342,327 L 345,329 L 349,333 L 352,335 L 354,339 L 355,342 L 357,347 L 358,351 L 359,354 L 359,355 L 359,357 L 359,359 L 358,362 L 349,369 L 344,371 L 343,372 L 338,373 L 332,373 L 327,373 L 323,373 L 322,373 L 321,373"></path><path stroke="#ff8040" stroke-width="4" fill="none" d="M 379,329 L 379,330 L 379,336 L 379,341 L 379,347 L 379,354 L 379,360 L 380,365 L 381,369 L 384,373 L 385,375 L 387,377 L 389,377 L 391,377 L 394,377 L 398,377 L 404,377 L 405,377 L 407,377 L 409,377 L 410,377 L 412,375 L 415,372 L 417,366 L 420,360 L 420,355 L 420,350 L 420,344 L 423,340 L 423,337 L 423,334 L 423,332 L 423,330 L 424,329 L 424,328 L 425,326 L 425,325 L 425,324"></path></svg>