Photography effects with SVG filters

You may have seen some showcases demonstrating CSS3 capabilities along side HTML5 whether it's rendering iOS icons to Cover Flow however what isn't often shown is SVG's capabilities despite being a better substitute to using excessive CSS and HTML mark up. Despite being around since 2001 implementation of SVG in the browser has been slow due to it's extensive specification which resulted in two more simplified profiles of SVG Basic and SVG Tiny. That said you will require Firefox 4 at the time of writing to view the examples, images will be provided as substitutes.

We are eagerly awaiting SVG support in other browsers but it is a good look into the future

Grayscale

SVG filter grayscaleSVG filter grayscale

Grayscale Example

Sepia

SVG filter sepia beforeSVG filter sepia after

Sepia Example

Negative

SVG filter negativeSVG filter negative

Negative Example

Blur

SVG filter blurSVG filter blur

Blur Example

These examples are just some of the upcoming uses of SVG, it's definitely a technology you want to keep an eye on besides CSS3 and HTML5.

For a great video of SVG filters check out Paul Irish's blog: http://paulirish.com/2010/svg-filters-on-html5-video/

Add new comment

Filtered HTML

  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockcode>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.