SVG vs. Silverlight head-to-head fight

Adobe stops supporting SVG next year, thus there are some SVG consumers are looking for the replacement of this technology, by other, that will be supported. The only technology, can actually replace SVG is Silverlight. Yes, Flex, too, but it's too complicated to perform transitions. Today, we'll look into those two technologies and try to understand how to perform migration easily. Let's start from SVG (Adobe SVG 3.x) vs SL (Silverlight 1.0) syntax

SVG

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="200" height="100">
</svg>

SL

<Canvas  xmlns="http://schemas.microsoft.com/client/2007"
  Width="200" Height="100">
</Canvas>

Looks pretty the same, no? At least, very similar. Let's see what's going with text.

SVG

<text x="10" y="15" font-size="12">
  Hello World!
  <tspan x="10" dy="1.6em" font-size="8">This is</tspan>
  <tspan x="10" dy="1.6em" font-size="20">SVG text</tspan>
</text>

SL

<TextBlock Canvas.Left="10" Canvas.Top="15" >
  <Run Text="Hello World!" FontSize="12"/>
  <LineBreak/>
  <Run Text="This is" FontSize="8"/>
  <LineBreak/>
  <Run Text="Silverlight text"  FontSize="20"/>
</TextBlock>

Similar too, but what's about rendering? From now and on, you'll need Silverlight 1.0 and SVG 3.x plugins in order to see working samples.

Let's look closer

And even more closer

Silverlight renders small and large text much better, then SVG do.

Our next station is splines and simple geometry.

SVG

<rect width="100" height="50" fill="blue" stroke="black"  stroke-width="3" x="0" y="0"/>

SL

<Rectangle Width="100" Height="50" Fill="Blue" Stroke="Black" StrokeThickness="3" Canvas.Left="0" Canvas.Top="150" />

That's look very similar. What's about lines?

SVG

<path fill="white" stroke="black" stroke-width="2" d="M20,140 Q100,20 100,140 Q100,220 180,140" />

SL

<Path Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="2" Data="M20,140 Q100,20 100,140 Q100,220 180,140"/>

That's the same. Even coordinates and tangents are equal. So, how it renders?

Well. There are some differences here.

Never mind, let's go on into animations

SVG

<circle cx="200" cy="150" r="40" fill="red">
    <animate attributeName="cy" dur="5s" repeatCount="indefinite" keySplines="0.5 0.1 0.9 0.5;0.1 0.5 0.5 0.9" calcMode="spline" keyTimes="0;2.5;5" values="150;350;150"/>
  </circle>

SL

<Ellipse Width="80" Height="80" Fill="Red" Canvas.Left="160" Canvas.Top="-91" x:Name="ellipse">
    <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)" RepeatBehavior="Forever">
                        <SplineDoubleKeyFrame KeyTime="00:00:02.5" Value="200" KeySpline="0.5 0.1 0.9 0.5"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:05" Value="0" KeySpline="0.1 0.5 0.5 0.9"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Ellipse.Triggers>
    <Ellipse.RenderTransform>
        <TransformGroup>
            <TranslateTransform/>
        </TransformGroup>
    </Ellipse.RenderTransform>
</Ellipse>

Here, it looks like a lot of differences, however, if you'll look into code, you'll see, that there are no difference between the methods. Even key splines are the same. Let's look deeper into code.

SVG	SL
circle	Ellipse
animate	DoubleAnimationUsingKeyFrames
cx,cy	Width, Height
attributeName	TargetName+TargetProperty
dur	KeyTime
repeatCount	RepeatBehavior
keySplines	KeySpline+KeySpline
calcMode	SplineDoubleKeyFrame
keyTimes	KeyTime+KeyTime
values (absolute)	Value (relative)

 

That's all. After all, there are very similar methods and objects are in use. The only difference, that Silverlight is much more flexible, then SVG in animation. Let's see the result (if the ball is breaking on the edge, just reload internal page - this is load time issue)

So, after all if you know SVG, you can start developing Silverlight (don't go back :) ).

All this nice, but what's the problems? Well, there are some. In Silverlight 1.0, there is no Tile or Visual brushes, thus you can not create following effect (this is checker board)

SVG

<defs>
<pattern id="P01" width="10" height="10" patternUnits="userSpaceOnUse">
    <rect width="10" height="10" fill="#FFFFFF" stroke="#000000" stroke-width="0.1"/>
</pattern>
</defs>
<rect x="0" y="0" width="400" height="400" fill="url(#P01)"/>

But no worry, you probably, will have all you need and much more in Silverlight 2.0 :)

Have a nice day.