locked
Using SVG Gaussian Blur in Windows Store App RRS feed

  • Question

  • Hello,

    I am trying to render some fancy vector graphics with special effects such as gaussian blur. As XAML in Windows Store Apps does not support bitmap effects (yet?), I went to JS/HTML/SVG.

    Starting from the navigation app JS template, I modified the HTML home page by including a simple blue SVG rectangle with a gaussian blur effect on it:

    <html>
      <head></head>
      <body>
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
          <defs>
            <filter id="f1">
              <feGaussianBlur stdDeviation="4"/>
            </filter>
          </defs>
    
          <rect x="100" y="50" width="100" height="50" style="fill:blue" filter="url(#f1)"/>
        </svg>
      </body>
    
    </html>
    

    Although this file is effectively rendered as a blue rectangle with some "blue glow" when opened in Internet Explorer 10 on Windows 8 (in both Classical and Modern flavors of IE10), the actual application displays a simple blue rectangle without any blur.

    I do not understand why such feature would work in IE10, but not in an App. What am I missing? 

    Monday, December 3, 2012 8:57 AM

All replies

  • Hi,

    The code is running normal on my side with windows store app. So I suggest you test again, or create another project to test.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Friday, December 7, 2012 8:46 AM
    • Unmarked as answer by BenoitPerrot Sunday, December 9, 2012 5:14 PM
    Tuesday, December 4, 2012 2:53 AM
  • Thank you for taking time answering me.

    I tried another project template - the blank one - yes, I probably should have tried that first - and it does work.

    But starting from the JS navigation project Template, and just modifying the HTML of pages/home/home.html as above, still results in a blank screen. Which makes me think that I should spend more time digging in the Navigation project template.


    • Edited by BenoitPerrot Wednesday, December 5, 2012 7:50 AM
    Tuesday, December 4, 2012 10:33 PM
  • I continued to investigate on my issue, and found some elements that I thought would be worth sharing.

    First, the problem has nothing to do with the project template used. It is the size of the area to blur that impacts the display: "small enough", and it works, "large enough", and nothing is displayed.

    Second, the problem is not related to being in Internet Explorer 10 or in a Windows Store Apps. Playing on the same parameter (i.e. the size of the area to blur) also makes IE 10 fail to display something.

    Interestingly enough, forcing software rendering in Internet Options solves the problem, for both environment: SVG content can be blurred whatever the area size - at the cost of a significant performance penalty. It seems that this setting applies to both IE10 and Windows Store Apps in HTML (could someone from Microsoft Team confirm this?). And it seems that, on my configuration - Windows 8 Pro 32bits, GeForce 8400 M GS 128MB, Driver NVIDIA v306.97, GPU rendering in Trident does not seem to work very well.

    Sunday, December 9, 2012 5:13 PM
  • Hi !

    I am facing the same issue.

    In an empty  blank app project, the svg blur works perfectly (I tried with your short snippet), but when I try in a navigation project (even if newly created), the blur has no effect.

    Did you solve the problem ? Could you explain me how ?

    Thanks

    PS : if I put the snippet in default.html, the blur is effective, but it doesn't work when it's in home.html
    Monday, November 11, 2013 9:26 AM