## Ken Burns Photo effect in SVG

This effect it suited to a hero image on a news or history content site. Requires some manual setup with three layer separations but the animation can be quite standardized.

#### Issues to consider:

- A standard 'Ken Burns effect' simply pans between (usually) two zoomed-in focal points within an image. This demo is a more complex but less common 'layered parallax' Ken Burns effect that draws the user into a faux 3d experience of the 2d reference photo.
- There are three layers that need to be separated from the original reference photo. Naturally, this requires us to clone in new image behind the animated layers. This takes time and I don't think there's any shortcut around this.
- Perhaps SMIL will be more efficient than CSS?
- Using <feGaussianBlur> filter on the back layer adds controllable (even animatable) depth, but it does hurt CPU performance a little. It's probably best to manually PhotoShop blur the background layer and then JPG it.
- This version is an inline SVG linking to 3 externally hosted images via SVG's <image> tag. Would these images be blocked by XSS reasons in the real-world? Probably. XSS rules would definitely block the images if you made this into a standalone <SVG> file placed as an <img>. Embed the entire images inside the SVG to avoid these issues.
- In alternate demos I've embedded the images layers as raw inline PNG data is an SVG SYMBOL, and then manipulated that. This renders fine – I THINK even when placed as a IMG in HTML. But the lack of compression on the PNG code makes the final SVG file fat, slow, and unweildy to manage. I'd love a better solution.
- If you are inlining the image data, compress the image data as much as is practical. Smaller files animate more smoothly and are much easier to work with in your IDE. The back layer can even be a JPG as it doesn't need transparency.
- I prefer to use BoxySVG to import, position and inline the images to an SVG, before hand-coding the animations in VS Code.
- Two layers might be enough to make this effect work nicely. However, there was just such an obvious foreground element in this example.