Get rid of the white background so can see HTML

Discuss SVG code, accessible via the XML Editor.
jjhughes

Get rid of the white background so can see HTML

Postby jjhughes » Fri Jul 23, 2010 1:42 am

Hey, so I've been trying forever to get my SVG to sit on top of my html and not of the white box background on it. All I want is a simple oval circling text (the text in the html).

I've tried doing this on Illustrator and Inkscape, even trying clipping as suggested, but I still get that white box. I've found a few things saying you can get rid of this such as on http://www.alistapart.com/articles/usin ... s-part-ii/ yet they never specifically say HOW.

Am I just in search for the Holy Grail?

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Get rid of the white background so can see HTML

Postby brynn » Sun Jul 25, 2010 5:39 am

Well, for one thing, SVG is not fully compatible with HTML (although 'compatible' might not be quite the right word). Also, Internet Explorer doesn't display SVG images. So if what you're doing absolutely requires SVG, then for now, yes, grail :mrgreen:

But I'm assuming that you've exported your SVG to PNG (or GIF, or any other that displays transparency). Because that's what you're looking for -- a fully transparent fill for your oval. Just make your oval as you wish, then open Object menu > Fill and Stroke > Fill tab > X (first icon at top of dialog). This removes the fill, and since Inkscape's canvas (or background) is transparent by default, you should now have what you need. (Note that the typical checkboard pattern used by raster graphics to indicate transparency, is not used by Inkscape. So it will still look white, but will display transparent wherever you use it.) If you're finished, click File menu > Export Bitmap. This will bring up an Export Bitmap dialog, with lots of settings to choose from. They're pretty self-explanatory, but just make sure the dimensions are right, and don't forget to where you've exported. There you will find a PNG version of your image. If you need GIF or other, you'll need to use File menu > Save As. But I recommend PNG, due to the tiny filesize, which is often desired for html/web displays. (Don't use Cairo PNG or you'll lose your transparency!)

I hope this helps, but if not, just reply back with info, and we'll try again :D

PS -- :oops: Oops, just noticed you've posted this in the SVG / XML forum, which must mean that you're looking for the proper code. So I'm sorry that I don't know much about XML. But if you draw the image, the XML will be automatically generated for you (Edit menu > XML Editor). Otherwise, hang in there, and someone else will be along to help :D


Return to “SVG / XML Code”