Proposal add support of SVG animation with SMIL inside XAML for Scaleable and Responsive UI

[insinfo]

Native support of SVG animation with SMIL inside XAML for Beautiful and Responsive UI and Hardware acceleration backend on OpenGL/Direct3D/Vulkan/Metal. The advantage of XAML to natively support SVG with SMIL is that you as a developer would not have to worry about these icons and animations, the design or animator could do that in other software and deliver SVGs to you. In addition to being able to search on the internet SVG animated icons ready to use.

Like this:

<Button>...
<SVG >
<rect id="my-rect" r="30" cx="50" cy="50" fill="orange" />
  <animate 
    xlink:href="#my-rect"
    attributeName="cx"
    from="50"
    to="450" 
    dur="1s"
    begin="click"
    fill="freeze" />
</rect>
</SVG>
...</Button>

or like this:

<Button>...
    <SVG URI="icon.svg">
    </SVG>
...</Button>

<Style TargetType="Button">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
<Setter Property="Padding" Value="8,4,8,4" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="Button">
      <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
        <VisualStateManager.VisualStateGroups>
          <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
              <SVG URI="Normal.svg">
              </SVG>
            </VisualState>
            <VisualState x:Name="PointerOver">
               <SVG URI="PointerOver.svg">
               </SVG>
            <VisualState x:Name="Pressed">
               <SVG>
                <rect id="my-rect" r="30" cx="50" cy="50" fill="orange" />
                <animate 
                    xlink:href="#my-rect"
                    attributeName="cx"
                    from="50"
                    to="450" 
                    dur="1s"
                    begin="click"
                    fill="freeze" />
                </rect>
              </SVG>
            </VisualState>
            <VisualState x:Name="Disabled">
              <SVG URI="Disabled.svg">
                </SVG>
            </VisualState>
          </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <ContentPresenter x:Name="ContentPresenter"
                          BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}"
                          Content="{TemplateBinding Content}"
                          ContentTransitions="{TemplateBinding ContentTransitions}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          Padding="{TemplateBinding Padding}"
                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                          AutomationProperties.AccessibilityView="Raw"/>
      </Grid>
    </ControlTemplate>
  </Setter.Value>
</Setter>
</Style>

[mossyblog]

I'm dubious around platform injection parameters but agree on spirit svg "as-is" can and should be accepted .. however he concern lies in whether it's inline or path pointer focused as the nature of svg can be quite verbose

Having import svg can alleviate pressure on design tooling pipelines to get involved with the standard as they already support this today

[insinfo]

@mossyblog I think the important thing is that SVG is supported in a way that is easy to create buttons and other controls with embedded SVG including inline SVG animations

[mossyblog]

@insinfo agreed provided its not platform specific was my area of thought.. like thats a really slippery slope in predicate logic conditions... especially how carefree mobile platforms can be.. yes i'm looking at you iOS ...

[birbilis]

there are at least two other issues mentioning SVG

[insinfo]

I updated with a more coherent syntax

[michael-hawker]

I think supporting vector animations is really important, but not sure if the issue should call out a specific technical solution in the title. SMIL seems to be being replaced on the web (https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL, https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6509024-svg-animation-elements). While it seemed convenient, I feel like it'd be hard to take on and split web/desktop pipelines.

Think this needs to be thought of with Issue #106.

[insinfo]

In fact, google chrome is the only one that has marked SMIL as deprecated, but will still support it for a while, since there is not yet a standard that is complete like SMIL, WEB Animation is still in development and has not been finalized by W3C and CSS Animations is not as complete as SMIL.

SMIL is maintained and updated by W3C and there is no direct replacement for it.

[insinfo]

"WEB Animation" and "CSS Animations" was developed for another purpose

[michael-hawker]

I'm not saying we should necessarily align to web standards, but that we should make sure we're not depending on another standard which is in decline (e.g. SMIL is planned to be removed from Chrome, with the largest browser share, and not natively supported in IE or Edge).

Similarly though, we should make sure whatever animation technology is used for XAML Standard is compatible with existing design pipelines. Maybe that means some implementations of XAML can support SMIL for now, but I think there's a general animation discussion of what the main root system is that is being discussed in #106.