Using SVGs in lieu of html/css

I've been mocking up a landing page in Adobe Illustrator, and I'm about to begin coding it.

Is there a reason I shouldn't just export the whole page as an SVG and use that in lieu of recreating everything in html/css?

The only cons I can think of are:

1. SEO, as I won't have regular text (easy enough to just remove text from SVGs and recreate in html)

2. User interaction (buttons etc) (same solution as the SEO problem)

3. Responsiveness with respect to elements repositioning at different viewport sizes. (trickier; but already mocked up a few different layouts for different device sizes, so i can just serve different versions)

My suspicion is there's something I'm missing, because I haven't been able to find anything online addressing this approach.

Some clarification:

• I believe SVG compatibility gets dodgy before IE9 or so, but my product involves a chrome extension, so this isn't a huge concern

• my design is Material Design-inspired, so there are a lot of colored divs & the like. this is a good approximation (source):

  

While the buttons and text would best be handled with HTML/CSS/JS, I'm interested in the reasons that the rest of it (i.e., the image and layout components) can't be handled w/ a single SVG.