Skip to: Navigation | Content | Sidebar | Footer

Full Archives

SVG Please?

May 8

I recently stumbled over a little piece of information that, while quite stale, still seems widely underreported in the places I hang out. Adobe announced some time last fall that its SVG Viewer is dead and gone as of January 1, 2008.

Is anyone really surprised? Given that SVG was Adobe's meagre foothold in the web-based vector market, easily dwarfed by Flash, and given that Adobe now owns Flash, continuing to produce a competitor seems a little self-defeating from a business perspective. It's been more or less inevitable since the completed merger that this day would come.

But it comes at an interesting time. Or, more like an inconvenient time. Recent versions of Firefox have natively supported SVG since version 1.5. Opera 8 added support as well. Safari nightly builds support it, though it hasn't yet filtered out to a major release. (This uptake of browsers supporting SVG natively is likely another reason/excuse why the business case wasn't there for Adobe's continued development.)

What about Internet Explorer though? If you guessed IE lacks any form of native SVG support, you win the bonus round. The only way to experience SVG within IE has always been via the Adobe plugin, and that house of cards just came crashing down.

But it seems like some alternatives are sprouting up. A bit of Googling produces some interesting results. If you remember Dean Edwards' IE7, a Javascript library that fixed many of IE6's CSS deficiencies, you've got the gist of this set of scripts by Mark Finkle that exploits VML. And the other day Sam Ruby posted a proof of concept that would allow Microsoft's new Silverlight engine to render SVG source.

As for official support within IE, so far we're still batting zero. Chris Wilson of the IE team popped into a comment thread last year to dispel the rumour that we can definitely expect official support in the next version of IE. (He did however state that as the SVG momentum is picking up elsewhere, he expects they'll add it at some point in the future. Nice, but nothing we can count on yet.)

Overall, it seems there's some decent momentum happening right now. I'm cautiously optimistic that some day in the next few years, we'll actually see a usable subset of SVG across the board. I just wonder what we'll use for authoring tools...

Permalink › | 45 comments


May 3

Since the redesign of this site, I've been applying a consistent blurred perspective effect to larger images (eg. in posts like this one) that has made a few people curious. It's fairly simple, but probably not that intuitive to figure out. So here's an explanation.

There are pretty much only two steps to this effect, the perspective transform and the focal blur, with an optional third, lighting effects.

Perspective Transform

Since the final effect simulates a flat surface, my starting image has been a screenshot or object that looks like it will sit properly on a flat surface. Nothing is stopping you from using a photograph, but the end result looks like a physical printed photo sitting on a surface, which usually isn't what I want.

Stick the image in a Photoshop canvas on its own layer. Hit Cmd + T (or Ctrl + T on a PC) to toggle the free transform tool; you'll get a black outline and a hollow square handles in the corners/edges of the image. A few things you can do with the free transform tool follow; hit Enter to confirm the changes, or Escape to cancel if you don't like where it's heading.

Rotate the image
Make sure the canvas is a bit larger than the image itself if the handles are on the edges, and move the cursor outside the black outline. It will change into a curved arrow, and you can click and drag to rotate the image.
Scale the image
Click and drag one of the black line edges or one of the corner handles to make the image larger or smaller. If you use a corner handle and hold Shift you can scale it proportionately along both dimensions, otherwise scaling only works on one dimension and ends up squashing the image.
Distort the image
Click and hold one of the corner handles, then press Cmd (Ctrl) to toggle distort mode. Drag the handle and you'll be able to freely move that handle, and the image distorts accordingly. You'll see what I mean when you try it.

Okay, so using free transform, start by rotating it something like 10 degrees counter-clockwise. A slight angle is all we're looking for here, nothing too drastic. Then free transform again, and this time grab the top right corner and distort it. Move it down and to the left, and you'll see a sort of planar perspective happening. You may need to rotate again, you may need to scale, you may need to distort; there will probably be a few fine adjustments necessary to get it looking just right.

Progression of transformation

Figure: Progression of the free transform operation: starting image (left), rotated image (center), rotated and distorted image (right).

Focal Blur

This is the tricky part. The first step is to make a quick mask of the in-focus area. Hit q to toggle Quick Mask mode, and use a large-ish brush (150px) at 100% opacity, and make sure it's a brush with a soft edge. Paint the area you want to be in focus, making sure the edges aren't too defined; blurry is good here. The in-focus area ought to line up with your plane as best as possible. A bit of knowledge about the photography concept of focal planes helps here, but you should be okay if you ensure the in-focus area ends up being a line across the image that matches the perspective of the image itself.

Progression of focal blur

Figure: Illustration of the focal blur process: quick mask with painted area (left), lens blur filter settings (center), final blurred image (right).

Once you've got a selection you're happy with, hit q again to step out of Quick Mask, and then find the Lens Blur filter (Filter > Blur > Lens Blur). There are quite a few settings here, so start by checking that Depth Map is set to None, the Specular Highlights sliders are at 0, and Noise is at 0. Iris is the box we're concerned with here.

The Shape dropdown has a list of shapes that roughly simulate lens openings on a camera; each is going to look a little different, but probably not enough so that you need to fiddle with them. Set it to Hexagon (6) and don't worry about it anymore. Don't bother with the Rotation slider (ie. set it to 0), and you probably don't need to adjust Blade Curvature either; changing it gives a slightly different effect, but like the Shape dropdown, most likely not enough to worry about.

And that leaves Radius. This slider controls the amount of blur, and in this case you're going to want to use a light touch. Subtle is better; 4 or 5 ought to be enough, depending on the size of your image. Click OK at the top to apply the blur, and you're probably done.

You may also want to apply a final bit of shading to simulate lights, by way of the Lighting Effects filter (Filter > Render > Lighting Effects). It's up to you to figure that one out, but I will say this much — I generally find the output from that filter a bit too contrasty. After I've applied it, I end up using the History Brush set to 50% opacity or so to tone it down a bit. Your mileage may vary.

Permalink › | 29 comments