Question

I’m developing a web application that has a certain layout.
I’m mainly using CSS for styling the buttons and using divs and styling them for other layout items.
The problem is that sometimes I need a layout item to be non-rectangular.
Also- designing SVG is easeer and sometimes may produce better results.
My question is: should I use CSS always for the layout, and for instance- combine divs to achieve the non-rectangular effect- or should I use SVG for some of the layout items?
Also- what about the buttons- CSS or SVG?
Thanks!

Answer 1

Bear in mind that SVG isn’t supported in older browsers. In particular, in IE8 and earlier. Using SVG will therefore limit your audience.

It is possible to rig older versions of IE to support SVG – there are a number of Javascript libraries which can convert SVG into VML, which was Microsoft’s proprietary alternative to SVG. However, this does mean you’re running Javascript code unnecessarily; you could cause performance issues in IE, or worse, it could load slow enough that the layout redraws after its loaded.

Therefore, for cross-browser compatiblity reasons, I would suggest not using SVG for your basic page layout.

Where I would use SVG is for graphs and charts, etc. For these, I would use the Raphael javascript library, which makes drawing SVG very easy, and also renders it as VML in IE, without you having to do any explicit conversion.

For creating non-square elements in CSS, there is a hack which uses the CSS borders to draw triangles and other shapes. This works in all browsers (with some minor caveats in IE6), so is great for creating spot-effects like marker arrows and speech bubbles.

See http://jonrohan.me/guide/css/creating-triangles-in-css/ for more info on this.

Great for spot effects, but should stress that I wouldn’t recommend it for complex shapes; I have seen some people drawing entire pictures using it — see http://www.cssplay.co.uk/menu/fivestar and other hacks on the same site — but as I say, I wouldn’t suggest actually doing this, except just to demo a hack like this guy.

Hope that helps.

[EDIT]
Per the OP’s comments, he only wants to add a rectangular protruding part to a larger rectangular <div>, so in fact the shape he’s trying to create isn’t all that complex after all; in fact, it sounds a lot like a tab. Given this, the best recommendation by far is to forget about drawing it with SVG, and simply create two divs: one for the main content and one for the tab. If necessary, a third div can be created to wrap the other two. This may be helpful for referencing the two others together via CSS or Javascript.