Playing videos in SVG

As per latest SVG recommendation by W3C which is v1.2

SVG doesn’t have native support for adding videos.
Video should have been loaded either a texture of a shape or there should have been a video element like we have in SVG.

In the recommendation v2 for SVG it is proposed that it should be supported, in the following requirement specifications

But we can add HTML content within SVG markup using <foreignObject>.

The foreignobject can either contain an iframe, for example to embed a youtube video we can have:
<iframe width=’500′ height=’300′ src=’youtube video URL‘ frameborder=”0″>

or we can have video tag within foreignobject:

<video src=”video URL” style=”width:300px;      width:500px”>


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s