SVG Image

Hi guys.
 
Does anybody have experience dealing with images on BIRT?
 
I need to load a SVG file into a report so I can manipulate it by changing some areas (such as path id styles) depending on the values I get from the database.
 
OK.. I'm not even in the database part because I'm having a hard-time trying to load the svg file.
 
I tried this in 2 different ways:
 
1. Using a text and coping the SVG definition into it:

<text id="42"> 
 <property name="contentType">html</property> 
 <text-property name="content"><![CDATA[<div><svg height="130" width="500"> 
<defs> 
 <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
 <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> 
 <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
 </linearGradient> 
</defs> 
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> 
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> 
Sorry, your browser does not support inline SVG. 
</svg> 
</div>]]></text-property> 
 </text> 
 </cell>

I always receive the message : "Sorry, your browser does not support inline SVG." instead of having the SVG image showing in the browser.
 
2. Trying to load an external SVG file from a URL.
 
The image is loaded and showed in the browser but I couldn't find any property in the image report item I can use to make it fit into the space, the way it is, I can see only part of the image.
 
Any suggestion?
 
Thanks!

Find more posts tagged with

Comments

Clement Wong

Yes, have included SVG in BIRT reports before.
 
<a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/topic/28726-charts-in-firefox-1801/?p=113793'>http://developer.actuate.com/community/forum/index.php?/topic/28726-charts-in-firefox-1801/?p=113793</a>
<a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/topic/28757-adding-an-svg-image-steam-from-a-database-to-a-report/?p=113914'>http://developer.actuate.com/community/forum/index.php?/topic/28757-adding-an-svg-image-steam-from-a-database-to-a-report/?p=113914</a>
 
Regarding issue #1, the HTML Report Item uses Tidy and strips out unrecognized HTML tags so the behavior is expected. To use the SVG inline, you can use JavaScript and DOM to insert the SVG.
 
document.getElementById('someElement').innerHTML = (SVG code);
 
Attached is a sample (written in OS BIRT 4.5.0). From your design file, you're using OS BIRT 4.2.1? You should be able to open and run my design.
 
The first row is a simple circle SVG with an outline. The second row is your SVG, but it is not recognizing the grad1 so it appears blank, but the elements are all there. You can inspect via your browser's developer tool to verify. I'll investigate why the inline gradient isn't available. Stay tuned.
 
 
Regarding issue #2, as for scaling, that is mostly up to the SVG. Please read <a data-ipb='nomediaparse' href='https://css-tricks.com/scale-svg'>https://css-tricks.com/scale-svg</a>for background info. Your sample SVG file <a>(https://www.amcharts.com/lib/3/maps/svg/latviaLow.svg)</a> if you open in a browser, won't scale according to the size of your browser window. It is a fixed size. 
 
You might be wondering as I was how the AmCharts Map page (e.g. <a data-ipb='nomediaparse' href='https://www.amcharts.com/svg-maps/?map=latvia)'>https://www.amcharts.com/svg-maps/?map=latvia)</a>does responsive display. I didn't dive into their resizing code, but you can see the width of the DIV and SVG change as I resized the browser smaller so they have a JavaScript that manipulates the CSS/DOM. 
 
Larger browser window:
<div class="amcharts-chart-div" style="overflow: hidden; position: relative; text-align: left; width: 1120px; height: 480px; padding: 0px; touch-action: none;"><svg version="1.1" style="position: absolute; width: 1120px; height: 480px; top: 0px; left: -0.5px;"><desc>JavaScript chart by amCharts 3.19.4</desc>
 
Smaller browser window:
<div class="amcharts-chart-div" style="overflow: hidden; position: relative; text-align: left; width: 613px; height: 480px; padding: 0px; touch-action: none;"><svg version="1.1" style="position: absolute; width: 613px; height: 480px; top: 0px; left: 0px;"><desc>JavaScript chart by amCharts 3.19.4</desc>
 
 
An example of a SVG that will resize with your browser is this SVG:
<a data-ipb='nomediaparse' href='http://tympanus.net/Tutorials/ResponsiveSVGs/img/logo.svg'>http://tympanus.net/Tutorials/ResponsiveSVGs/img/logo.svg</a>
 
As a result, the SVG will also resize in a BIRT report accordingly.

PaulCooper

Eclipse BIRT sets the DOCTYPE to be HTML 4.01 transitional which isn't supposed to support inline SVG (although Firefox and Chrome accepted it but IE didn't) I got round this by including the SVG namespace in the <svg> tag. So use <svg xmlns="<a data-ipb='nomediaparse' href='http://www.w3.org/2000/svg'>http://www.w3.org/2000/svg"></a>instead. 
I also had the additional problem that BIRT stripped the SVG, which is what Clement Wong mentions above, as it wasn't a standard HTML tag. I got round that by converting the SVG xml to text and putting it in div tags with a class of "svg", then adding to the end of the document some client side JavaScript to find those div tags and taking the text content (the SVG xml) and make that the div's innerHtml.
 
Paul

palisade14

Paul,
 
Do you have an example of that SVG embedded in the DIV?