Category Archives: Vector Graphics

Streaming, SVG, video

Streaming of SVG animations on the Web

2 Comments

This week I gave a talk during the HTML5 Developer conference in San Francisco. The conference was very interesting and I met many people doing cool things with SVG. You can view the slides of my presentation here. The gist of this presentation is: “If you create timeline-based animations and you structure them properly, using some of my tools (packager and JS player) you can stream SVG content on the Web just like a video, including live or adaptive streaming”. I’m still working on those tools but will be releasing them soon.

[slideshare id=27516554&doc=thegraphicalweb2013-131024003537-phpapp02]

DASH, GPAC, SVG, WebVTT

WebVTT, MP4 files, DASH and GPAC

1 Comment

In a previous post, I described how to package and manipulate WebVTT content in MP4 files according to the latest ISO standard using MP4Box. Basic import of WebVTT or SRT file is as follows:

MP4Box -add file1.vtt:lang=en subtitle1.mp4

or

MP4Box -add file2.srt:FMT=VTT:lang=en subtitle2.mp4

and then, the basic usage to create DASH subtitle segments of 10 seconds:

MP4Box -dash 10000 subtitle.mp4:role=subtitle video.mp4

It is now possible to play these MP4 files with the GPAC players (on all supported platforms: Win, Mac, Linux, Android, iOS). So, try it out and let me know if it has bugs. You can for instance test this file or its DASH version.

MP4Client http://download.tsi.telecom-paristech.fr/gpac/webvtt/counter-vtt.mp4
MP4Client http://download.tsi.telecom-paristech.fr/gpac/webvtt/dash/counter-subtitles.mpd

This post describes some details on how the rendering was achieved.

[slideshare id=24802693&doc=m30301-reportonwebvttimplementation-130731093103-phpapp01]

Continue reading WebVTT, MP4 files, DASH and GPAC →

HTML5, SVG, video

Playing SVG content in HTML 5 track elements

Leave a comment

In my previous post, I described how to use the HTML 5 <video> element to play and control SVG animations, just like a video. HTML 5 and the <video> element also enable displaying text tracks on top of a video, and making sure it stays synchronized with the video thanks to the <track> element. However, this is currently implemented only in some browsers and mostly (only?) for the WebVTT format. Many JS players also provide WebVTT support. In this post, I describe an extension to Video.js to play and control SVG content synchronously on top of a video with the <track> element.

The syntax is pretty simple:

<video controls width='303' height='250'>
 <source src='video1.mp4' type='video/mp4' />
 <source src='video1.ogv' type='video/ogg' />
 <track kind='graphics' src='annotations.svg' srclang='en' label='Squares'/>
 <track kind='graphics' src='annotations2.svg' srclang='en' label='Circles'/>
</video>

And the result is shown below (example code is here) :

You can play the video, select a graphics track (displaying rectangles or circles whose positions and colors change every 5 sec in a 3-steps cycle) using the “Graphics” menu while the video is playing. You can then seek with the timeline, pause the video, play again and the graphics should stay synchronized. You can also change track while the video is playing.

HTML5, SVG, video

Playing SVG content in HTML5 video elements

2 Comments

Updated June, 4th 2013 following the SVG F2F meeting

I’ve been advocating for a while now for SVG to be treated as a first class citizen on the Web. One aspect where it’s still not the case, in my opinion, is in the handling of animated SVG. To me, it should be possible to view and stream animated graphics in the same way as a video, ie. you should be able to write:

<video controls width="640" height="480">
  <source src="myAnimatedFile.svg" type='image/svg+xml' />
</video>

and be able to play, pause, seek in the SVG content just like you would in a video. So, I’ve started tweaking a JavaScript HTML 5 video player for that. I’ve used Video.js. The result is demonstrated below and the code on GitHub. It is still ongoing work but you should already be able to select a cartoon, play it, pause it, seek while playing or while paused. This post discusses below the results and problems I had.

Continue reading Playing SVG content in HTML5 video elements →

GPAC, HTML5, SVG

HTML 5 media elements in SVG documents

1 Comment

As a follow-up of the work I did some time ago on the implementation of SVG Tiny 1.2 in GPAC (see this paper), and following the SVG WG decision to adopt the HTML 5 media elements in SVG 2.0, I decided to implement some support for these elements in GPAC, to better understand the differences between the old SVG Tiny 1.2 <video> element and the HTML 5 <video> element. As a result you can now run for example the following markup in GPAC:

   
   
     function init() {
       var v = document.getElementById("v");
       v.src = "video.mp4";
       v.play();
     }

Continue reading HTML 5 media elements in SVG documents →

Animation, Multimedia, SVG, Vector Graphics

SVG Comics

2 Comments

A long time ago (back in 2006), a student approached me to create comics for mobile phones. I suggested he used SVG Tiny 1.2 as this was a promising standard at that time in the mobile industry.

Recently, I came across his work on some old archive and I thought, since the student did not go further (I think, I lost track of him), it should be made available for people to get inspired by it. Continue reading SVG Comics →

Diffusion Curves, Streaming, SVG, Vector Graphics

Presenting SVG and my research work at Klagenfurt university

Leave a comment

Dear followers,

Last week, while teaching a course on interactive multimedia applications at Klagenfurt University, Austria, I gave a talk about the upcoming SVG 2 standard and about my research work in this area. You can find below the slides of this presentation:

[slideshare id=15641011&doc=2012-klagenfurt-researchtalk-121214112913-phpapp02]

Diffusion Curves, Vector Graphics

Freeform Vector Graphics Properties

Leave a comment

As a follow up of my previous post, I tried to check the behavior of the FVG approach with respect to closed curves. More precisely, I want to see if it would be possible for an author to edit a complex image by editing closed regions of the image. This would simplify the editing. The problem is that the closed regions have to be independent. One doesn’t want the outside of a region to change when tweaking the inside. This is valid for simple diffusion curves proposed by Orzan as they are solution to the Laplace equation and this property is actually used for culling and fast rendering of diffusion curves (see “Diffusion curve textures for resolution independent texture mapping”, by Sun et al.). How true is this for FVG curves, especially given that the solution is not the solution of a Laplace equation but to complex energy minimization? Continue reading Freeform Vector Graphics Properties →

DASH, SVG, Synchronization

Carriage of synchronized graphics and text in MP4 files

Leave a comment

Following my previous post on the synchronization of HTML 5 video and SVG content, we are now proposing a contribution to MPEG, for the upcoming meeting in Stockholm. This work is part of the activity on timed text (subtitling, caption …). We propose to store frame-based SVG, WebVTT, HTML … content as a particular timed metadata track. We take special care of secondary resources, i.e. resources pointed to by the SVG, HTML … The goal is to be able to use SVG, WebVTT or HTML timed tracks in Dynamic Adaptive Streaming over HTTP. Continue reading Carriage of synchronized graphics and text in MP4 files →

HTML5, SVG, Synchronization

HTML 5 Video and SVG Graphics Synchronization

1 Comment

My experience with multimedia standards, such as MPEG-4 BIFS, made me used to very good synchronization between video streams and graphics. So I wanted to check that the same was possible with web technologies, in particular with the plugin-less HTML5. To be more precise, I would like to display graphics on top of a video in a synchronized manner, with frame accuracy. The synchronization should be preserved when: playing, at different speed; paused; seeked; when the video stalls, …. I investigated several options and present some of the results. Continue reading HTML 5 Video and SVG Graphics Synchronization →