Lazy-Loading SVG with Intersection Observer
Defer off-screen SVG loading until it's about to enter the viewport — Intersection Observer does this efficiently without scroll listeners.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Why Intersection Observer Over Scroll Listeners
Older lazy-load implementations polled scroll position on every scroll event — expensive and janky. Intersection Observer runs asynchronously off the main thread, firing a callback only when an element crosses a visibility threshold, making it the modern, performant standard for deferring below-fold SVG loading.
- Runs off the main thread — no scroll-event jank
- Fires only on actual visibility threshold crossings
- Native browser API, no polyfill needed in modern browsers
Implementation Pattern
Store the real SVG source in a `data-src` attribute, observe each placeholder element, and swap in the actual source when the observer callback fires with `isIntersecting: true` — for `<img>` tags this means setting `src`; for inline SVG, fetching and injecting the markup. Set a `rootMargin` of 200-400px to start loading slightly before the element is visible, avoiding a flash of empty space.
- data-src attribute holds the deferred source until triggered
- rootMargin pre-loads slightly before the element enters view
- Unobserve each element after loading to free up the observer
Frequently Asked Questions
Should I lazy-load every SVG on the page this way?
No — only below-the-fold, non-critical SVGs. Above-the-fold and LCP-relevant graphics should load immediately; lazy-loading them would delay the metric you're trying to protect.
Does native loading="lazy" make Intersection Observer unnecessary?
For simple <img> tags, native lazy loading is simpler and sufficient in modern browsers. Intersection Observer remains useful for inline SVG, custom loading animations, or finer control over the loading threshold.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG