Embedding SVG in HTML

These HTML elements can be used to integrate SVG in a web page. They also have other uses, of course, but this reference focuses on their relationship to SVG.

<img>#

Embed a non-interactive, static or animated, image file. A linked SVG file is loaded in secure mode, meaning that no scripts run and no additional file assets are loaded. An <img> element is a single tag with no child elements.

src#: The URL of the image file to embed.
alt#: Alternative text description of the image, used if the image does not load or for screen readers. For SVG image sources, also add role="img" so that VoiceOver (the screen reader on Mac and iOS) actually uses the alt text.
crossorigin#: Whether to request the image file with cross-origin permissions. See the description in the SVG reference for details.
srcset#: A set of alternative URLs for the same image at different sizes, along with descriptors of the resolution or width for each. Not usually needed for SVG images.
sizes#: Information about how large the image will be drawn on the screen, for use by the browser when selecting a file from a srcset. Again, not usually needed for SVG images.
width#: A default width, as an integer number of pixels. Can be over-ridden with CSS.
height#: A default height, as an integer number of pixels. Can be over-ridden with CSS.

<picture> and <source>#

Define a set of image file options for the web browser to chose from, based on various conditions. A <picture> element must have an <img> element as a child, and may have one or more <source> element children listing alternative source files; the <img> will then be embedded with the selected image file as its source.

For use with SVG, reference your fallback image or default SVG view from the <img> element and use these attributes on <source>:

type#

The type of the alternative image source, as a media type (MIME type) string.

For SVG, the value should be image/svg+xml.

media#

A media query describing when this source applies.

Same format as in an @media rule or the media attribute of <link> stylesheet.
A <source> within <picture> must have at least one of type or media.

srcset#

The URL(s) of the image files, which should all represent the same image at different resolutions.

For SVG sources, this is normally just a single URL for all resolutions.
If you want to use a different graphic at different screen dimensions, or a different view of your SVG (as described in Chapter 9), use a separate <source> with a media attribute.
The simple src attribute is not used for <source> within <picture>.

<object>#

Embed an interactive document, which could be processed by a special plug-in instead of the main web browser. An <object> element must have a closing tag in HTML. It’s child content is treated as fallback, if the browser does not recognize or cannot process the object’s data type. The child content can also include <param> (parameter) elements, but they are not currently used for SVG.

An object’s dimensions can be affected by the intrinsic sizes of the embedded file, see Chapter 9 for details.

type#

The type of the object, as a media type (MIME type) string.

For SVG, the value should be image/svg+xml.
Required if data is not specified initially.

data#

The URL of the document that will be embedded (i.e., of the SVG file).

typemustmatch#

A flag that tells the browser not to render the document if the content-type specified by the server that provided the data file isn’t the same as this object’s type attribute.

No value; for XHTML, use an empty string or repeat the attribute name as the value.
Default (if the attribute is not included) is to use the actual document type specified by the web server.
Use typemustmatch if embedding files from web servers you don’t control. But remember: this doesn’t provide full sandboxing of the embedded document.

name#

A name for the object’s browsing context. Used to make this object the target of links from elsewhere on the page. See Chapter 9 for examples and limitations.

Must not start with a _ (underscore) character.

width#

A default width, as an integer number of pixels. Can be over-ridden with CSS.

height#

A default height, as an integer number of pixels. Can be over-ridden with CSS.

<embed>#

Embed an interactive document, which could be processed by a special plug-in instead of the main web browser. An <embed> should be functionally equivalent to <object>. The difference is in the syntax, which comes from pre-standardization HTML. An <embed> element is a single tag, with no child elements and therefore no fallback.

src#: The URL of the embedded document (equivalent to data on an <object>).
type, width, and height#: Equivalent to the same attributes on <object>.
other attributes#: Treated as parameters for the plug-in; they aren’t used in SVG.

<iframe>#

Embed an interactive document that is processed by the main web browser. The document’s functionality can be restricted using sandboxing, to turn off scripts, pop-ups, or other features. An <iframe> must have a closing tag, but cannot have any child elements.

Browsers are inconsistent about scaling and sizing <iframe> elements containing SVG documents; see Chapter 9 for details.

src#

The URL of the embedded document.

srcdoc#

Complete markup of an embedded HTML document (as an attribute value string).

name#

A name for the object’s browsing context. Used to make this object the target of links from elsewhere on the page.

sandbox#

Permissions and restrictions on the functionality of the embedded document. It should be used when embedding SVG that you don’t control.

Value is a space-separated list of permission tokens (like allow-forms or allow-scripts), or an empty string (which means full sandboxing).
Default (if the attribute isn’t present) is no sandboxing.
Has no effect if changed after the embedded document is loaded.

allowfullscreen, allowpaymentrequest, and allowUserMedia#

Additional permissions, separate from the sandbox ones.

No value (use an empty string in XHTML), the presence of the attribute grants the permission.

width#

A default width, as an integer number of pixels. Can be over-ridden with CSS.

height#

A default height, as an integer number of pixels. Can be over-ridden with CSS.

<svg>#

Not an HTML element, but included here for completeness because it is used to include SVG in an HTML page. When used in that way, the <svg> can be styled and positioned as a CSS replaced-content layout box, similar to an <img>. In other words, it can have borders and padding, and can be floated or absolutely positioned. Attributes for <svg> are described in the markup reference.