Inkscape files for the Web


I am trying to draw a small image and then add some text to act as a logo for my web site.

Everything looks great in Inkscape, certainly an excellent program.

However !!

I exported the file and created a PNG file, which I then tried to include on a trial web page.

I created a dark background and placed the image on top, but oh dear !!! it is very badly pixelated. Just as bad as when I tried to make text using the bitmap program.

What is the best way to produce a logo and text, on a transparent background ??

Or would I be better off having a colored background in Inkscape, then try to save as a jpg file.

Any help would be greatly appreciated :slight_smile:

Inkscape is a vector program so maybe it is how you are doing the conversion from Vector to Bitmap it will not be the PNG format at fault. I assume the image you are using is of a similar dimension to the final image as re-sampling/sizing can alter quality.

Hi “xhrmlcoder” thanks for your reply

I was actually trying to make a header in the wrong way …

I had drawn an image, then put some text next to it, all saved on a transparent background. This image was then placed on a coloured web background in the html.

After trying a few things, I made the whole header section, all in Inkscape. I set up a new page to the required size, 960 x 120px, set up a gradient, with background color as required, before adding a small image and the text on 3 separate layers. Then I saved this as a png file and all worked well.

See here

(Ignore the stroke but the quality of the writing looks OK to me … no more dots

No problem, glad it got sorted.