|
|
Rank: Newbie
Groups: Member
Joined: 10/22/2015
Posts: 2
|
Am generating PDF reports from html pages with EO.PDF (2012, 2015). Since these are reports which are served as single files we need to minimise references to outside files. Hence we often use Base64 encoding which is supported fine even in the 2012 version. However, if using a very simple image, it has benefits to use scalable vector graphics. The html below works fine in multiple web browsers (Chrome/Firefox/EI) but somehow the dashed borders are omitted when using EO.pdf. If I use svg images in the body of the document then they do appear to work fine. So what am I doing wrong or is there a way how to get EO to produce these dashed borders without reverting to a png image?
Code: HTML/ASPX
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>DG Shippers Declaration</title>
<style>
div.dg-border {
background-image: url("data:image/svg+xml;encode=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3mm' height='12mm'%3E%3Crect width='3mm' height='6mm' style='fill: red;' transform='skewY(45)'/%3E%3C/svg%3E");
background-position: 0px 5mm;
background-repeat: repeat-y;
height: 25cm;
width: 3mm;
margin: 0 1mm;
}
</style>
</head>
<body>
<div class="page">
<div class="dg-border" style="float:left"></div>
<div class="dg-border" style="float:right"></div>
<h3 class="title">Shippers Declaration For Dangerous Goods</h3>
</div>
</body>
</html>
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,217
|
Hi, We have looked into this issue. The root of the problem is not SVG, but the encoding for the data Url. Currently we only support base64 encoding for data Url. In your case you used utf8, so it does not work. The following HTML will work:
Code: HTML/ASPX
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>DG Shippers Declaration</title>
<style>
div.dg-border {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczbW0nIGhlaWdodD0nMTJtbSc+DQogIDxyZWN0IHdpZHRoPSczbW0nIGhlaWdodD0nNm1tJyBzdHlsZT0nZmlsbDogcmVkOycgdHJhbnNmb3JtPSdza2V3WSg0NSknIC8+DQo8L3N2Zz4=");
background-position: 0px 5mm;
background-repeat: repeat-y;
height: 25cm;
width: 3mm;
margin: 0 1mm;
}
</style>
</head>
<body>
<div class="page">
<div class="dg-border" style="float:left"></div>
<div class="dg-border" style="float:right"></div>
<h3 class="title">Shippers Declaration For Dangerous Goods</h3>
</div>
</body>
</html>
Note that the data Url for the background image uses base64 encoding. Hope this resolves the issue for you. Please let us know if you still have any more questions. Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 10/22/2015
Posts: 2
|
 That does the trick indeed! Base64 makes it a bit harder to read, but it works and is easily translated back to svg so no big loss there. Thanks for explaining this and maybe one day there will be utf8 support ;-)
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,217
|
Definitely! We will always try to support as much as we can!
|
|