Parallax Burns: Converting Photographs from 2D to 3D with SVG

Share this article

Last week we talked about ZorroSVG, a tool for converting your chunky transparent PNG-32s into slim and flexible SVGs.

That got me thinking.

A few weeks earlier, I talked about the use of the Ken Burns effect in film and television.

GIF animation. Camera zooms in and out on an archive photo of President Wilson at the Baseball.
Figure 1: The ‘Parallax Ken Burns’ effect (as a GIF)

But there’s another similar, but slightly more sophisticated technique that pans and/or zooms different layers of a photograph at different rates to give the image a slightly 3D effect. Sometimes this is called a ‘Parallax-Ken Burns effect’, other times ‘The 2D to 3D Effect’, sometimes it’s the ‘2.5D Effect’. You might think of it as the ‘History Channel effect’ but it could just as easily be the ‘VH1: Behind the Music effect’.

This is a classic videographers trick, so all the tutorials you’ll find on Youtube for this effect are aimed at Adobe After Effects users.

But what if we could mimic the effect entirely inside a standalone SVG graphic?

That was the plan.

It didn’t quite work out that way (yet) but I thought it might be useful to share what I have so far. Let me be clear: this is a jumping-off point for people, rather than a finished production-ready product. I know it doesn’t work in Opera 3. ;)

I don’t want to get super code-heavy here, but you should be able to pick through the CodePen to understand the detail.

The plan was to…

  1. Break down a photograph into three overlapping layers – front, middle, and background.
  2. Convert those layers into SVGs using ZorroSVG.
  3. Manually re-combine those layers into a single multi-layered SVG
  4. To use CSS animation inside that SVG to get the Parallax-Burns effect.

First take

The Photograph

Woodrow Wilson archive image
Figure 2: Woodrow Wilson archive image

My first task was to find a good image to work with. I found this nice copyright-free archive photo of Woodrow Wilson from Flickr (fig 2) that has a good sense of depth to it.

After dropping it into Photoshop, I repaired the damage in the bottom half and then split it into three separate layers (all PNG-32s):

  1. Foreground: The fence in the foreground
  2. Middle ground: Wilson and his fellow VIPs
  3. Background: The remainder of the grandstand

As we’re going to be moving these layers in relation to each other, we’ll need to create some extra image to fill the gaps. I used Photoshop’s ‘content-aware fill’ to clone in new image behind the fence and also behind Wilson and co. It’s pretty rough but it will do.

Broken in three layers

Now we have our raw image components.

The SVG Markup

CodePen allows you to write SVG markup straight into the HTML panel so it’s a great place to play with SVG ideas. Let’s go straight to my first ‘proof of concept’ test:

See the Pen SVG Parallax Burns by Alex (@alexmwalker) on CodePen.

You’ll notice that the fence layer moves farther and faster than the middle layer as it’s closer to us. That’s the key to the parallax effect.

In SVG, there are two ways to put pixel-based images into your file – and it’s really no different to HTML in that regard.

Method 1. Encode & embed your pixels:

Brackets live preview of the encoded image
Figure 3: Brackets live preview of the encoded image

You can base-64 encode your pixels. This just turns your image into a long string of numbers and letters that you can paste into your SVG document in any text editor. This is precisely what ZorroSVG does – and if you open a ZorroSVG file in a code editor you’ll see something like this (fig 3):

Encoded images are a little unwieldy to work with, but it’s worth it to be able to encapsulate everything in a single, standalone file. This won’t break if you download it, or move it to another folder, or lose your internet connection.

Method 2. Link your pixels via URL:

As we commonly do with our HTML, it’s possible to link to an external image from inside your SVG like this.

<image class="back" 
      xlink:href="https://i.sli.mg/lZPsUt.png" 
      x="0" y="0" 
      width="970" height="690">
  </image>

This is neat and easy-to-work-with, but if your SVG and its image resources get somehow moved or separated, your SVG will have sad ‘missing image’ flags in it. I don’t like that idea.

Nevertheless that’s exactly what I’m doing in the CodePen test above. The three IMAGE elements are stacked back to front. We’ve given each IMAGE element a sensible CSS classname too – .front, .mid and .back.

I’m not going to explain every line of code but the noteworthy parts include:

  • Inside the STYLE tags at the top of the SVG, you’ll see two simple CSS scaling animations – parallax-front and parallax-mid.
  • I’m getting a bit fancy by adding an SVG blur filter (filter:url(#effect-1); ) to the front and back layers, but leaving Wilson’s layer sharp to increase the depth. Ideally, I’d love to slowly dial-up that blur effect as we zoom in to increase the 3D feel. But not for this demo.
  • The ‘transform-origin’ property of 50% 50% means we will be scale/zooming into the exact center of our image. A value of 50% 100% would feel like we were moving in-and-under Wilson. A value of 50% 0% would feel like we were zooming over his head.

As a test, I think this is very successful. There’s a real sense of time and space that isn’t present in the original photo. But on the down-side, the SVG relies heavily on external files that may not always be available. Things would be much more robust if we could sink it all into a single, standalone file.

Second Take

Brackets live preview of the encoded image
Figure 4: Brackets live preview of the encoded image

If we run our three PNGs through ZorroSVG we get three new SVG files that we can open in any code editor. When I open one in Adobe Brackets and hover over the image code, I get a cool little preview of the encoded image (see figure 3).

You’ll see that ZorroSVG puts the image in the top half and encodes the alpha-channel (or mask) in the bottom half. The little section of filter code at the top does the magic of automatically applying the mask.

If you run all three PNGs through Zorro you’ll notice that the filter code at the top is identical. So… if we manually edit those three encoded image sections into a single SVG file, the image layers should stack perfectly, right?

And they do! The stacked three-layer SVG image is probably about the same size as the original flat PNG.

We can then add the same CSS classes and animation code to this file and BAM! – we should have a standalone ‘Parallax Burns’ SVG file.

London Olympics - 1948 - Football
Figure 5: London Olympics – 1948 – Football
London-olympics-football-1948.svg

And we do. With some issues…

But it works. The example (figure 5) is a single SVG file that you could download, upload, email, or pop on a USB as you might with any JPEG.

The Problem?

If you viewed the above file in Chrome or (ew…shudder) Safari, you would have noticed a jerky, ticking to the animation rather than the smooth glide we saw when we were manipulating PNGs in CodePen.

On the other hand, if you viewed the file in Firefox (and I warmly encourage you to), you would have seen gorgeous, swoon-worthy, buttery-smooth loveliness. (oh, it’s so nice…). Firefox blows every other browser away when it comes to SVG manipulation.

To be honest, this SVG example (fig 5) is far higher resolution than I needed to make it, but I wanted to push the browsers. Firefox doesn’t break a sweat.

As this is an alpha, I haven’t tested it in IE11 yet, but be interested in hearing people’s experiences.

In general, it seems that SVG can interpret most CSS successfully, but there’s little doubt that it isn’t as polished with CSS as our HTML browsers are. For instance:

  • SVG can’t handle 3D transforms in CSS (it flattens them to 2D)
  • CSS animation seems generally less smooth and robust when rendered in SVG (with the exception of Firefox). Give it simple tasks and it’s fine but don’t push your luck.

Final thoughts…

There may be some simple coding fixes to fixing this animation smoothing problem.

  • Maybe setting image dimensions helps?
  • We could use SVG’s built-in animation syntax called ‘SMIL’.
  • Perhaps it’s more efficient to use SVGs clip-path as the mask rather than the alpha channel filter we’re using.
I’ve only been playing around with the possibilities for a few days and there is still plenty of room for experimentation. Nevertheless, I think this is an effect that has a place in web design if we can get the technical bits right. I could see this technique working really well in a re-imagined slideshow unit – each image slowly zooms in until it fades to be replaced by a fresh zooming image. Anyway, have a play and let me know if you come up with any improvements.

Originally published in the SitePoint Design Newsletter.

Update – March 11, 2016

parallax-burns-optimized
Figure 6: Wilson Parallax Burns using clip-path to mask. SVG image link
In the original post, I mentioned that I thought SVG’s clip-path masking might provide a more efficient and more performant masking options than the alpha channel filter we used in my first examples. I’m happy to report that in this quick test, that seems to be the case. The image you see here (fig 6) is a standalone SVG of about 245kb. It has a natural (unscaled) size is 965px x 664px and definitely seems to animate much more smoothly than the original version. Using a vector mask on the JPEGs provides a sharper, lower-fidelity mask edge than the alpha channel filter version – but it’s not a deal-breaker (I could have done a nicer job cutting the mask). I also applied the blur filter to the fence AFTER I applied the clip-path mask, so it has a defocused blurred edge anyway.

Frequently Asked Questions on Converting Photographs into 2D to 3D SVG

What is the significance of converting photographs into 2D to 3D SVG?

Converting photographs into 2D to 3D SVG (Scalable Vector Graphics) is a technique that adds depth and dimension to static images, making them more engaging and visually appealing. This technique is widely used in web design, animation, and digital art to create a parallax effect, which gives the illusion of depth and movement to the images. It enhances the user experience by making the content more interactive and immersive.

How does the parallax effect enhance the visual appeal of images?

The parallax effect is a visual technique where the position or direction of an object appears to differ when viewed from different positions. In the context of converting photographs into 2D to 3D SVG, the parallax effect creates a sense of depth and motion in the images, making them appear more lifelike and dynamic. This effect can make your website or digital content stand out, attracting more viewers and potentially increasing engagement.

What are the steps involved in converting photographs into 2D to 3D SVG?

The process of converting photographs into 2D to 3D SVG involves several steps. First, the photograph is divided into different layers based on the depth of the objects in the image. Then, these layers are converted into SVG format using a graphic editor. The SVG layers are then animated using CSS or JavaScript to create the parallax effect. This process requires a good understanding of graphic design and coding.

What tools or software are required to convert photographs into 2D to 3D SVG?

To convert photographs into 2D to 3D SVG, you would need a graphic editor like Adobe Illustrator or Inkscape to create the SVG layers. You would also need a code editor like Sublime Text or Visual Studio Code to write the CSS or JavaScript code for the animation. Additionally, you might need a web browser with developer tools for testing and debugging your code.

Can I convert photographs into 2D to 3D SVG without any coding knowledge?

While it’s possible to create simple SVG animations without coding using some graphic editors, converting photographs into 2D to 3D SVG typically requires some knowledge of CSS or JavaScript. However, there are online tutorials and resources available that can guide you through the process, even if you’re a beginner.

How can I optimize the performance of my 2D to 3D SVG animations?

Optimizing the performance of your 2D to 3D SVG animations can be achieved by minimizing the number of SVG layers, reducing the complexity of your SVG shapes, and using efficient CSS or JavaScript code for the animation. You should also consider the file size of your SVG images, as larger files can slow down the loading time of your website or digital content.

What are the common mistakes to avoid when converting photographs into 2D to 3D SVG?

Some common mistakes to avoid when converting photographs into 2D to 3D SVG include not properly separating the image into layers based on depth, using too many SVG layers which can affect performance, and not optimizing the SVG code for efficiency and compatibility with different web browsers.

Can I use the 2D to 3D SVG technique with any type of photograph?

While you can technically use the 2D to 3D SVG technique with any type of photograph, it works best with images that have clear and distinct layers of depth. Images with a lot of detail or complex backgrounds might not produce the desired effect.

How can I learn more about converting photographs into 2D to 3D SVG?

There are many online resources available to learn more about converting photographs into 2D to 3D SVG. These include tutorials, blog posts, online courses, and forums where you can ask questions and get help from experts in the field.

What are the potential applications of the 2D to 3D SVG technique?

The 2D to 3D SVG technique has a wide range of applications in web design, digital art, animation, advertising, and more. It can be used to create interactive websites, engaging digital content, dynamic advertisements, and immersive virtual reality experiences.

Alex WalkerAlex Walker
View Author

Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Co-author of The Principles of Beautiful Web Design. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 60+ of SitePoint's book covers.

AlexWken burnsparallaxSVG
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form