CODEWITHSUNDEEP
javascripthtmlcsssvg
Shea Levy
Shea Levy

Reputation: 5415

What's the preferred way to use SVG images in HTML5/CSS3/Javascript applications?

The options I know of are <svg>, <object>, <embed>, <img>, and <iframe>. What are their relative merits and drawbacks? Are there any others?

Upvotes: 2

Views: 905

Answers (1)

bennedich
bennedich

Reputation: 12380

<iframe>, <embed> and <object> all embed external svg files and they all allow scripting. <embed> seems to be more or less the de facto standard. The HTML5 spec says:

  • The iframe element represents a nested browsing context.

  • The embed element represents an integration point for an external (typically non-HTML) application or interactive content.

  • The object element can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin.

<svg> is for inline svg content only but can contain <image> elements with external content.

<img> and nested <image> elements does NOT allow scripting.

Sources:

Upvotes: 2

Related Questions