This is really cool. I might try to use it to visualize some steam transformations.
I wonder how feasible it would be to use CSS transformations to smoothly animate elements to their new locations/sizes on adjacent slides.
Identifying which elements are the same between slides wouldn’t be trivial in every case, especially if the tool generating the SVG for each side doesn’t make it easy to add identifying metadata to the SVG elements.
Yeah, animations would be neat. I don’t how difficult that would be to add (even if the tool generated all images, rather than merely combined them in the end). Reminds me of Hillel Wayne’s recent post.
It would be better to have the other slides in the svg as regular svg rather than in a string in javascript. Your slides could still be viewer with noscript, like in SVG editors.
Well I’m not an svg expert but I think the XML’d look like <svg><g id=slide1>...</g><g id=slide2></g></svg>, with each group having a transform to lay them out sensibly w/o JS, but corrected to an interactive slideshow if JS is actually present.
This is really cool. I might try to use it to visualize some steam transformations.
I wonder how feasible it would be to use CSS transformations to smoothly animate elements to their new locations/sizes on adjacent slides. Identifying which elements are the same between slides wouldn’t be trivial in every case, especially if the tool generating the SVG for each side doesn’t make it easy to add identifying metadata to the SVG elements.
Yeah, animations would be neat. I don’t how difficult that would be to add (even if the tool generated all images, rather than merely combined them in the end). Reminds me of Hillel Wayne’s recent post.
It would be better to have the other slides in the svg as regular svg rather than in a string in javascript. Your slides could still be viewer with noscript, like in SVG editors.
I’m not sure I follow, you mean like
<svg><svg id=slide1>...</svg>...<svg id=slideN>...</svg></svg>?Well I’m not an svg expert but I think the XML’d look like
<svg><g id=slide1>...</g><g id=slide2></g></svg>, with each group having a transform to lay them out sensibly w/o JS, but corrected to an interactive slideshow if JS is actually present.