I'm trying to figure out how to use SVG files instead of .png/.jpg/.gif files. So far I've seen a few methods that involve putting the actual content of the .svg file in the xhtml page, and using javascript to set it as a background of an object, but surely there must be an easier way, right? Since apparently <img src="graphic.svg" /> doesn't seem to work, how else can I display fairly complex svg files on my website without spitting out the source of the file in all of my xhtml files? (please don't bring up browser compatability, I hope to stay standard with this, but also have my page display .png files for browsers that don't support .svg, but displaying .svg files in an xhtml file is what I need to learn first)
Should work. If they dont have SVG suppot you can also direct them to: http://www.adobe.com/svg/viewer/install/auto/
Well, oddly enough that works to an extent in Firefox, and basically interrupts the page loading in IE. (meaning even with the adobe svg viewer, the only things on the page are the SVG objects...) Opera stops at loading the first image, meaning you only get to see one of them. Oh well, looks like I won't be using SVG as a background just yet. It looks like more work than its worth. I still don't know why the standard doesn't allow SVG to be used as simple images, if so, things would be pretty slick/fast online, I mean, imagine google maps with no raster data! Oh well, that's why Inkscape can export to .png I guess! Life goes on. Feel free to check out my super-lame header made in SVG though: http://www.woventhorns.com/images/svg/top_header.svg
Remember that IE doesn't support png alpha transparency. There are php, javascript et al work arounds but thats not really the point
I'm not doing workarounds for IE. If anything, I'll just have an extra front-page item describing the benefits of using a piece of wood over IE. (slightly bitter because all of the thigns I can't do as a web designer simply because IE is packaged with windows and therefore owns most of the market share) I just wound up making everything a PNG with a white background. The results: http://www.woventhorns.com (with a little bit of blender 3d work in there too)
I know your pain, the world would be a much better place if a hole opend up and swallowed IE. But i wouldn't compare it with a plank of wood, you can actually use bits of wood for something useful.
Ok Silly question time (I'm not a designer) - What are the advantages of all these image types? I understand JPEG and GIF... but is there a necessity for SVG (hell, I dont even know the acronym!) PNG et all? I assume it better compression and image quality?
SVG - Scalable Vector Graphics. Vector graphics, ie The graphic looks correct no matter how large you resize it. See: http://www.w3.org/Graphics/SVG/ PNG - Portable Network Graphics The Portable Network Graphics (PNG) format was designed to replace the older and simpler GIF format and, to some extent, the much more complex TIFF format. For the Web, PNG really has three main advantages over GIF: alpha channels (variable transparency), gamma correction (cross-platform control of image brightness), and two-dimensional interlacing (a method of progressive display). PNG also compresses better than GIF in almost every case, but the difference is generally only around 5% to 25%. One GIF feature that PNG does not try to reproduce is multiple-image support (animations) PNG was and is intended to be a single-image format only.
Also a note to add, SVG is basically an XML file, meaning it is a text file, so if your image is basic, the file size will be minimal regardless of the size. For complex images, consider a coloured version of my logo: transparent GIF version: 53.7KB transparent PNG version: 56.1KB opaqe JPG version: 134.9KB transparent SVG version: 42.7KB If you have Firefox 1.5, or an SVG viewer, you can see that the SVG file is the exact size and color as the rest. Ironically, the PNG version dropped about 9KB when I made it transparent... weird. Just to try, I resized my logo to 10m by 10m, and the filesize changed to 42.9KB, only a 200Byte difference! (I'll post back later when my computer finishes resizing the .jpg to 10m by 10m...) Edit: We only have 1 gig of ram here at work, and a 40GB SATA drive, so I wasn't able to save the .jpg at 10m x 10m. But I can say it was taking up 6GB of scratch disk space while editing it. Either way, we can assume it would be at least 1GB compared to the 43KB svg
What do you use to make you svg files? edit: Oh I assume you use Inkscape considering you mentioned it earlier! doh!
Yup, at work I was using Adobe Illustrator, then exporting to SVG, but then I realized since I don't have much experience in illustrator, it was easier just to work in Inkscape. (although, tbh, Photoshop's pen tool is quicker and easier to use than illustrator or inkscape... but back in the day I used paint shop pro, which had an even better pen tool. The fact that vector drawing apps these days don't have "line after, line before, curve after, curve before" features, makes it hard to be accurate, IMO)