<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
     xmlns:content="http://purl.org/rss/1.0/modules/content/"
     xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
     xmlns:atom="http://www.w3.org/2005/Atom"
     xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:wfw="http://wellformedweb.org/CommentAPI/"
     >
  <channel>
    <title>SVG Wow!</title>
    <link>http://svg-wow.org/blog</link>
    <description></description>
    <pubDate>Mon, 03 Mar 2014 21:47:48 GMT</pubDate>
    <generator>Blogofile</generator>
    <sy:updatePeriod>hourly</sy:updatePeriod>
    <sy:updateFrequency>1</sy:updateFrequency>
    <item>
      <title>Bokeh</title>
      <link>http://svg-wow.org/blog/2010/08/22/bokeh</link>
      <pubDate>Sun, 22 Aug 2010 18:00:00 EDT</pubDate>
      <category><![CDATA[css3]]></category>
      <category><![CDATA[animation]]></category>
      <category><![CDATA[webfonts]]></category>
      <category><![CDATA[filters]]></category>
      <guid isPermaLink="true">http://svg-wow.org/blog/2010/08/22/bokeh</guid>
      <description>Bokeh</description>
      <content:encoded><![CDATA[
<div id="description">
    <p>
        <a href="http://en.wikipedia.org/wiki/Bokeh">Bokeh</a> effects,
        which in simple terms is in-focus objects in front of an out-of-focus or blurred background, 
        come in many different forms, as you can
        see on <a href="http://www.flickr.com/search/?q=bokeh">Flickr</a>
        for example.
    </p>
    <p>
        In this demo some circles are generated by javascript. The circles
        are added to the background, given some nice colors and blurred a bit
        to create a faux bokeh effect.
    </p>
    <p>
        As you will notice from reloading the demo, the position of each circle 
        is random, and the radius depends on the distance from the center of the svg image. 
        The further away from the center a circle is the larger the radius. 
        The computed radii are then used for dividing the circles into three different blur levels.
        
        Finally the color of the each circles depend on its computed position. 
        <a href="http://www.w3.org/TR/css3-color/#hsl-color">CSS3 hsl color syntax</a>
        is used to provide every circle with a fill-color that is similar to all the nearby circles. 
    </p>
    <p>
        After the circles have been generated they
        are added to the background group element which happens to have a 
        <a href="http://www.w3.org/TR/SVGTiny12/painting.html#BufferedRenderingProperty">'buffered-rendering'</a> 
        attribute set to <span class="attr-val">'static'</span>.
    </p>
    <p>
        The <a href="http://www.w3.org/TR/SVGTiny12/painting.html#BufferedRenderingProperty">'buffered-rendering'</a> 
        attribute tells the browser it's probably a 
        good idea to cache the rendering of that subtree. In essence it's like
        having the same thing as a pre-rendered raster image, but with the added
        benefits that SVG provides. E.g if you ever need 
        to resize or update the subtree you can, just remove the 
        <a href="http://www.w3.org/TR/SVGTiny12/painting.html#BufferedRenderingProperty">'buffered-rendering'</a>
        attribute and it will behave as normal again. In browsers that don't
        support <a href="http://www.w3.org/TR/SVGTiny12/painting.html#BufferedRenderingProperty">'buffered-rendering'</a> 
        the SVG rendering will be unaffected by the attribute.
    </p>
    <p>
        To see the effect of <a href="http://www.w3.org/TR/SVGTiny12/painting.html#BufferedRenderingProperty">'buffered-rendering'</a>
        click the svg image and the text will animate on top of the background.
    </p>
    <p>
        The demo uses the <a href="/attributions.html#fonts">Vitamin</a>
        font.
    </p>
</div>
]]></content:encoded>
    </item>
    <item>
      <title>Video</title>
      <link>http://svg-wow.org/blog/2009/10/04/video</link>
      <pubDate>Sun, 04 Oct 2009 15:00:00 EDT</pubDate>
      <category><![CDATA[css3]]></category>
      <category><![CDATA[video]]></category>
      <category><![CDATA[webfonts]]></category>
      <category><![CDATA[html5]]></category>
      <category><![CDATA[clip]]></category>
      <guid isPermaLink="true">http://svg-wow.org/blog/2009/10/04/video</guid>
      <description>Video</description>
      <content:encoded><![CDATA[
<div id="description">
  <p>
      This example illustrates the use of the following features:
  </p>
  <ul>
      <li>
          SVG Tiny 1.2 <span class="code">&lt;video&gt;</span>
      </li>
      <li>
          SVG 1.1 circular clipping on playing video
      </li>
      <li>
          external SVG resource files
      </li>
      <li>
          HTML5 video
      </li>
      <li>
          SVG used as a CSS 'background-image'
      </li>
      <li>
          CSS3 media-queries for adapting to different windowsize
      </li>
      <li>
          CSS3 webfonts
      </li>
  </ul>
  <p>See <a href="/attributions.html">attributions</a> about
      the resources used in this demo.
  </p>
</div>
]]></content:encoded>
    </item>
  </channel>
</rss>
