Howdy,

I have been trying to use SVG to animate some 2D physics simulations.  I seem to
be hitting the wall in terms of SVG capabilities and rendering speed.  I'd love
to see performance of these simulations improve.  Am wondering:  anyone out
there want some of my testcases to drive development?

I have tried many different browsers on these testcases.  Interestingly, the
most capable seems to be IE8 with the Adobe plugin.  None of the other browsers
render the text animations correctly.  But even IE8 runs out of steam as the
testcases get larger.  The IE9 preview seems to have the highest capacity, but
also dies eventually.

Sorry I missed the conference.  Does anyone want to post the highlights?
Thanks!
Bruce

Sure, I'd like to see them

Best regards

Robert.

--- In svg-developers@yahoogroups.com, "MRiepe" <mike_riepe@...> wrote:
>
> Howdy,
>
> I have been trying to use SVG to animate some 2D physics simulations.  I seem
to be hitting the wall in terms of SVG capabilities and rendering speed.  I'd
love to see performance of these simulations improve.  Am wondering:  anyone out
there want some of my testcases to drive development?
>
> I have tried many different browsers on these testcases.  Interestingly, the
most capable seems to be IE8 with the Adobe plugin.  None of the other browsers
render the text animations correctly.  But even IE8 runs out of steam as the
testcases get larger.  The IE9 preview seems to have the highest capacity, but
also dies eventually.
>

Hi Bruce,

I'm sorry you missed it too since it was really interesting, energetic,
informative, and fun. You would have liked it and you were missed. I think that
the host, Paris Telecom (who did an extraordinary job by the way) and their
associates will be posting audio, video and links sometime soon.

I know I found the conference invigorating and am completely excited about the
various possible futures. Clearly it is very cool that Microsoft is supporting
it and in such a big way -- putting lots of resources into making it work. I
also don't know when Erik D. and Vincent H will be putting links up on SVG Wow
to their most recent stuff, but they showed some completely awesome demos.

I'm not sure how much the very active groups in places like France and China
read svg-developers, but I'm sure that once the material becomes available, the
organizers will let folks here know.

cheers
David
   ----- Original Message -----
   From: bruce
   To: svg-developers@yahoogroups.com
   Sent: Thursday, September 02, 2010 12:16 PM
   Subject: [svg-developers] SVG Open



   Sorry I missed the conference. Does anyone want to post the highlights?
   Thanks!
   Bruce





[Non-text portions of this message have been removed]

Hi Bruce,

As mentioned by David we are going to put the demos we showed in the closing
session at http://svg-wow.org. Right now, we put just four of them and we'll add
more in the coming weeks.

Cheers,
Vincent.




________________________________
From: ddailey <ddailey@...>
To: svg-developers@yahoogroups.com
Sent: Fri, September 3, 2010 11:46:23 PM
Subject: Re: [svg-developers] SVG Open


Hi Bruce,

I'm sorry you missed it too since it was really interesting, energetic,
informative, and fun. You would have liked it and you were missed. I think that
the host, Paris Telecom (who did an extraordinary job by the way) and their
associates will be posting audio, video and links sometime soon.

I know I found the conference invigorating and am completely excited about the
various possible futures. Clearly it is very cool that Microsoft is supporting
it and in such a big way -- putting lots of resources into making it work. I
also don't know when Erik D. and Vincent H will be putting links up on SVG Wow
to their most recent stuff, but they showed some completely awesome demos.

I'm not sure how much the very active groups in places like France and China
read svg-developers, but I'm sure that once the material becomes available, the
organizers will let folks here know.

cheers
David
----- Original Message -----
From: bruce
To: svg-developers@yahoogroups.com
Sent: Thursday, September 02, 2010 12:16 PM
Subject: [svg-developers] SVG Open

Sorry I missed the conference. Does anyone want to post the highlights?
Thanks!
Bruce

[Non-text portions of this message have been removed]




[Non-text portions of this message have been removed]

Below exception is coming when I am invoking

org.apache.batik.transcoder.TranscoderException: null
Enclosed Exception:
The reference to entity "T_Edmonton" must end with the ';' delimiter.
org.apache.batik.transcoder.TranscoderException: null
Enclosed Exception:
The reference to entity "T_Edmonton" must end with the ';' delimiter.
         at org.apache.batik.transcoder.XMLAbstractTranscoder.transcode(Unknown
Source)
         at org.apache.batik.transcoder.SVGAbstractTranscoder.transcode(Unknown
Source)

Code is below

  JPEGTranscoder transcoder = new JPEGTranscoder();
       try {
           BufferedOutputStream bufferedoutputstream = new
               BufferedOutputStream(new FileOutputStream(target));
           transcoder.transcode(new TranscoderInput(file1), new
TranscoderOutput(bufferedoutputstream));
           bufferedoutputstream.flush();
           bufferedoutputstream.close();
       }catch ( Exception ex ) {}


What could be wrong and how to debug?

Hi everyone,


I'd also take the opportunity to thank the organizing committee [1], with a
special mention for Cyril and Andreas, and all supporting staff for making such
a pleasant conference possible. You guys really made it worth it! :-)


> I think that the host, Paris Telecom (who did an extraordinary
> job by the way) and their associates will be posting audio,
> video and links sometime soon.

Yeah, I also hope to see the videos and also the other multimedia material
(photographers were pretty active) made available soon. ;-)


Cheers,
  Helder


[1] http://svgopen.org/2010/about_svgopen.shtml

Hi,

Maybe it thinks that something is an XML entity that is not properly
delimited. If you have something in your document like "&T_Edmonton",
that might make sense. If this is the case, then you should escape the
"&", so you would have "&T_Edmonton" in your document.

Jake

On 10-09-02 02:59 AM, lprao_1978 wrote:
>
> Below exception is coming when I am invoking
>
> org.apache.batik.transcoder.TranscoderException: null
> Enclosed Exception:
> The reference to entity "T_Edmonton" must end with the ';' delimiter.
> org.apache.batik.transcoder.TranscoderException: null
> Enclosed Exception:
> The reference to entity "T_Edmonton" must end with the ';' delimiter.
> at org.apache.batik.transcoder.XMLAbstractTranscoder.transcode(Unknown
> Source)
> at org.apache.batik.transcoder.SVGAbstractTranscoder.transcode(Unknown
> Source)
>
> Code is below
>
> JPEGTranscoder transcoder = new JPEGTranscoder();
> try {
> BufferedOutputStream bufferedoutputstream = new
> BufferedOutputStream(new FileOutputStream(target));
> transcoder.transcode(new TranscoderInput(file1), new
> TranscoderOutput(bufferedoutputstream));
> bufferedoutputstream.flush();
> bufferedoutputstream.close();
> }catch ( Exception ex ) {}
>
> What could be wrong and how to debug?
>
>


[Non-text portions of this message have been removed]

Hi everyone,

(Jake)
> Maybe it thinks that something is an XML entity that is not properly
> delimited. If you have something in your document like "&T_Edmonton",
> that might make sense. If this is the case, then you should escape the
> "&", so you would have "&T_Edmonton" in your document.

I guess Jake is right, you are likely dealing with invalid XML.

Jake's hint it that you have broken textual content, in the sense that XML
reserved characters (like '&', '<', '>', etc.) [1] were not properly escaped.
You should check if it's the case.

I'd also hint towards a possible predefined XML entity being wrongly referenced.
You can see an example of this mechanism working here [2] (the "Smile" is
defined as an XML entity, for easier referencing later). In that case, Batik's
message is correct and you only need to add a semicolon (as in "&T_Edmonton;")
to fix the broken content.

You may also be interested in knowing that Batik has a dedicated users list [3],
which may be helpful for searching for related messages and asking for
Batik-related technical questions. ;-)

Hope this helps,
  Helder

[1]
http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Pr\
edefined_entities_in_XML
[2] http://www.w3.org/TR/SVG11/images/coords/PreserveAspectRatio.svg
[3] http://xmlgraphics.apache.org/batik/mailing-lists.html#batik-users

--- In svg-developers@yahoogroups.com, "heldermagalhaes" <helder.magalhaes@...>
wrote:
>
> Hi everyone,
>
>
> I'd also take the opportunity to thank the organizing committee

...

> Yeah, I also hope to see the videos and also the other multimedia material
(photographers were pretty active) made available soon. ;-)
>

Absolutely, my thanks as well. I spoke to the conference photographer and she
said it wasn't decided yet, where they'd post the fotos. I'd encourage everyone
to put them on flickr (tag: svgopen) as it's easier to share, comment and
identify the people in the fotos.

Michael

is there a way to reload <group> from source?

the document contains a large group every line of which is altered
using script,
in this case four stopwatches.

obviously one could cycle with script through every object and reset
to zero**,
but is there a way to just reload the group from the source code of
the document?

if not, would this merit taking to the wg?
if not, why not?

regards

Jonathan Chetwynd

**unfortunately declarative animation isn't suitable for this
project....

Hi, Jonathan-

Jonathan Chetwynd wrote (on 9/5/10 10:33 AM):
> is there a way to reload<group>  from source?
>
> the document contains a large group every line of which is altered
> using script, in this case four stopwatches.
>
> obviously one could cycle with script through every object and reset
> to zero**,  but is there a way to just reload the group from the
> source code of the document?

I don't know of a way to "reload" the element, per se.

However, if you know in the beginning that you want to treat the <g>
element (and its children) this way, you can make a deep clone of the
<g>, and simply replace the original <g> with the clone in order to
"refresh" it.

Here's some untested rough code:

var originalG = null;
var currentG = null;

function init() {
   currentG = document.getElementById("watch-g");
   originalG = currentG.cloneNode(true); // 'true' means copy all the
children, too
}

function reload () {
   currentG.parentNode.replaceChild( originalG, currentG );
   originalG = currentG.cloneNode(true); // save a new fresh copy for later
}


> if not, would this merit taking to the wg?
> if not, why not?

This would not be an issue for the SVG WG, but for the DOM folks in the
WebApps WG.  But since this is not a overwhelmingly common use case, and
there is relatively easy (if convoluted) workaround, I doubt that there
would be much will among the browser vendors to add new functionality to
allow you to properly reload portions of the document; if for no other
reason, it would force them to cache 2 copies in memory, doubling the
memory footprint of each document.

Hope that helps.

Regards-
-Doug

Hi everyone,

I'd also take the opportunity to thank the organizing committee of the SVG
Open, I really enjoyed it.

If someone is interested how long the trip on the river Seine was..., please
have a look on my travel diary:

http://www.uismedia.de/mappetizer/traveldiary/TravelDiary_Ruth/index.html (
it is an SVG application!)
(Choose language) Click on "City Walks" -> "Paris and the SVG Open 2010"
Click on all the tracks and waypoints to get more information.
Click on the picture in the info tab, to see more pictures (unfortunately
not so much of the conference and the dinner event... because we had such an
active photographer..).

Cheers,
Ruth + Armin

Hi

I'm looking for a viewer to look at Postgis spatial data probably through a data
aware component rather than a direct connection.

Using Postgis SVG appears to be quite doable.

What I need is -
Viewer with
-Layer ability
-Pan
-Zoom
-OnClick coordinate capture
-Preferably as a Delphi, Java or xml app.

If anyone has some thoughts or suggestions please don't hesitate.

Bob

Yes I want to understand how much is expected from an editing tool which does
the validation and highlightling of all the tags and attributes and provides
content assist.

So i want to understand which version of SVG spec should be supported here - >
the full svg 1.1 or tiny svg 1.2 ?

--- In svg-developers@yahoogroups.com, "Erik Dahlstrom" <ed@...> wrote:
>
> On Thu, 26 Aug 2010 09:57:12 +0200, sarika_sinha <sarika_sinha@...>
> wrote:
>
> > Hi,
> > I am developing an editor to support html5. will like to understand the
> > svg support in html5 in non xl format.
>
> If you're developing an editor, just follow the spec(s). The html5 spec
> defines parsing rules for everything that is contained within an html
> document, and the svg spec defines how to render it. Parsing standalone
> svg files? Use an xml parser (possibly you need to tell it that the 'id'
> attribute is of type <ID>, see
> http://www.w3.org/TR/SVGTiny12/types.html#DataTypeID). If you need to
> validate svg attributes then refer to the SVG spec.
>
> > As  there will be no public id  and svg namespace used, how much of svg
> > support is expected ?
>
> I don't understand your question. The (html or xml) parser generates a DOM
> (note that the svg elements will be put in the svg namespace), and the DOM
> is rendered by the svg renderer.
>
> Did you mean how much svg support is expected from your tool? In that case
> I'd say it depends on what it's supposed to do. E.g for a text-editor with
> syntax highlighting I'd expect it to recognize all svg elements and
> attributes.
>
> Cheers
> /Erik
>
> --
> Erik Dahlstrom, Core Technology Developer, Opera Software
> Co-Chair, W3C SVG Working Group
> Personal blog: http://my.opera.com/macdev_ed
>

Hi,

If you are not targeting the web browser or a mobile device, but more embedding
in other applications I would use one of the many open source or commercial GIS
applications out there that can view Postgis. Most of them can also be embedded
in other applications.

Java: gvsig, OpenJump, uDig
C++: QuantumGIS/QGIS
Windows/ActiveX/.net: tatukgis (commercial), mapwindow (opensource).

Hope this helps,
Andreas

--- In svg-developers@yahoogroups.com, "pawley_bob" <pawley_bob@...> wrote:
>
> Hi
>
> I'm looking for a viewer to look at Postgis spatial data probably through a
data aware component rather than a direct connection.
>
> Using Postgis SVG appears to be quite doable.
>
> What I need is -
> Viewer with
> -Layer ability
> -Pan
> -Zoom
> -OnClick coordinate capture
> -Preferably as a Delphi, Java or xml app.
>
> If anyone has some thoughts or suggestions please don't hesitate.
>
> Bob
>

"I've also done lots of interesting experimentation with SVG (Scalable Vector
Graphics), which I think it great. SVG is a standard. Support is directly in the
browser itself."

Why a Browser-Based GUI? - The Time Bandit
http://highlevellogic.blogspot.com/2010/09/why-browser-based-gui-time-bandit.htm\
l

It's not a problem. It's an opportunity.
Correlation does not prove causality.      Truphone     












[Non-text portions of this message have been removed]

Hi,

I have accuracy problems within a map application concerning tiled images:

http://www.uismedia.de/mappetizer/traveldiary/TravelDiary_Ruth/index.html

-> change "maps" in the toolbar over the map, e.g. OSM, World Imagery.
You see small white lines/gaps between the tiles (on each zooming level...).

What is wrong? - Me? - SVG implementation in the browsers?

It is interesting:

http://www.mappetizer.de/en/examples/usa_2/index.html
is another example which takes over the tiling system of the "Deep Zoom
Composer" of Microsoft.
They have an overlap of the images with 1 pixel. Here you don't see those
gaps when zooming in or out. But this result is harder to receive (more
code).

--- Ruth



uismedia
Dr. Ruth Lang und Armin Müller
Vimystraße 1b
85354 Freising
Germany
Fon: ++49 (0)8161/23 28 70
Fax: ++49 (0)8161/23 28 74
e-Mail: R.Lang@...
http://www.uismedia.de
http://www.mappetizer.de
http://twitter.com/uismedia (Twitter)
-------------------------------------------------------------------------
Besuchen Sie mein Travel-Diary / Visit my travel diary:
http://www.uismedia.de/mappetizer/traveldiary/TravelDiary_Ruth/index.html
-------------------------------------------------------------------------

On Thu, 16 Sep 2010 10:40:27 +0200, Ruth Lang <R.Lang@...> wrote:

> Hi,
>
> I have accuracy problems within a map application concerning tiled
> images:
>
> http://www.uismedia.de/mappetizer/traveldiary/TravelDiary_Ruth/index.html
>
> -> change "maps" in the toolbar over the map, e.g. OSM, World Imagery.
> You see small white lines/gaps between the tiles (on each zooming
> level...).
>
> What is wrong? - Me? - SVG implementation in the browsers?

My guess is that what you see is the antialiasing around the edges of each
tile. You can use image-rendering="optimizeSpeed" to disable the
antialiasing for images (in most viewers).

Cheers
/Erik

--
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed

Hi Erik,
Thanks for your answer.
I played already with these attributes.
But especially with image-rendering="optimizeSpeed" I have my "problems",
because it lowers the quality of the images (you see the differences quite well
with OpenStreetMap) so I don't like to use that.
And: the gaps are still there, seen best with the WorldImage (tested in all
browsers..)

Here are some screenshots:
With optimizeSpeed:
http://www.mappetizer.de/en/examples/OSM_OptimizeSpeed.png
http://www.mappetizer.de/en/examples/WorldImage_OptimizeSpeed.png

No optimizeSpeed:
http://www.mappetizer.de/en/examples/OSM_NoOptimizeSpeed.png
http://www.mappetizer.de/en/examples/WorldImage_NoOptimizeSpeed.png

--- Ruth

> Hi,
>
> I have accuracy problems within a map application concerning tiled
> images:
>
> http://www.uismedia.de/mappetizer/traveldiary/TravelDiary_Ruth/index.html
>
> -> change "maps" in the toolbar over the map, e.g. OSM, World Imagery.
> You see small white lines/gaps between the tiles (on each zooming
> level...).
>
> What is wrong? - Me? - SVG implementation in the browsers?

My guess is that what you see is the antialiasing around the edges of each
tile. You can use image-rendering="optimizeSpeed" to disable the
antialiasing for images (in most viewers).

Cheers
/Erik

--

Hi,

I have a project on SVG display system.
I use Batik of Appache. Basically I work on the DOM.

1*) Is it possible to render partially a document? Like if I have the DOM tree,
can I render only some parts?

2*) can I render 2 or more documents in the same SVGCanvas? like render the doc1
and update the Canvas with doc2 without loosing what has been in the Canvas.

thanks,




   CONVOLBO W Moise




[Non-text portions of this message have been removed]

Hi, You should really ask question nr 2 on the Batik mailing list.

Regarding question 1:

Have a look at the "display" and "visibility" attribute. display="none" means
that this part won't be rendered and isn't regarded as part or the DOM tree.
Visibility is a bit different - it just doesn't display but can still be
referenced and could still react on mouse-events if the pointer-events property
is set accordingly.

Andreas

--- In svg-developers@yahoogroups.com, Moise Convolbo <wend_kuuni@...> wrote:
>
> Hi,
>
> I have a project on SVG display system.
> I use Batik of Appache. Basically I work on the DOM.
>
> 1*) Is it possible to render partially a document? Like if I have the DOM
tree,
> can I render only some parts?
>
> 2*) can I render 2 or more documents in the same SVGCanvas? like render the
doc1
> and update the Canvas with doc2 without loosing what has been in the Canvas.
>
> thanks,
>
>
>
>
>   CONVOLBO W Moise
>
>
>
>
> [Non-text portions of this message have been removed]
>

Hi,

I'm just starting to learn about SVG SMIL animation, and I'm
attempting to perform a simple task involving linear gradients. What
I'd like to do is have a simple linear gradient with a set of stops,
and then animate the stops so that the colours "cycle" through the
fill. What I mean by this is, given something like the following
gradient

       <linearGradient id="MyGradient">
         <stop offset=".10" stop-color="red"/>
         <stop offset=".30" stop-color="green" />
         <stop offset=".50" stop-color="yellow" />
         <stop offset=".70" stop-color="blue" />
         <stop offset=".90" stop-color="blue"/>
       </linearGradient>

The first stop should go from offset .1 to 1, then 0 to .1, and
repeat. The second stop offset should go from .3 to 1, then 0 to .3,
and so on.

It's easy enough for me to imagine how to represent this in script, as
each stop is simply being animated the same way at each time step,
starting from a different offset, but it's not clear to me how you can
accomplish the same thing using SMIL.

If anyone has any insight into this, I'd appreciate it if you could
let me know. Thanks,

Jake

Hi Jake,

I've played some with what I think is the same thing you've been trying to do
and haven't been completely satisfied with my results.

Take a look at the first cluster of links at
http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2008/edges_of_plausibility.htm
In those I do something with animating the position of gradients within a stop.

Two older examples using script and dating from before Chaals McCathie Neville
had emerged from his pouch, can be seen here:
http://srufaculty.sru.edu/david.dailey/svg/waves.html 
http://srufaculty.sru.edu/david.dailey/svg/eggcloning3.svg. They ripple
gradients out from a center point deflecting content on top via feDisplacement
which I think is only implemented in IE/ASV and Opera so far. (Though Chrome
shows hints of starting to play with feDisplacement which is a good thing!)

The problem I seem to recall having was in getting the transitions between waves
to "match up", one of several boundary problems that I've bumped into from time
to time.

Hope this might help, and I'll be interested in whatever solutions you find.

cheers
David


   ----- Original Message -----
   From: Jacob Beard
   To: svg-developers
   Sent: Monday, September 20, 2010 4:15 PM
   Subject: [svg-developers] animating gradients



   Hi,

   I'm just starting to learn about SVG SMIL animation, and I'm
   attempting to perform a simple task involving linear gradients. What
   I'd like to do is have a simple linear gradient with a set of stops,
   and then animate the stops so that the colours "cycle" through the
   fill. What I mean by this is, given something like the following
   gradient

   <linearGradient id="MyGradient">
   <stop offset=".10" stop-color="red"/>
   <stop offset=".30" stop-color="green" />
   <stop offset=".50" stop-color="yellow" />
   <stop offset=".70" stop-color="blue" />
   <stop offset=".90" stop-color="blue"/>
   </linearGradient>

   The first stop should go from offset .1 to 1, then 0 to .1, and
   repeat. The second stop offset should go from .3 to 1, then 0 to .3,
   and so on.

   It's easy enough for me to imagine how to represent this in script, as
   each stop is simply being animated the same way at each time step,
   starting from a different offset, but it's not clear to me how you can
   accomplish the same thing using SMIL.

   If anyone has any insight into this, I'd appreciate it if you could
   let me know. Thanks,

   Jake




[Non-text portions of this message have been removed]

Hi David,

Thanks for the reply. The demos you linked to were interesting and instructive.

In the end, it seems I was able to find a fairly elegant way of
accomplishing this task using SMIL (tested in Chromium):

http://live.echo-flow.com/svg/scrolling-colors.svg

The solution basically hinges on the gradient's spreadMethod="reflect"
attribute, and using animateTransform to continually translate the
gradient vector.

As I said, I think this is rather elegant, but if anyone can think of
a better approach, I'd be very interested to know.

Thanks,

Jake

On Mon, Sep 20, 2010 at 6:40 PM, ddailey <ddailey@...> wrote:
>
>
>
> Hi Jake,
>
> I've played some with what I think is the same thing you've been trying to do
and haven't been completely satisfied with my results.
>
> Take a look at the first cluster of links at
http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2008/edges_of_plausibility.htm
> In those I do something with animating the position of gradients within a
stop.
>
> Two older examples using script and dating from before Chaals McCathie Neville
had emerged from his pouch, can be seen here:
http://srufaculty.sru.edu/david.dailey/svg/waves.html
http://srufaculty.sru.edu/david.dailey/svg/eggcloning3.svg. They ripple
gradients out from a center point deflecting content on top via feDisplacement
which I think is only implemented in IE/ASV and Opera so far. (Though Chrome
shows hints of starting to play with feDisplacement which is a good thing!)
>
> The problem I seem to recall having was in getting the transitions between
waves to "match up", one of several boundary problems that I've bumped into from
time to time.
>
> Hope this might help, and I'll be interested in whatever solutions you find.
>
> cheers
> David
>
> ----- Original Message -----
> From: Jacob Beard
> To: svg-developers
> Sent: Monday, September 20, 2010 4:15 PM
> Subject: [svg-developers] animating gradients
>
> Hi,
>
> I'm just starting to learn about SVG SMIL animation, and I'm
> attempting to perform a simple task involving linear gradients. What
> I'd like to do is have a simple linear gradient with a set of stops,
> and then animate the stops so that the colours "cycle" through the
> fill. What I mean by this is, given something like the following
> gradient
>
> <linearGradient id="MyGradient">
> <stop offset=".10" stop-color="red"/>
> <stop offset=".30" stop-color="green" />
> <stop offset=".50" stop-color="yellow" />
> <stop offset=".70" stop-color="blue" />
> <stop offset=".90" stop-color="blue"/>
> </linearGradient>
>
> The first stop should go from offset .1 to 1, then 0 to .1, and
> repeat. The second stop offset should go from .3 to 1, then 0 to .3,
> and so on.
>
> It's easy enough for me to imagine how to represent this in script, as
> each stop is simply being animated the same way at each time step,
> starting from a different offset, but it's not clear to me how you can
> accomplish the same thing using SMIL.
>
> If anyone has any insight into this, I'd appreciate it if you could
> let me know. Thanks,
>
> Jake
>
> [Non-text portions of this message have been removed]
>
>

On Tue, 21 Sep 2010 08:41:52 -0700, Jacob Beard <jbeard4@...>
wrote:

> In the end, it seems I was able to find a fairly elegant way of
> accomplishing this task using SMIL (tested in Chromium):
>
> http://live.echo-flow.com/svg/scrolling-colors.svg

Works nicely in Opera too.

> The solution basically hinges on the gradient's spreadMethod="reflect"
> attribute, and using animateTransform to continually translate the
> gradient vector.

I agree that this is pretty elegant.

I made an alternative version using spreadMethod-"repeat", adding a red
gradient stop at 1.1 (to get a smooth transition from violet back to red),
and setting the transform to animate from 0 to 1.1 - this means the
colours just slide across from left to right smoothly - since that was
what I had thought you were aiming at originally.

I think this actually violates the SVG spec which says that stops are
forced to take values in the range [0,1] if they fall outside it -
http://www.w3.org/TR/SVG/pservers.html as I read it. So I'm intrigued
about what it does in other browsers, and whether it is worth filing a
change request...

cheers

Chaals

--
Charles McCathieNevile  Opera Software, Standards Group
      je parle français -- hablo español -- jeg lærer norsk
http://my.opera.com/chaals       Try Opera: http://www.opera.com

Hi Charles,

I tried what you suggested, and it seems to give me a hard edge
between the violet and red regions. I'm not sure why it does this
though, as it seems to me that it should transition smoothly from
violet to red. To resolve this, I tried changing the x2 attribute to
1.1, but that did not seem to have an effect. Perhaps you could post
your code.

I'm now trying to achieve a similar effect with radial gradients.
Unfortunately, I haven't been able to think of a way to do this using
SMIL, as I can't seem to find a way to express the notion of moving a
gradient stop to the center of the radial gradient, so I've tried to
implement it with script. Here's what I have so far:

http://live.echo-flow.com/svg/scrolling-radial-colors.svg

Visually, this is not too bad. One thing I would like to improve,
though, is to find a way that is less visually jarring to add a
gradient stop to the center. Even when offset=0, the new stop just
kind of "pops in". I think it would be better to have more of a
"zooming" effect, where the new color appears as just a pinpoint and
then gradually expands. Based on this, I think a solution may be found
using scale transformations in conjunction with adjusting the offset
and moving the stop in DOM, but I'm not sure.

If anyone has any suggestions as to how to improve this using script,
or even how to achieve this effect using SMIL, I'd greatly appreciate
it if you could let me know.

Thanks,

Jake

On Tue, Sep 21, 2010 at 12:13 PM, Charles McCathieNevile
<chaals@...> wrote:
>
>
>
> On Tue, 21 Sep 2010 08:41:52 -0700, Jacob Beard <jbeard4@...>
> wrote:
>
> > In the end, it seems I was able to find a fairly elegant way of
> > accomplishing this task using SMIL (tested in Chromium):
> >
> > http://live.echo-flow.com/svg/scrolling-colors.svg
>
> Works nicely in Opera too.
>
> > The solution basically hinges on the gradient's spreadMethod="reflect"
> > attribute, and using animateTransform to continually translate the
> > gradient vector.
>
> I agree that this is pretty elegant.
>
> I made an alternative version using spreadMethod-"repeat", adding a red
> gradient stop at 1.1 (to get a smooth transition from violet back to red),
> and setting the transform to animate from 0 to 1.1 - this means the
> colours just slide across from left to right smoothly - since that was
> what I had thought you were aiming at originally.
>
> I think this actually violates the SVG spec which says that stops are
> forced to take values in the range [0,1] if they fall outside it -
> http://www.w3.org/TR/SVG/pservers.html as I read it. So I'm intrigued
> about what it does in other browsers, and whether it is worth filing a
> change request...
>
> cheers
>
> Chaals
>
> --
> Charles McCathieNevile Opera Software, Standards Group
> je parle français -- hablo español -- jeg lærer norsk
> http://my.opera.com/chaals Try Opera: http://www.opera.com
>

Hi,

Is it possible to animate path data using SMIL? For example, if I have
a simple arc:

<path d="M0,400 A100,100 0 1,1 800,400"/>

And would like to animate the endpoint, so that it starts at 0,0 and
ends at 800,400 over a duration of 3 seconds, for example. Because "d"
contains path data, and not simple numerical values, it's not clear to
me whether the path data can be animated with SMIL. It seems like, in
order to animate path data with SMIL, you might need an expanded path
data syntax, like that described in Section 3.1 of the paper
"Compressing SVG with EXI" from the SVG Open 2010 conference, as this
gives you elements for each path segment, each of which has simple
numerical attributes that could potentially be animated:
http://svgopen.org/2010/papers/3-Compressing_SVG_with_EXI/index.html

But perhaps I'm missing something, and it is currently possible to
animate path data with SMIL.

If anyone has any insight into this, I'd appreciate it if you could
let me know. Thanks,

Jake

On Tue, 21 Sep 2010 12:02:48 -0700, Jacob Beard <jbeard4@...>
wrote:

> Hi,
>
> Is it possible to animate path data using SMIL? For example, if I have
> a simple arc:
>
> <path d="M0,400 A100,100 0 1,1 800,400"/>

Yeah, although you should make the number of points the same. So for
turning a triangle into a square I might use

<path d="L 100 0 L 100 0 L 100 100 z">
    <animate attributeName="d" ...
      to="L 100 0 L 100 100 L 0 100 z"/>
</path>

cheers

Chaals

> And would like to animate the endpoint, so that it starts at 0,0 and
> ends at 800,400 over a duration of 3 seconds, for example. Because "d"
> contains path data, and not simple numerical values, it's not clear to
> me whether the path data can be animated with SMIL. It seems like, in
> order to animate path data with SMIL, you might need an expanded path
> data syntax, like that described in Section 3.1 of the paper
> "Compressing SVG with EXI" from the SVG Open 2010 conference, as this
> gives you elements for each path segment, each of which has simple
> numerical attributes that could potentially be animated:
> http://svgopen.org/2010/papers/3-Compressing_SVG_with_EXI/index.html
>
> But perhaps I'm missing something, and it is currently possible to
> animate path data with SMIL.
>
> If anyone has any insight into this, I'd appreciate it if you could
> let me know. Thanks,
>
> Jake


--
Charles McCathieNevile  Opera Software, Standards Group
      je parle français -- hablo español -- jeg lærer norsk
http://my.opera.com/chaals       Try Opera: http://www.opera.com

--- In svg-developers@yahoogroups.com, Jacob Beard <jbeard4@...> wrote:
>
> Visually, this is not too bad. One thing I would like to improve,
> though, is to find a way that is less visually jarring to add a
> gradient stop to the center.

What about this variant:

http://wwwpub.zih.tu-dresden.de/~s9783698/scrolling-radial-colors.xml

Here is the code:


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 400" version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" >

   <desc>Example lingrad01 - fill a rectangle using a
            linear gradient paint server</desc>
   <g>
     <defs>
       <radialGradient id="circularRainbowGradient" r=".6">
         <!-- First and last stops have identical color,
              innermost stop doesn't move (see script) -->
         <stop offset=".0" stop-color="violet"/>
         <stop offset=".0" stop-color="red"/>
         <stop offset=".2" stop-color="orange"/>
         <stop offset=".4" stop-color="yellow"/>
         <stop offset=".6" stop-color="green"/>
         <stop offset=".8" stop-color="blue"/>
         <stop offset="1" stop-color="violet"/>
       </radialGradient>
     </defs>

     <circle fill="url(#circularRainbowGradient)" stroke="none" cx="400" cy="100"
r="100">
     </circle>
   </g>
	 <script type="application/ecmascript"><![CDATA[
		 var RATE=10;
		 var STEP=.001;

		 circularRainbowGradient=document.getElementById("circularRainbowGradient");

		 var stops = circularRainbowGradient.getElementsByTagName("stop")

		 //console.log(stops);
		 //alert(stops[1].offset.baseVal)

		 var intervalId = window.setInterval(function(){
       // Leave zeroth stop alone
			 for (i=1; i<stops.length; i++) {
         var stop = stops.item(i)
				 var stopParent=stop.parentNode;

				 var newOffset = stop.offset.baseVal+STEP;
				 if(newOffset > 1.2){
					 //console.log(stop.getAttributeNS(null,"stop-color") + " - back to start");
           // Change color of stop to color of following stop so that outermost
and innermost
           // stop colors will match
          
stop.setAttributeNS(null,"stop-color",stops.item(i-1).getAttributeNS(null,"stop-\
color"))
					 stopParent.removeChild(stop);
					 stopParent.insertBefore(stop,stops.item(0));
					 stop.offset.baseVal=0;
				 }else{
					 //console.log(stop.getAttributeNS(null,"stop-color") + " : " + newOffset %
1);
					 stop.offset.baseVal=newOffset % 1.2;
				 }
			 }
		 },RATE);
     ]]>
	 </script>
</svg>