SVG Banner Maker

How the urge to make this site came up.

In the process of developing the sliding banner feature for this portfolio site of mine as you can see right from your entry, one of the main criterias is that the banners be scalable and lossless so svg images is the way to go. However, the most famous site out there to make banners which is Canvas requires a paid pro account so that design can be exported to svg format. I tried to find alternative sites also but none really focuses on banner-making specifically. So I say "f**** it, I'm making my own" and two weeks is spents on making this site.

So what are the highlighted features ?

I would not call the feature that special but I tried to make the ux as similar to the those famous sites, like canvas and figma, as possible which include might-seem-small but really vital features like

1. Auto snapping object on movement

• Drag any object in the design canvas, alignment line will automatically shows up and snap the object towards it.

2. Auto snapping object on resizing

• Similar to snapping object on movement above, object's edge automatically snaps to alignment line on being dragged.

3. In-depth path editor similar to that of photoshop

• If backround elements is not to your satisfaction. The canvas allows you to edit those elements however you desire like adjusting the curvature, change fill color of the element and background color of main canvas.

• Before edit

• After edit

4. Font export

For the banner to be displayed correctly on browser. Fonts used in the design will be exported directly into the svg image code.

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 900 600" xml:space="preserve">
  
                      <style type="text/css">
                        @font-face {
                          font-family: 'Ubuntu';
                          src: url('https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgo6eAT3v02QFg.ttf') format('woff2');
                          font-weight: normal;
                          font-style: normal;
                        }
                        
                        @font-face {
                          font-family: 'Ubuntu';
                          src: url('https://fonts.gstatic.com/s/ubuntu/v20/4iCu6KVjbNBYlgoKeg7znUiAFpxm.ttf') format('woff2');
                          font-weight: normal;
                          font-style: italic;
                        }
                        
                        @font-face {
                          font-family: 'Ubuntu';
                          src: url('https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvTt2aMH4V_gg.ttf) format('woff2');
                          font-weight: bold;
                          font-style: normal;
                        }
                      </style>

<desc>Created with Fabric.js 5.5.2</desc>
<defs>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="#001220"></rect>
<g transform="matrix(1 0 0 1 450 492.46)" id="visual"  >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(250,114,104); fill-rule: nonzero; opacity: 1;"  transform=" translate(-450, -492.46)" d="M 0 424 L 21.5 419 C 43 414 86 404 128.8 400.2 C 171.7 396.3 214.3 398.7 257.2 406.2 C 300 413.7 343 426.3 385.8 420.7 C 428.7 415 471.3 391 514.2 385.3 C 557 379.7 600 392.3 642.8 402 C 685.7 411.7 728.3 418.3 771.2 418.3 C 814 418.3 857 411.7 878.5 408.3 L 900 405 L 900 601 L 878.5 601 C 857 601 814 601 771.2 601 C 728.3 601 685.7 601 642.8 601 C 600 601 557 601 514.2 601 C 471.3 601 428.7 601 385.8 601 C 343 601 300 601 257.2 601 C 214.3 601 171.7 601 128.8 601 C 86 601 43 601 21.5 601 L 0 601 Z" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 450 499.41)" id="visual"  >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(239,95,103); fill-rule: nonzero; opacity: 1;"  transform=" translate(-450, -499.41)" d="M 0 438 L 21.5 440.5 C 43 443 86 448 128.8 440.8 C 171.7 433.7 214.3 414.3 257.2 404.8 C 300 395.3 343 395.7 385.8 404.7 C 428.7 413.7 471.3 431.3 514.2 442 C 557 452.7 600 456.3 642.8 459 C 685.7 461.7 728.3 463.3 771.2 459.3 C 814 455.3 857 445.7 878.5 440.8 L 900 436 L 900 601 L 878.5 601 C 857 601 814 601 771.2 601 C 728.3 601 685.7 601 642.8 601 C 600 601 557 601 514.2 601 C 471.3 601 428.7 601 385.8 601 C 343 601 300 601 257.2 601 C 214.3 601 171.7 601 128.8 601 C 86 601 43 601 21.5 601 L 0 601 Z" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 450 531)" id="visual"  >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(227,76,103); fill-rule: nonzero; opacity: 1;"  transform=" translate(-450, -531)" d="M 0 474 L 21.5 473.7 C 43 473.3 86 472.7 128.8 475.5 C 171.7 478.3 214.3 484.7 257.2 483.2 C 300 481.7 343 472.3 385.8 470.2 C 428.7 468 471.3 473 514.2 477 C 557 481 600 484 642.8 483.2 C 685.7 482.3 728.3 477.7 771.2 473.3 C 814 469 857 465 878.5 463 L 900 461 L 900 601 L 878.5 601 C 857 601 814 601 771.2 601 C 728.3 601 685.7 601 642.8 601 C 600 601 557 601 514.2 601 C 471.3 601 428.7 601 385.8 601 C 343 601 300 601 257.2 601 C 214.3 601 171.7 601 128.8 601 C 86 601 43 601 21.5 601 L 0 601 Z" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 450 552.14)" id="visual"  >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(213,56,103); fill-rule: nonzero; opacity: 1;"  transform=" translate(-450, -552.14)" d="M 0 511 L 21.5 509.2 C 43 507.3 86 503.7 128.8 503.3 C 171.7 503 214.3 506 257.2 513 C 300 520 343 531 385.8 534.7 C 428.7 538.3 471.3 534.7 514.2 527 C 557 519.3 600 507.7 642.8 507 C 685.7 506.3 728.3 516.7 771.2 523.2 C 814 529.7 857 532.3 878.5 533.7 L 900 535 L 900 601 L 878.5 601 C 857 601 814 601 771.2 601 C 728.3 601 685.7 601 642.8 601 C 600 601 557 601 514.2 601 C 471.3 601 428.7 601 385.8 601 C 343 601 300 601 257.2 601 C 214.3 601 171.7 601 128.8 601 C 86 601 43 601 21.5 601 L 0 601 Z" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 450 565)" id="visual"  >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(198,35,104); fill-rule: nonzero; opacity: 1;"  transform=" translate(-450, -565)" d="M 0 529 L 21.5 535.8 C 43 542.7 86 556.3 128.8 557.8 C 171.7 559.3 214.3 548.7 257.2 548.3 C 300 548 343 558 385.8 562 C 428.7 566 471.3 564 514.2 557.2 C 557 550.3 600 538.7 642.8 536.2 C 685.7 533.7 728.3 540.3 771.2 543.5 C 814 546.7 857 546.3 878.5 546.2 L 900 546 L 900 601 L 878.5 601 C 857 601 814 601 771.2 601 C 728.3 601 685.7 601 642.8 601 C 600 601 557 601 514.2 601 C 471.3 601 428.7 601 385.8 601 C 343 601 300 601 257.2 601 C 214.3 601 171.7 601 128.8 601 C 86 601 43 601 21.5 601 L 0 601 Z" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 450 225.09)" style=""  >
		<text xml:space="preserve" font-family="Ubuntu" font-size="56.92171175103199" font-style="normal" font-weight="bold" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,113,144); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-290.64" y="17.88" >New product out now</tspan></text>
</g>
<g transform="matrix(1 0 0 1 450 300)" style=""  >
		<text xml:space="preserve" font-family="Ubuntu" font-size="73.89581439253898" font-style="normal" font-weight="bold" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,113,196); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-327.32" y="23.21" >SVG Banner Maker</tspan></text>
</g>
</svg>

Some final thoughts

Try my site and should you have any new feature that you find interesting, give a me ping through [email protected]. I'll have a look and may as well implement it into the site and your name will be honored prominently in the landing page of svgbanner.art.