Cannot display SVG charts in Internet Explorer 8

Question

Cannot display SVG charts in Internet Explorer 8

I made a servlet that launches and displays a BIRT report using the ReportEngine API.

The only problem is that SVG images (graphics) are not displayed in Internet Explorer 8 or 7. When you start the official BirtViewer web application, they also appear in IE8. I looked into the resulting BirtViewer HTML and noticed this meta tag:

<!-- Mimics Internet Explorer 7, it just works on IE8. --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

So I tried to add it manually to my own HTML file, but without changes. I also tried adding it through the servlet (which is the usual way):

 response.setHeader("X-UA-Compatible", "IE=EmulateIE7");

right after the setContentType , but didn’t even setContentType meta tag ...

EDIT : here is the HTML result from the official birtViewer webapp website (I cleared the parts without interest here):

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html> <head> <title>BIRT Report Viewer</title> <base href="http://192.168.81.92:5080/BirtViewer/webcontent/birt"> <!-- Mimics Internet Explorer 7, it just works on IE8. --> <meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible"> <meta content="text/html; CHARSET=utf-8" http-equiv="Content-Type"> <!-- a lot of scripts --> </head> <body class="BirtViewer_Body" style="overflow: hidden; direction: ltr" leftmargin="0px" scroll="no" onload="javascript:init( );"> <!-- Header section --> <table id="layout" cellspacing="0" cellpadding="0" style="width: 100%; height: 100%"> <tbody> <tr valign="top"> <td id="reportdialog" style="width: 0%; vertical-align: top"> <div id="exceptionDialog" class="dialogBorder" style="display: none; position: absolute; z-index: 220; top: 0px; left: 0px;"> <iframe id="exceptionDialogiframe" frameborder="0" scrolling="no" src="birt/pages/common/blank.html" style="z-index: -1; display: none; left: 0px; top: 0px; background-color: #ff0000; opacity: .0; filter: alpha(opacity = 0); position: absolute;" name="exceptionDialogiframe"> <html> <head></head> <body></body> </html> </iframe> <div id="exceptionDialogdialogTitleBar" class="dialogTitleBar dTitleBar"> <div class="dTitleTextContainer"> <table style="width: 100%; height: 100%;"> <tbody> <tr> <td class="dialogTitleText dTitleText">Exception</td> </tr> </tbody> </table> </div> <div class="dialogCloseBtnContainer dCloseBtnContainer"> <table style="width: 100%; height: 100%; border-collapse: collapse"> <tbody> <tr> <td><label class="birtviewer_hidden_label" for="exceptionDialogdialogCloseBtn"> Close </label> <div id="exceptionDialogdialogCloseBtn" class="dialogCloseBtn dCloseBtn"></div> </td> </tr> </tbody> </table> </div> </div> <!-- overflow is set as workaround for Mozilla bug https://bugzilla.mozilla.org/show_bug.cgi?id=167801 --> <div class="dialogBackground" style="overflow: auto;"> <div class="dBackground"> <div id="exceptionDialogdialogContentContainer" class="dialogContentContainer"> <table class="birtviewer_dialog_body" cellspacing="2" cellpadding="2"> <tbody> <tr> <td class="birtviewer_exception_dialog"> <table cellspacing="2" cellpadding="2"> <tbody> <tr> <td valign="top"><img src="birt/images/Error.gif"></td> <td> <table class="birtviewer_exception_dialog_container" cellspacing="2" cellpadding="4"> <tbody> <tr> <td> <div id="faultStringContainer" class="birtviewer_exception_dialog_message" style="width: 520px; overflow: auto;"><b> <span id="faultstring"></span> <b> </b> </b></div> <b> <b> </b> </b></td> </tr> <tr> <td> <div id="showTraceLabel" class="birtviewer_exception_dialog_label" tabindex="0"> Show Exception Stack Trace</div> <div id="hideTraceLabel" class="birtviewer_exception_dialog_label" style="display: none" tabindex="0">Hide Exception Stack Trace</div> </td> </tr> <tr> <td> <div id="exceptionTraceContainer" style="display: none; width: 520px;"> <table width="100%"> <tbody> <tr> <td>Stack Trace: <br> </td> </tr> <tr> <td> <div class="birtviewer_exception_dialog_detail" style="width: 510px;"><span id="faultdetail"></span> </div> </td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <div class="dialogBtnBarContainer"> <div> <div class="dBtnBarDividerTop"></div> <div class="dBtnBarDividerBottom"></div> </div> <div class="dialogBtnBar"> <div id="exceptionDialogdialogCustomButtonContainer" class="dialogBtnBarButtonContainer"> <div id="exceptionDialogokButton" class="dialogBtnBarButtonEnabled"> <div id="exceptionDialogokButtonLeft" class="dialogBtnBarButtonLeftBackgroundEnabled"></div> <div id="exceptionDialogokButtonRight" class="dialogBtnBarButtonRightBackgroundEnabled"></div> <input class="dialogBtnBarButtonText dialogBtnBarButtonEnabled" type="button" title="OK" value="OK"></div> <div class="dialogBtnBarDivider"></div> <div id="exceptionDialogcancelButton"> <div class="dialogBtnBarButtonLeftBackgroundEnabled"></div> <div class="dialogBtnBarButtonRightBackgroundEnabled"></div> <input class="dialogBtnBarButtonText dialogBtnBarButtonEnabled" type="button" title="Cancel" value="Cancel"></div> </div> </div> </div> </div> </div> </div> <div id="parameterDialog" class="dialogBorder" style="position: absolute; z-index: 201; top: 173px; left: 325.5px; width: 520px; display: none;"> <iframe id="parameterDialogiframe" frameborder="0" scrolling="no" src="birt/pages/common/blank.html" style="z-index: -1; display: none; left: 0px; top: 0px; background-color: rgb(255, 0, 0); opacity: 0; position: absolute; width: 522px; height: 429px;" name="parameterDialogiframe"> <html> <head></head> <body></body> </html> </iframe> <div id="parameterDialogdialogTitleBar" class="dialogTitleBar dTitleBar"> <div class="dTitleTextContainer"> <table style="width: 100%; height: 100%;"> <tbody> <tr> <td class="dialogTitleText dTitleText">Parameter</td> </tr> </tbody> </table> </div> <div class="dialogCloseBtnContainer dCloseBtnContainer"> <table style="width: 100%; height: 100%; border-collapse: collapse"> <tbody> <tr> <td><label class="birtviewer_hidden_label" for="parameterDialogdialogCloseBtn"> Close </label> <div id="parameterDialogdialogCloseBtn" class="dialogCloseBtn dCloseBtn"></div> </td> </tr> </tbody> </table> </div> </div> <!-- overflow is set as workaround for Mozilla bug https://bugzilla.mozilla.org/show_bug.cgi?id=167801 --> <div class="dialogBackground" style="overflow: auto;"> <div class="dBackground"> <div id="parameterDialogdialogContentContainer" class="dialogContentContainer" style="width: 500px;"> <div class="birtviewer_parameter_dialog"> <table id="parameter_table" class="birtviewer_dialog_body" cellspacing="2" cellpadding="2"> <tbody> <tr valign="top"> <td> <table style="font-size: 8pt"> <tbody> <tr height="5px"> <td></td> </tr> <tr> <td colspan="2">Parameters marked with <font color="red">*</font> are required.</td> </tr> <tr> <td nowrap=""><img title="" alt="Numero di anni da confrontare" src="birt/images/parameter.gif"></td> <td nowrap=""><font title=""> <label for="Years_selection">Numero di anni da confrontare:</label> </font> <font color="red"> <label for="Years_selection">*</label> </font></td> </tr> <tr> <td nowrap=""></td> <td nowrap="" width="100%"><input id="control_type" type="HIDDEN" value="select"> <input id="data_type" type="HIDDEN" value="6"> <input id="Years_value" type="HIDDEN" name="Years"> <select id="Years_selection" class="birtviewer_parameter_dialog_Select" aria-required="true" birtparametertype="combobox" title="2"> <option title="2" value="2">2</option> <option title="3" value="3">3</option> <option title="4" value="4">4</option> </select> <input id="isRequired" type="HIDDEN" value="true"></td> </tr> <tr> <td nowrap=""><img title="" alt="Codice dell'agente" src="birt/images/parameter.gif"></td> <td nowrap=""><font title=""> <label for="Agent">Codice dell'agente:</label> </font> <font color="red"> <label for="Agent">*</label> </font></td> </tr> <tr> <td nowrap=""></td> <td nowrap="" width="100%"><input id="control_type" type="HIDDEN" value="text"> <input id="data_type" type="HIDDEN" value="1"> <input id="Agent" class="BirtViewer_parameter_dialog_Input" type="TEXT" aria-required="true" value="" title="" name="Agent"> <input id="Agent_value" type="HIDDEN" value=""> <input id="Agent_displayText" type="HIDDEN" value=""> <input id="isRequired" type="HIDDEN" value="true"></td> </tr> <tr height="5px"> <td></td> </tr> </tbody> </table> </td> </tr> <tr> <td> <div id="birt_hint" style="font-size: 12px; color: #000000; display: none; position: absolute; z-index: 300; background-color: #F7F7F7; layer-background-color: #0099FF; border: 1px #000000 solid; filter: Alpha(style = 0, opacity = 80, finishOpacity = 100);"> </div> </td> </tr> </tbody> </table> </div> </div> <div class="dialogBtnBarContainer"> <div> <div class="dBtnBarDividerTop"></div> <div class="dBtnBarDividerBottom"></div> </div> <div class="dialogBtnBar"> <div id="parameterDialogdialogCustomButtonContainer" class="dialogBtnBarButtonContainer"> <div id="parameterDialogokButton" class="dialogBtnBarButtonEnabled"> <div id="parameterDialogokButtonLeft" class="dialogBtnBarButtonLeftBackgroundEnabled"></div> <div id="parameterDialogokButtonRight" class="dialogBtnBarButtonRightBackgroundEnabled"></div> <input class="dialogBtnBarButtonText dialogBtnBarButtonEnabled" type="button" title="OK" value="OK"></div> <div class="dialogBtnBarDivider"></div> <div id="parameterDialogcancelButton"> <div class="dialogBtnBarButtonLeftBackgroundEnabled"></div> <div class="dialogBtnBarButtonRightBackgroundEnabled"></div> <input class="dialogBtnBarButtonText dialogBtnBarButtonEnabled" type="button" title="Cancel" value="Cancel"></div> </div> </div> </div> </div> </div> </div> </td> </tr> <tr valign="top"> <td id="documentView" style="direction: ltr;"> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td style="vertical-align: top;"> <div id="progressBar" style="position: absolute; z-index: 310; top: 346px; left: 461.5px; display: none;"> <table class="birtviewer_progressbar" cellspacing="10px" width="250px"> <tbody> <tr> <td align="center"><b> Processing, please wait ... </b></td> </tr> <tr> <td align="center"><img alt="Progress Bar Image" src="birt/images/Loading.gif"></td> </tr> <tr> <td align="center"> <div id="cancelTaskButton" style="display: block;"> <table width="100%"> <tbody> <tr> <td align="center"><input class="birtviewer_progressbar_button" type="BUTTON" title="Cancel" value="Cancel"></td> </tr> </tbody> </table> </div> </td> </tr> <input id="taskid" type="HIDDEN" value=""> </tbody> </table> </div> <div id="display0" style="display: none; width: 250px; position: relative; overflow: auto"> </div> </td> <td style="vertical-align: top;"> <div id="Document" class="birtviewer_document_fragment" style="width: 1167px; height: 535px;"> <div> <div class="style_0"> <table cellpadding="0" style="empty-cells: show; width: 8in; overflow: hidden; table-layout: fixed;" rule="none"> <colgroup> <col> </colgroup> <tbody> <tr> <td></td> </tr> <tr> <td valign="top"> <div id="AUTOGENBOOKMARK_1" class="style_4" style="text-align: center;">Analisi per modello</div> <table id="__bookmark_2" class="style_5" style="border-collapse: collapse; empty-cells: show; width: 100%; overflow: hidden; table-layout: fixed;"> <colgroup> <col style="width: 20%;"> <col style="width: 14%;"> <col style="width: 14%;"> <col style="width: 15%;"> <col style="width: 10%;"> </colgroup> <tbody> <tr class="style_6" align="center" valign="top"> <th class="style_7" style="overflow: hidden;"> <div id="AUTOGENBOOKMARK_2" style="text-align: left;">Modello</div> </th> <th class="style_7" style="overflow: hidden;"> <div>2010</div> </th> <th class="style_7" style="overflow: hidden;"> <div>2011</div> </th> <th class="style_7" style="overflow: hidden;" colspan="2"> <div>Diff. 2011-2010</div> </th> </tr> <!-- various rows in the table..... --> </tbody> </table> <div><embed id="__bookmark_3" style="width: 558pt; height: 223.5pt; display: block;" alt="" src="/BirtViewer/preview?__sessionId=20110523_145951_765&__imageid=custombf791612fc98d919920.svg" type="image/svg+xml" onresize="document.getElementById('__bookmark_3').reload()"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="298" initialHeight="298.0" initialWidth="744.0" onload="resizeSVG(evt)" onresize="resizeSVG(evt)" width="744"> <g id="outerG" style="fill:none;stroke:none" transform="scale(1)"> </svg> <!-- SVG image details..... --> </embed></div> </td> </tr> <tr> <td> <div>23/mag/2011 14.59</div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <div id="Mask" style="position: absolute; top: 0px; left: 0px; width: 1173px; height: 537px; z-index: 200; background-color: rgb(0, 68, 255); opacity: 0; display: none;"></div> <div style="position: absolute; top: 0px; left: 0px; width: 1173px; height: 537px; z-index: 200; background-color: rgb(255, 0, 0); opacity: 0; display: none; cursor: move;"></div> <iframe scrolling="no" src="birt/pages/common/blank.html" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 775px; z-index: 300; background-color: rgb(219, 228, 238); opacity: 0; display: none;" marginheight="0px" marginwidth="0px"> <html> <head></head> <body></body> </html> </iframe> </body> </html>

Any suggestion? Thank you very much!

+5

internet-explorer-8 meta-tags servlets svg birt

bluish May 23 '11 at 12:28

source share

2 answers

You can use the Ample SDK JavaScript library, which can display SVG in IE6, 7 and 8 .

+5

Sergey Ilinsky May 23 '11 at 13:45

source share

Spudley · Accepted Answer · 2011-05-23 12:34

The X-UA-Compatible meta tag you noticed is a red herring; it is not related to SVG. Neither IE8 nor IE7 support SVG. SVG support was added only in IE9.

The meta tag you saw tells IE8 (and IE9, for that matter) to return to IE7 compatibility mode. This is intended for use by sites that were written for IE7, where the code update to support IE8 or IE9 is too much. I would recommend avoiding the use of this meta tag, if at all possible, because the main function is to disable some functions of your browser.

Return to SVG support .... Although they do not support SVG, IE7 and IE8 support both versions of VML, which is also a vector graphics markup language similar to SVG but specific to IE.

Some Javascript libraries try to emulate SVG using VML, or use VML as a fallback instead of rendering SVG. My favorite is Raphael .

But Raphael is a library for drawing graphics; since you already have SVG, you may find that a simple conversion library is more useful. Something like this is possible: http://code.google.com/p/svg2vml/ or this: http://code.google.com/p/svgweb/

Another approach would be to use Flash or another built-in object to render SVG in IE.

I assume that when you see that they successfully execute SVG, they use one of these libraries (or another similar one) to display SVG graphics in IE7 and IE8.

Cannot display SVG charts in Internet Explorer 8

More articles: