Sanpaku

A Stroke of bad luck

2007-09-10T13:19:00.000-07:00

Apparently there is a difference between how
SVG

stroke-dasharray="5,7"

and XAML

StrokeDashArray="5,7"

treat the offsets for a strokedasharray (neutral spelling). The example used is from Wikipedia (http://en.wikipedia.org/wiki/Image:Lobes_of_the_brain_NL.svg) with my own transformations.

SVG2XAML — -element

2007-09-08T13:28:00.000-07:00

Some of the hardest to translate concepts from SVG to XAML are definitions like symbol, marker, pattern, mask and their placement counterpart — use. I created some examples to define at least a target to transform XSL to. For instance:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <g id="rect">
      <rect width="15" height="15" fill="red" />
      <rect x="10" width="15" height="15" fill="green" />
    </g>
  </defs>
  <use x="5" y="5"  xlink:href="#rect"/>
  <use x="30" y="30" xlink:href="#rect"/>
</svg>

which was (manually) translated as

<Canvas xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Resources>
    <Canvas x:Key="rect">
      <Rectangle Width="15" Height="15" Fill="red"/>
      <Rectangle Canvas.Left="10" Width="15" Height="15" Fill="green"/>
    </Canvas>
  </Canvas.Resources>
  <Canvas Canvas.Left="5" Canvas.Top="5" Width="25" Height="25">
    <Canvas.Background>
      <VisualBrush Stretch="None" Visual="{StaticResource rect}" />
    </Canvas.Background>
  </Canvas>
  <Canvas Canvas.Left="30" Canvas.Top="30" Width="25" Height="25">
    <Canvas.Background>
      <VisualBrush Stretch="None" Visual="{StaticResource rect}" />
    </Canvas.Background>
  </Canvas>
</Canvas>

I'm not too happy about having to specify the actual width and height. Does anyone know a better solution?

And a cautious first step into filters:

<?xml version="1.0"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="Gaussian_Blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
    </filter>
  </defs>
  <ellipse cx="60" cy="150" rx="70" ry="40" style="fill:#0000ff;stroke:#ffff00;stroke-width:2;" />
  <ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#ffff00;stroke-width:2;filter:url(#Gaussian_Blur)" />
  <rect width="140" height="80" x="280" y="110" style="fill:#ff0000;stroke:#ffff00;stroke-width:2;filter:url(#Gaussian_Blur)" />
</svg>

with counterpart

<?xml version="1.0" encoding="UTF-8"?>
<Viewbox Stretch="Uniform" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas Width="280" Height="80">
    <Canvas.Resources>
      <Style x:Key="Gaussian_Blur" TargetType="FrameworkElement">
        <Setter Property="BitmapEffect" >
          <Setter.Value>
            <BlurBitmapEffect Radius="5" KernelType="Gaussian" />
          </Setter.Value>
        </Setter>
      </Style>
   </Canvas.Resources>
   <Ellipse Canvas.Left="0" Width="140" Height="80" Fill="#000FFF" Stroke="#FFFF00" StrokeThickness="2" />
   <Ellipse Canvas.Left="140" Style="{StaticResource Gaussian_Blur}" Width="140" Height="80" Fill="#FF0000" Stroke="#FFFF00" StrokeThickness="2" />
   <Rectangle Canvas.Left="280" Style="{StaticResource Gaussian_Blur}" Width="140" Height="80" Fill="#FF0000" Stroke="#FFFF00" StrokeThickness="2" />
  </Canvas>
</Viewbox>

Note that the Gaussian blur is applied to different shapes, both derived from FrameworkElement, and only to shapes of the right Style.

Old post

2007-09-07T14:13:00.001-07:00

I found an old post of myself... Really shows I was into SVG <-> XAML at the time.

11/11/2005 10:45:30 AM Animation over a path in XAML
Is there a good equivalent of the following SVG in XAML? [...]

Having fun with XAML (Silverlight) and SVG

2007-09-07T09:27:00.000-07:00

Rationale
When I first became acquainted with Microsoft's XAML format (october 2005), my primary platform was Windows 2000. Support, examples and clip art were limited. It was then that I started to write an XSL-transformation from SVG to XAML, targeted at the 2003 namespace supported by a 3rd party tool, Xamlon. It came with its own pecularities, but hey, it worked (even on Windows 2000)! In order to test some files incompatible with Xamlon, I also wrote the reverse, a XAML to SVG transformation. This also worked with some more complex examples, like the samples for Microsoft Expression. Giraffes, parrots and hippos flooded my screen. Then I got busy with other things and let it rest...

2007
Recent developments like Silverlight, Andreia Gaita's SVG2XAML (part of Moonlight, the Mono port of Silverlight) and Sam Ruby's SVG to Silverlight Workbench, revived my interest in my own shelved pet project. I had to remove some 2003 namespace "artifacts", like RectangleTop and RectangleWidth. ID, TransformDecorator and Text became x:Key, RenderTransform and TextBlock, respectively. Attributes for shapes like Ellipse also changed slightly.

Consequences
This allowed some interesting techniques like:
- SVG on Internet Explorer, without the ASV (Adobe SVG Viewer) plugin required (the example also works on Mozilla with Silverlight installed)
- XAML/Silverlight on Mozilla, without the Silverlight plugin installed (doesn't work on IE, but that's a mimetype issue)

Examples
- Colored toucan (SVG to XAML)

- GreenFrond (XAML to SVG)

How can you help?
The XSLs need testing, code coverage and conformance tests. Bug reports are more than welcome. And there are many concepts and constructs that still need a counterpart, for instance filters and base64 encoded images in XAML. Some more posts on these, and some implementation issues are to follow in the next days.
Feel free to email your comments.

Updates
20071009 20:57: XMLs and XSLs must be read with async = false, corrected in Transform.js
20071013 22:42: Changes to xaml2svg.xsl, shapes.xsl, properties.xsl, bugs filed by Inkscape developers

Berlin street signs

2007-09-07T03:08:00.001-07:00

Last monday I returned from a short (way too short!) trip to Berlin. This photo is from an earlier visit (2004). It shows not one, but two different ligatures (typographic contractions), tʒ and ſʒ. A quick tour of flickr and the wikipedia yielded some more examples:
- Bötʒowstraſʒe
- Petersburgerstraſʒe-Bersarinplatʒ

The only other I could think of (top of mind) is Schloſʒplatʒ. There must be more of these...

Just checked in...

2007-09-07T02:48:00.000-07:00

Let me see how well this works out. I just wanted to make sure I start blogging before my parents do... Sadly 'sanpaku' was already taken, but sanpaku72 fits me very well.