What is the most compatible vector image type for browsers?

[phpjayx]

I've read some things that SVG files are fairly compatible with browsers. I attempted to implement them in the CSS code like below, of course swapping the .pdf to .svg, but at least in Firefox or my IPAD, nothing showed up. Would I need to implement it in another way? Some extra plugin needed?

 

How about other vector image options, what is the most compatible type? The .PDF option seems to work great on my Apple products, but no where else....

 

Or any combination of plugins or other tools that would help one of these other file types be successfull?

 

.myButton1 {

background:url(/Button1.pdf) no-repeat;

cursor:pointer;

width: 50px;

height: 50px;

border: none;

 

}

[phpjayx]

Well no answers....

 

but since I was only able to get .PDF images to work in Safari, I ended up just doing a browswer check... And load up the quality .PDF images when using Safari. If I discover more image types that work with other browsers I'll add those as I find them.

 

I can't beleive more browsers don't support some standard Vector image like .PDF

Edited January 17, 2013 by phpjayx

[Christian F.]

PDF is not a vector image, it's a Portable Document Format file. Its abilities to save an SVG is just part of what it does, just like the ability to save images in ODF/DOC files is just a part of what those formats does.

I recommend using the proper SVG format for storing SVG images, and you'll find that a lot more browsers will work as intended then.

[cpd]

You can also use Javascript libraries to manipulate the images however you like.

 

http://raphaeljs.com/