Не обязательно svg, можно и png просто картинкой на фон положить. Но я бы сделал svg, дабы качество было хорошее и без всяких png-шных размытий. Да и такая большая картинка в svg будет меньше размером чем png.

И надо учесть что будет происходить за листвой, ибо экраны бывают большие по ширине и у них картинка может не влезть в экран и тогда будут справа-слева пустые пространства. Надо листву дорисовать, чтобы логически перевести картинку в голубой фон.

Скриптом очень просто будет сделать:

if(document.all){
        var width = document.body.clientWidth;
        var height = document.body.clientHeight;
    }else{
        var width = innerWidth;
        var height = innerHeight;
    } 

    if(width>height){
        alert('Альбомная');
        $('.error_orientation').show();
    }else{
        alert('Портретная');
    }

Что-то типа того.
На самом деле пусть пользователь сам выбирает в какой ориентации ему смотреть сайт.