Photography effects with SVG filters

Mar

by jeremy

~ in

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

Grayscale Example

Sepia

Sepia Example

Negative

Negative Example

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/

Comments

Post new comment

Your name:

E-mail:

The content of this field is kept private and will not be shown publicly.

Homepage:

Comment: *

Input format

Filtered HTML

Allowed HTML tags: <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <a> <h2> <h3> <h4>
Lines and paragraphs break automatically.
You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

Full HTML

Web page addresses and e-mail addresses turn into links automatically.
Lines and paragraphs break automatically.
You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
Insert Google Map macro.

More information about formatting options

Word verification: * Type the characters you see in this picture.

(verify using audio)

Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.