Quote Originally Posted by Egg Bramhill View Post
SVG for all it's early promise has made very slow progress and it's still a rarity on the web.
Don't have any numbers, so can't argue about this. I have used it. Also SVG is supported by Google Web Designer, a tool for creating banner ads.

I'm no expert but I believe there's to many variations in the file type.
There are various versions, just like for example with PDF.

Xara svg files are bloated with <defs> that don't appear to have any relevance to the content like DefaultArrow2 etc.
Blame Xara on that. SVG, like HTML or PDF, can be authored in a multitude of ways, yet render to the same image. Bitmap file formats, which are much simpler, are not a good comparison.

As for including a bitmap, just don't go there!
For many years there has been a bug in Xara concerning bitmaps in SVG. It's fixed now. Still, SVG export indeed is not great.

I need to strip out all the <defs> in Notepad [...]
There you are coding.

Anyhow, getting the animation to work is rather straight forward - see my earlier post. As I found out, Xara will map layers to groups in SVG. As CSS IDs the groups get the layer names (avoit spaces). If you use these IDs, then no editing of the SVG file is necessary, except for one line that needs to be added below the DOCTYPE declaration:
Code:
<?xml-stylesheet type="text/css" href="animation.css" ?>
This loads an external file with the CSS code describing the animation.

Here's my CSS file describing the first animation step:

Code:
/*

Include below DOCTYPE in svg file:

    <?xml-stylesheet type="text/css" href="animation.css" ?>

*/

* {
    -webkit-animation-timing-function: ease-in;
}

@-webkit-keyframes countour {
    from {
        stroke-dashoffset: 1500;
    }
    to {
        stroke-dashoffset: 0;
    }
}

#step1 path {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    -webkit-animation: countour 0.5s linear forwards;
    -webkit-animation-delay: 0.5s;
}
The value of 1500 needs to be adjusted to match line length. I did that by trial and error. "contour" is naming the group of key-frames. "step1" is the name of the layer containing the line in Xara.