Geek Answers Handbook

Differences in using <iframe> and <embed> to display SVG and scripts

I am trying to create Dynamic SVG graphics, I understand that the only way to create dynamic SVG is to use a scripting language, so I have a few questions, basically I would like to load or paste SVG into an HTML web page and manage the graphics using tabs on the web page, and not hardcode ECMAscript in an SVG file. I'm not quite sure whether to use the embed or iframe tag to display SVG, here are my doubts about SVG and scripts:

  • What is the difference (in terms of scripting) when using the <iframe> or or <embed> to access SVG elements? Perhaps someone might include simple examples.
  • Can SVG evaluate mathematical expressions in element attributes (to be sure)?
+7
source share
3 answers

Do not use either <iframe> or <embed> . Instead, embed your SVG directly in XHTML, for example:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

In doing so, you have full access to the SVG DOM as part of your document. As shown in this example, you just need to be sure to create SVG elements (but not attributes) using the SVG namespace. You must also ensure that your website submits the content type for xhtml as application/xhtml+xml or text/xml , not text/html .

 phrogz$ curl --silent -I http://phrogz.net/svg/svg_in_xhtml5.xhtml | grep "Type" Content-Type: application/xhtml+xml

For more examples of JavaScript that process SVG mixed with HTML, see the various .xhtml files in the same directory . A particularly convincing example is this one , which dynamically creates hundreds of small SVG files in the form of inline elements that texts texts.

And to your question:

Can SVG evaluate math expressions in element attributes (just to be sure)?

In general, no. However, using SMIL Animation allows you to specify different methods for interpolating properties over time.

Finally, note that you do not need to put SVG in HTML to make it dynamic. You can script SVG with JavaScript directly. For example, see this test file (click the green button to start the simulation):
http://phrogz.net/svg/SpringzTest.svg

+4
source

What is the difference (in terms of scripts) when using tags and / or tags to access SVG elements? Perhaps someone might include simple examples.

<iframe> :

Scripts trying to access the contents of a frame are subject to policies of the same origin and cannot access most properties in another window object if it was loaded from another domain. This also applies to a script inside a frame trying to access its parent window. Cross-domain communication can still be achieved using window.postMessage.

Source: https://developer.mozilla.org/en/HTML/Element/iframe#Scripting

We access the contents of the iframe using the iframe_element.contentWindow method:

 <html> <body> <iframe id="SVG_frame" src="image.svg"></iframe> </body> <script> var SVG_frame = document.getElementById ( "SVG_frame" ); var SVG_content = null; function getContent () { SVG_content = SVG_frame.contentWindow; SVG_content ? alert ( "YAY!" ) : alert ( "BOO!" ); } SVG_frame.onload = getContent; </script> </html>

<embed> :

Example (view source): https://jwatt.org/svg/demos/scripting-across-embed.html

(both methods do not work, at least in Chromium)

<object>

Example (view source): https://jwatt.org/svg/demos/scripting-across-object.html

Can SVG evaluate mathematical expressions in (to be sure)?

like <element attribute="48/2*(9+3)"/> ?

I did not find a word about this in the SVG specification .

EDIT

Personally, I recommend using the <object> + data URI scheme and / or object_element.contentDocument . I tested in both Chromium and Firefox.

Aha! <object> has a similar security behavior for <iframe> : domain, the protocol must be the same for the site and the SVG file.

EDIT2

If you're wondering how to get vector graphics markup to work in Internet Explorer without plugins, then Vector Markup Language is the way to go.

+1
source

Well, it depends on what you mean by dynamics. In most cases, yes, probably you will need scripts. It makes no difference if you put your script in an HTML or SVG file, both will be executed by the same engine.

You can create interactive / animated svg content with declarative animation elements (aka SMIL). You can also create simple hover effects using CSS: hover rules or transitions using CSS3 Transitions .

XSLT can also be used to create some dynamic svg content, as it can transform your input into something else. However, it does not address the aspect of interaction.

You can access svg elements from an HTML file, which includes:

theEmbeddingElement.contentDocument (preferred but not working on <embed> ) or, alternatively, theEmbeddingElement.getSVGDocument() .

0
source

More articles:


All Articles