Thank you. You can help us to promote this website so that we can get more traffic which means that our website will be more lucrative to sponsors and advertisers. Tell your friends about our website, post on Facebook or Twitter, link us at your website or blog, follow us on Twitter or become a fan on Facebook. Just spread the word.
Of course we like donations too and when you want to advertise on our website you can send us an offer to email@example.com. If this website will get enough traffic and will generate some money we are more willing to offer you better support, improvements and even more features!
SVG stands for Scalable Vector Graphics and is the standard for vector graphics for the World Wide Web (also known as "the internet"). SVG is the web alternative to flash graphics. Most people will point out that it's HTML5. But it's not really correct.
As I stated before, SVG is a vector graphics format. HTML5 Canvas produces raster graphics.
If you want to know the differences between vector and raster graphics exactly you can watch following YouTube video (please note that raster graphics are mentioned there as bitmap graphics):
But here is the short cut: Vector graphics like SVG are scalable and nearly uncompressed. So you can scale a SVG graphic as big as you want without getting blocky images. You can't do this with raster graphics like PNG and JPG.
But raster graphics are better suited for displaying complex organic shapes and pictures.
It depends. If you want to use animations you can only use animated GIF or SVG as your banner format. Although SVG is uncompressed and delivers the best quality it has its disadvantages. The first disadvantage is that you get a lot of files and a big file size if you have text and a background image in your banner. It is also very complicated to embed your banner in your website and you can't upload it on an imagehoster or use it on Facebook or Myspace.
The browser support of SVG is also not very good at the moment. The performance is still poor in most browsers. So if you have a SVG banner with lots of filters it could slow down your whole website. But the browser support gets better and we can hope that SVG will rule the web as the vector graphics format #1.
Because of the shortcomings of SVG, we have introduced our SVG to GIF conversion service. GIF is a good choice if you have animated graphics as this format can be widely used, for instance in forums, Tumblr, etc. without any issues.
If you have a banner without animations you should choose PNG or JPG. Both formats are fully supported by all browsers. PNG has the best quality but when it comes to having a background image in your browser JPG beats PNG in terms of file size. So if you are concerned about some KB space you should choose JPG in this case.
Using JPG for a banner with rounded corners is not recommended because JPG doesn't support transparency. There will be created a white background in the spaces of the rounded corners which will be looking ugly if you put your banner on a website where you have (for instance) a blue background.
After generating the banner you should download the SVG Zip folder. The folder contains the generated SVG file. If you applied text elements to your banner it also contains folders which are named after the used fonts. The necessary font files are saved in these folders. If you have used a background image you will also get a file of the cropped background image in your SVG folder. You need all these files to display the banner on your website properly.
Unzip the SVG folder and put all these files in any directory of your website. To display your SVG banner in a HTML page you can use following HTML elements: <object>, <embed>, <img> and <iframe>. We recommend using the <object> element.
The code to display your SVG banner with the <object> element should look something like this:
You can combine all types of animations so your text and stamp elements can move in different interesting ways. However you can't combine Fade In with Rotation. If you apply both animations to an element the rotation animation will not work.
The animations will be displayed correctly in Firefox and Chrome. Safari 5.1.7 will also display nearly all animations correctly. But the combination of movement and rotation animation will be shown incorrectly. There is no animation support in Internet Explorer.
A banner which is bigger than 728 x 728 pixels isn't a banner anymore. It's more of a background picture or something else. But the real reason for this restriction is that a bigger size would slow down this web site and the banner maker would become hardly usable.
There is no possibility to edit your banner with this web application online yet. But you can download your SVG and edit it with a desktop vector graphics application like Adobe Illustrator or Inkscape.
Make sure that you install the delivered fonts of your banner on your operating system before you start exporting your banner with one of these applications. Inkscape is a free open source program which can be downloaded here: http://inkscape.org.
If you can't see the upload button in the background menu, make certain that you have installled and enabled Flash in your browser.
If you have problems with dragging stamps or texts or if you see any other bugs please write me a message to firstname.lastname@example.org with the specified problem and the browser you were using and I’ll try to fix it as soon as possible.
There are several reasons why this website can slow down and some lags can occur when you are dragging an element on your banner or even when you are opening an accordion. The most typical reason for this behavior is the use of too many filters on your banner elements or background or using complex filters like Displacement or Specular Lighting. The larger the elements you are applying filters to are, the worse the lagging gets.
To avoid laggy or jerky movements, please apply all filters after arranging your stamp and text elements. Adding filters should be one of your last steps before generating the banner.
Again, it's the filters. If you apply too many filters on a text or stamp element or using complex filters like Displacement or Specular Lighting, jerky movements in the animations can occur. To avoid it you should find an optimum balance between applied filters and animations.
This web application is built on SVG. Microsoft used their own similar technology to display vector graphics in their web browser Internet Explorer till version 8. The Internet Explorer 9 has an okay but unsatisfying SVG support. The Internet Explorer 10 has a better SVG support but hasn't been tested with this web application yet. It will be tested when IE10 will be available for Windows 7.
Apple Safari has a quite good SVG implementation but filters are not supported, some functions don’t seem to fire and some SVG elements are displayed wrong. Some bugs could be fixed but it would be very time consuming and it would not be efficient to fix this web application for a browser which is only used by 4 % of all internet users worldwide.
Date of Last Update. These Frequently Asked Questions were last updated on July 10, 2014.