Geekly Articles each Day
📜 ⬆️ ⬇️

Internet Explorer 9: The Most Comprehensive Developer Guide (and Not Only), Part 2

image

In the first part of this material, I talked about the innovations in Internet Explorer 9: support for CSS3, HTML5, DOM L2 / L3, and others. The article ended in an interesting place: support for rendering SVG graphics. We continue from this place.

In this part of the article I will tell you about the support for SVG, HTML5 Video and their acceleration through the GPU accelerator.
')
The article is large, so the material about the WOFF fonts, ICC profiles, TIFF and JPEG XR formats, changes in the developer tools and the user interface will be in the next section.


History reference


First of all, I would like to plunge into history and see where the SVG technology came from and why its implementation in IE9 was so prolonged.

It is known that SVG is the fruit of the crossing of two technologies: PGML and VML. After instead of adopting VML, which was pushed through by Autodesk, Hewlett-Packard, Macromedia, Microsoft, and Visio, the W3C decided to form a new working group for the development of SVG, Microsoft did not support such a move and implemented VML in their products, including IE5, Microsoft Office 2000. Subsequently, VML became part of the international standards ISO / IEC 29500: 2008 and ECMA-376 that describe Office Open XML documents.

SVG has been developed since 1999 and in 2001 the recommendation was released version 1.1, which is valid to this day, while the version of SVG 1.2 remains in the form of drafts. Internet Explorer did not support SVG up to and including version 8, implementing only native support for Microsoft VML. But times are changing and a big surprise was the announcement in January 2010 that the IE team was on the W3C SVG working group . It became clear that in the upcoming IE9 support for SVG would appear, and so it turned out - there was such support in the first build presented.

Microsoft joining the SVG group immediately attended to the compatibility of the implementation of the standard. It turned out that many things in SVG are not clear enough and are implemented by browsers in different ways, for example:

image

With regard to this particular case, IE9 follows the SVG Tiny 1.2 specification, which instructs to skip the negative values ​​of the rx, ry attributes, but not to consider them an error (Opera does the same).

The seriousness of Microsoft’s intentions to support the SVG standards was confirmed by the release of the official VML to SVG Migration Guide .

SVG in Internet Explorer 9


Internet Explorer 9 implements the SVG standard according to the following SVG 1.1 2nd Edition Full document.

According to HTML5, SVG-code can be included in the markup along with HTML. Accordingly, CSS can be applied to SVG tags. The ability to embed images in SVG allows you to overlay graphics and text on top of them. For example, in the developers blog, you can find this code.

<! DOCTYPE html>
<svg width = "120" height = "90">
<style>
.highlight {
stroke-width: 5px;
stroke: white;
fill: none;
}
</ style>
<image x = "0" y = "0" width = "120" height = "90" xlink: href = " photos-a.ak.fbcdn.net/photos-ak-sf2p/v160/140/48/1107073 /n1107073_31705640_3439.jpg "/>
<circle cx = "90" cy = "50" r = "15" class = "highlight" />
<circle cx = "22" cy = "47" r = "10" class = "highlight" />
<rect x = "0" y = "0" width = "120" height = "20" fill-opacity = ". 5" fill = "black" />
<text x = "5" y = "15" fill = "white" font-size = "8pt" font-family = "Verdana"> we saw giant otters! </ text>
<rect x = "0" y = "0" width = "120" height = "90" stroke-width = "1" stroke = "black" fill = "none" />
</ svg>

The result is the following image:

IE9 Platform Preview displaying the above svg. There is an image with two circles drawn on it.

Internet Explorer 9 supports four possible types of SVG code embedding: in HTML, in XHTML, in the object tag, as a .svg document. The following table demonstrates these features:

image

By the way, the support of the SVG element inside the object has not yet been implemented by any other browser. Yes, and other features are also not yet available in the browsers of competitors (columns are represented by Mozilla Firefox 3.6.3, Opera 10.52, Apple Safari 4.05, Google Chrome 4.1). Tests are presented in conjunction with the W3C.

image

image

You can get acquainted with these and other summary tables of test results of browsers through tests developed jointly with the W3C at this address . I am planning a separate article on this topic.

However, IE9 does not implement absolutely all the features of SVG right now. The first and second test versions of IE9 implement support for the following SVG features:
At the same time, at the moment, the following things are not implemented, which we will see in subsequent test builds:
The great potion of IE9 is that the developer’s tools presented in it allow editing svg-code on the fly, thus turning IE9 into a kind of SVG editor.

GPU acceleration, HTML5 Video and codecs


Microsoft in the upcoming Internet Explorer 9 is the first to introduce innovative GPU-accelerated vector graphics and HTML5 video. In addition, thanks to support for Direct2D and DirectWrite, in addition to accelerating graphics, the display of fonts and their smoothing are accelerated through the GPU.

Here it must be said that manufacturers of other browsers were quick to announce a similar support for these features. Such progress, as a result of competition, is very good.

HTML5 video support in IE9 was demonstrated at the MIX conference, but it did not get into the first two test builds. But it was stated that in June, in the third build, we will see the HTML5 video. It is noteworthy that HTML5 Video in IE9 is also accelerated through the GPU, which allows you to watch HD-video without problems and load on the CPU. In the course of MIX, for example, they showed the display of two HD movies simultaneously with the minimum load on the CPU, while Chrome could not cope with one video.

An interesting question about codecs. It is known that there is no consensus on which codec to use as standard in the HTML5 specification. Some say about Theora, others for h264, Google added fuel to the fire, which launched the WebM project by opening its video codec.

Microsoft’s position is this: IE9 will support h264 out of the box, as it is built into the systems on which IE9 will be distributed. In addition, Microsoft supported the WebM project and announced support for the codec, but only if the user installs it on Windows himself. This is caused by the architecture of IE, which is part of the operating system uses system codecs, but not embedded in itself. Accordingly, to support any new codec in IE, it must be installed in the system. h264 is built into vista and windows 7 initially and with no problems. More information about the position of Microsoft can be found in the IE developer blog .

You can evaluate the SVG GPU acceleration during the tests on a special test page prepared by the developers.

Examples and demos


As examples of using SVG, I will cite materials from the developers blog:

<? xml version = "1.0" standalone = "no"?>
<! DOCTYPE svg PUBLIC "- // W3C // DTD SVG 1.1 // EN"
" Www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd ">
<svg version = "1.1" xmlns = " www.w3.org/2000/svg ">
<rect fill = "orange"
stroke = "black"
width = "150"
height = "75"
x = "50"
y = "25" />
</ svg>

image

<polyline points = "15, 5, 100 8.3 150"
fill = "orange"
stroke = "black"
stroke-width = "4" />

image

<polygon points = "15, 5, 100 8.6 150"
fill = "orange"
stroke = "black"
stroke-width = "4" />

image

< path d = "M30,60 l 50,0
a25.45 0 0.1 50.0 l 50.0 "
fill = "green"
stroke = "blue"
stroke-width = "4" />

image

You can try out other rich SVG demonstrations on special pages prepared by the Internet Explorer team, here I will give them a brief summary:

Atlas zur Europawahl 2004 in Deutschland


image

It is an interactive atlas of Germany with different statistics, the map is painted in different colors depending on the user's choice.

The United Nations Systems Organization Chart


image

The diagram is built on SVG with the possibility of almost infinite scrolling. Demonstrates the advantages of vector graphics in scaling.

Business charts


image

SVG demonstration showing the possibilities in the construction of native graphs and charts in the browser.

Svgoids


image

It is a game written in SVG and JavaScript. When you click the “n” button (adds animated primitives in the background), it clearly demonstrates the advantages of GPU-accelerated display of vector graphics.

Falling balls


image

Demonstration of GPU acceleration and speed of the new engine in IE9. The calculation of physics is performed in a demonstration using the Box2D Physics Engine . Since the code is large, the display of the balls may occur with a delay in the transition to the page for the first time, you must wait.

Practical examples of diagrams


image

The demo contains three diagrams created using SVG, which can be scrolled by approximating details.

Instead of conclusion


In this part of the article, I tried to talk about the implementation and support of SVG in Internet Explorer 9. In the next article I will talk about WOFF, ICC profiles, TIFF and JPEG XR formats, changes in developer tools and the user interface.

PS: what about the Canvas?


There are many questions about whether or not the canvas will support the IE9 element. There is no exact answer to this question, but there are a couple of speculations:
  1. Apple has patents on canvas and, as mentioned in the wiki , the licensing issue is not as open as we would like. It is possible that until the full resolution of this issue, Microsoft will be careful not to implement canvas.
  2. However, on the other hand, the Internet had the following leak : AMD stated (but then removed the statement) that IE9 will support and accelerate through the GPU canvas and that AMD video cards support all this.
As long as the question is not clear, we can take any of the points of view: whether or not the canvas will be in IE9.

Source: https://habr.com/ru/post/95238/

More articles:


All Articles