Can I use Vector images in a website?

Let me Google that for you.

What are “scalable vector graphics: graphics for the web”?

@frdelrosario “scalable vector graphics” is a term used in print. It has no equivalent counterpart in the web world.

Vector graphics are scalable to enormous sizes with no loss in quality. And they also translate well to small sizes with great integrity.

@Link No. I have no idea how you would use a vector image in a web site. The closest I think you could come to that is a scalable flash site. You would have to rasterize your vector into photoshop or save as pdf and open photoshop, then save to web or jpg. That level of flash design is in great need of a storyboard.

you can use vector graphics in a website. They would have to be Flash though. Unless you know how to code up an .svg file.

You can use vector graphics in the design of a website (as created in Adobe Illustrator or Flash). However they will only remain in their vector form so long as you are using them within those programs (.ai or .fla file-types).

These days, you can even place or drag .ai files into a Photoshop document (.psd) to further your website design – and the .ai file will live on its own layer as an smart vector object (it’ll maintain it’s crispness and scalability and still be editable through Illustrator).

ANYWAY…once you start moving your graphics and images into a program like Adobe Dreamweaver or want to upload them to some web-based site creation tool, they need to be outputted as .jpg, .gif or .png. All three of these file-types are pixel-based (as opposed to vector) and the conversion process will therefore rasterize (turn into pixels) any vector images contained in your design or graphics.

So…
During production and design: Yes
To output/upload to the final site: No

Vector graphics can only output in their original form in print

also, note that if you have a vector graphic that was originally designed for print (a logo for example), it’s most likely in CMYK color format. It will convert to an RGB profile when turned into a .jpg, .gif, or .png and you may see some color shift and have to adjust for that.

You can use the open standard Scalable Vector Graphics. You can even embed the images themselves into your web pages, but I suppose you can also link to them.

I’m not sure which vector graphics applications allow exporting to SVG, but at least Inkscape does.

Modern, quality browsers support SVG, but Internet Explorer may still have some problems with complicated images. IE 9 should be much better in this regard.

Thanks to all!

So basically it’s best to stick with jpeg, or png right? I figured vector graphics would make sense because there’s no loss of quality. Maybe in a perfect world.

or .GIF. Watch out that your .PNGs don’t get to big for easy loading. Both .GIF and .PNG do not degrade and they are the forms most usually used for images with large flat areas of color, and most frequently to replace vector images.

Also…older versions of Internet Explorer don’t support .png.

What’s worse is the viewer won’t see a broken link symbol (like Flash), the image will simply not appear on your website.

All modern browsers display them with no trouble however.

@cprevite Wow, then you’re using a really old version of IE (like, v. 5?). IE6 has problems with transparency, but other than that it can display .pngs just fine. And it’s about time people dropped support for IE6, like Microsoft did.

But yeah, SVG has its place, but if you already know at what size your images will be displayed then you’re better off using PNG.