CSS vs SVG for layout

Question

I am developing a web application that has a specific layout.
I mainly use CSS to style buttons and use divs and style them for other layout elements.
The problem is that sometimes I need a layout element that will be non-rectangular.
In addition, designing an SVG is easier and can sometimes lead to better results.
My question is: should I always use CSS for the layout and, for example, combine the div to achieve a non-rectangular effect, or use SVG for some layout elements?
Also what about buttons - CSS or SVG?
Thank!

Answer 1

Remember that SVG is not supported in older browsers. In particular, in IE8 and earlier. Therefore, the use of SVG limits your audience.

You can install legacy versions of IE to support SVG - there are several Javascript libraries that can convert SVG to VML, which is a private alternative to SVG for Microsoft. However, this means that you are using Javascript code unnecessarily; you could cause performance problems in IE, or, even worse, it might load slowly enough for the layout to redraw after loading it.

Therefore, for compatibility between browsers, I would suggest not using SVG for your main page layout.

SVG .. javascript Raphael, SVG , VML IE, .

- CSS , CSS . ( IE6), -, .

. http://jonrohan.me/guide/css/creating-triangles-in-css/.

, , ; , , - . http://www.cssplay.co.uk/menu/fivestar - , , , , .

, .

[EDIT] OP <div>, , , ; , . , - SVG div: . div, . CSS Javascript.

Answer 2

SVG , . , , ..

SVG : - -, : IE < 9 SVG, . -: SVG HTML, HTML SVG . -flow : , / . html . SVG , , , .

, HTML + CSS. CSS3 , , . , .

Answer 3

We are now in 2017, I believe that all major browsers support SVG. Therefore, I would say that SVG is a good option. You will probably have to use JavaScript to customize the elements on the screen and make them responsive, since SVG does not provide things like flexbox, tables, float, etc. The advantage is that you will have more flexibility and will not have to deal with CSS limitations and side effects.