In Blogger posts if you want to embed SVG images that make use of JavaScript (for animation control) you need to use the html
<embed> tag since
<object> and
<img> don't allow scripting. You'll have to edit the HTML directly to use the
<embed> tag as in the following example:
<embed src="http://rsasandbox.appspot.com/embed.svg" type="image/svg+xml" width="230" height="230"/>
The following embedded SVG example uses the
<animateMotion> SVG element with
repeatCount="indefinite" so that the animation continues indefinitely. The animation is paused and restarted by calling JavaScript functions as a result of SVG element
onclick event processing, e.g.,
onclick='Pause(evt)' and
onclick='Play(evt)'.
Thanks, Ryan! I wondered why img doesn't work in my post, but works on standalone page. But it looks like object tag works for me well, in this post: http://eugenekardash.blogspot.com/2013/11/svg-xml-based-vector-graphics-for-web.html
ReplyDeleteHi Eugene, I'm glad this worked for you. Very impressive demonstration on your page!
ReplyDeleteThis is a very helpful post.
ReplyDeleteI'm still left wondering, are there other ways to host a svg in Blogger? Isn't one of the useful things about svg the fact that they can be coded directly within the html, avoiding the need to externally host the svg? Provided the image was of tractable complexity, it seems like this would be the preferable option. All the examples here (and the ones Ryan posted) seem to use the same method you mentioned here, which is to host the svg externally and create an element in blogger for it.
I tried to post an svg by adding the source into the html of a Blogger post. Actually, Blogger lets it stay, and the browser tries to render it. But it seems that the drawback is that Blogger tries to parse the internal svg code, and adds all kinds of tags that break it. At that point I gave up, but now I'm wondering if you could include the svg markup directly in the html source if you could write it compliant with what Blogger expects. That could be useful for simple graphical illustrations, although how you would produce these is still a bit of a mystery.