Inline/Encoded SVGs as Lazyload placeholder

Question

I'm using a lazyloader to replace <img> placeholder with the real image via Javascript.

Using a placeholder image on responsive sites (overriding width and height attributes via CSS) results in content jumps, when the real image with a different proportion has been loaded. So my plan was to insert simple inline SVG code with the dimensions of the final image.

1. Is this a good idea anyway?
2. How do I cope with <img> vs <svg> tag? (Needed as preloader placeholder)

[edit for clearer instruction – thanks @Robert Longson]

Answer 1

appelsiini.net lazyload

$("img.lazy").lazyload({
    effect      : "fadeIn",
    placeholder : "" // null or free
    //placeholder   : "loading.gif"
});

img.loading  {
    background: transparent url(../image/load.gif) no-repeat center center; 
}

<img class="lazy loading" ... />