Giters

danfickle / openhtmltopdf

An HTML to PDF library for the JVM. Based on Flying Saucer and Apache PDF-BOX 2. With SVG image support. Now also with accessible PDF support (WCAG, Section 508, PDF/UA)!

Home Page:https://danfickle.github.io/pdf-templates/index.html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SVG images are not rendered with right size

DanielWulfert opened this issue · comments

commented

SVG images with either given dimensions or images with no given dimensions are not rendered with the right size. Reason for that is, that BatikSVGImage.parseLength does not handle double values nor handles css units.
Simple example:

<html` xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
        <title>Test</title>
    </head>
    <body>
        <div id="content" class="content">
            <div id="logo" style="margin-top:3mm;">
                <img src="some_fancy.svg" alt="here comes the SVG" title="" />
            </div>    
            <div id="main" style="font-size:15px;">Some text below the SVG</div>
         </div>
    </body>
</html>

The images is rendered correctly, but the space around the image is too big. The text should be exactly below the image and the image should be 3mm away from the top. You can find the following warning messages in the output after the rendering:
com.openhtmltopdf.general WARNING:: Invalid integer passed as dimension for SVG: 850.39px
com.openhtmltopdf.general WARNING:: Invalid integer passed as dimension for SVG: 183.035px
As mentioned I am using the BatikSVGDrawer from the openhtmltopdf-svg-support plugin.
Since I have already fixed this issue for my project I will make a pull request later if you like.

commented

Hi @DanielWulfert,

Firstly, thanks heaps for contributing to this project!

I have not used your PR in favor of firing up the CSS parser to deal with unit values as you can see in commit. I think this will handle more units (font relative units, even percentages) than rolling another parser.

However, without your PR I would not have worked on this issue, so thank you.

PS. You may want to try your SVG with this commit. It gives identical output to Chrome with the simple values I have tried it with but you may find other edge cases with more complex SVGs.

Thanks again,
Dan.

commented

Hi @danfickle

looks fine to me and thanks for all the efford you put into this project. Great improvement of flying-saucer. Happy to at least contribute a very small part ;)
Keep up the great work.

Regards,
Daniel

commented

Hi @DanielWulfert I tried to render SVG with BASE 64 encoding, mentioned in issue. BUT while building PDF Im getting below warning and SVG image is not aligning as per width & height. Please suggest.

public static void main(final String[] args) {

final String content = "<!DOCTYPE HTML>\r\n" + "<html><body>\r\n"
        + "<img src=\"data:image/svg+xml;base64,PHN2ZwogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHZlcnNpb249IjEuMCIKICAgd2lkdGg9Ijc4Mi42MTg1MyIKICAgaGVpZ2h0PSIzNTguODkzMTMiCiAgIGlkPSJzdmcyODA3Ij4KICA8ZGVmcwogICAgIGlkPSJkZWZzMjgwOSIgLz4KICA8ZwogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00OC43NjI5NiwtNDA5LjkxNjgpIgogICAgIGlkPSJsYXllcjEiPgogICAgPGcKICAgICAgIGlkPSJnMzA4NSI+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Ik0gNDguNzYyOTU4LDQwOS45MTY4MiBMIDgzMS4zODE1LDQwOS45MTY4MiBMIDgzMS4zODE1LDc2OC44MDk5NSBMIDQ4Ljc2Mjk1OCw3NjguODA5OTUgTCA0OC43NjI5NTgsNDA5LjkxNjgyIHogIgogICAgICAgICBzdHlsZT0iZmlsbDojZGEyMDI4O2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBpZD0icGF0aDI2MzUiIC8+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Ik0gNDAxLjI4ODYyLDU5NS4xNTE5OSBMIDM1MS41MDY2Nyw1OTQuNTczMTMgQyAzNTEuNTA2NjcsNTc3Ljc4NjIgMzU0Ljk3OTgzLDU1MC41Nzk3NyAzNzYuMzk3NjQsNTUwLjU3OTc3IEMgMzk3LjgxNTQ4LDU1MC41Nzk3NyA0MDEuMjg4NjIsNTc4Ljk0MzkxIDQwMS4yODg2Miw1OTUuMTUxOTkgeiBNIDczNy4wMjczNyw2NjEuMTQyMDIgTCA3MzcuMDI3MzcsNjQ4LjQwNzEgTCA2OTUuOTI4MzIsNjQ4LjQwNzEgTCA2OTUuOTI4MzIsNjcxLjU2MTQ4IEMgNjk1LjkyODMyLDY3Ny45Mjg5NSA2OTMuMDM0MDEsNjg1LjQ1NDEzIDY4NS41MDg4Miw2ODUuNDU0MTMgQyA2NzcuOTgzNjQsNjg1LjQ1NDEzIDY3NS42NjgyMiw2NzcuOTI4OTUgNjc1LjY2ODIyLDY3Mi43MTkyMiBMIDY3NS42NjgyMiw1NTkuMjYyNjcgTCA3MzIuOTc1MzUsNTU5LjI2MjY3IEwgNzMyLjk3NTM1LDUxNC4xMTE1OSBMIDY3NS42NjgyMiw1MTQuMTExNTkgTCA2NzUuNjY4MjIsNDQ0LjY0ODQzIEwgNjM3LjQ2MzQ3LDQ0NC42NDg0MyBDIDYzNi44ODQ1OSw0NzguMjIyMyA2MjkuOTM4MjksNTE0LjExMTU5IDU4OS40MTgwOSw1MTQuMTExNTkgTCA1ODkuNDE4MDksNTE0LjExMTU5IEMgNTg1Ljk0NDkzLDUxNC4xMTE1OSA1ODIuNDcxNzYsNTE0LjExMTU5IDU3OC40MTk3NCw1MTQuMTExNTkgQyA1NzYuMTA0MzIsNTE0LjExMTU5IDU3NC4zNjc3Miw1MTQuMTExNTkgNTcyLjA1MjMsNTE0LjExMTU5IEwgNTcyLjA1MjMsNTIxLjA1NzkyIEMgNTU4LjE1OTY0LDUxMi4zNzUwMyA1NDUuNDI0NzMsNTA2LjU4NjQ0IDUyOC4wNTg5NCw1MDYuNTg2NDQgQyA0ODcuNTM4NzQsNTA2LjU4NjQ0IDQ2Mi42NDc3Nyw1NDAuNzM5MTcgNDYyLjY0Nzc3LDU3OC45NDM5MSBDIDQ2Mi42NDc3Nyw2NjUuNzcyODkgNTU4LjE1OTY0LDYyMC42MjE4MiA1NTguMTU5NjQsNjY4LjA4ODM0IEMgNTU4LjE1OTY0LDY4Mi41NTk4MiA1NTEuMjEzMzUsNjkxLjI0MjcyIDUzNi4xNjI5OCw2OTEuMjQyNzIgQyA1MTQuMTY2MzEsNjkxLjI0MjcyIDUwNS40ODM0Miw2NjcuNTA5NDYgNTA0LjMyNTY4LDY0OC40MDcxIEwgNDYzLjgwNTUxLDY0OC40MDcxIEwgNDYzLjgwNTUxLDcyNy4xMzIwNCBMIDUwNC4zMjU2OCw3MjcuMTMyMDQgTCA1MDQuMzI1NjgsNzE4LjQ0OTE1IEMgNTE5Ljk1NDksNzI1LjM5NTQ0IDUzNS4wMDUyNyw3MzMuNDk5NDggNTUyLjk0OTkxLDczMy40OTk0OCBDIDU4OS40MTgwOSw3MzMuNDk5NDggNjE2LjA0NTYzLDY5NC43MTU4OCA2MTYuMDQ1NjMsNjU5Ljk4NDMgQyA2MTYuMDQ1NjMsNjU1LjkzMjI4IDYxNi4wNDU2Myw2NTIuNDU5MTIgNjE0Ljg4NzkyLDY0Ny44MjgyNSBDIDYxMC4yNTcwNSw2MTguODg1MjUgNTkyLjg5MTI2LDU5Ni44ODg1NiA1NjMuOTQ4MjYsNTkxLjA5OTk3IEMgNTQ3Ljc0MDE4LDU4OC4yMDU2NiA1MjAuNTMzNzYsNTg4LjIwNTY2IDUyMC41MzM3Niw1NjYuMjA5IEMgNTIwLjUzMzc2LDU1Ni4zNjgzOSA1MjguMDU4OTQsNTQ2LjUyNzc1IDUzNy44OTk1OCw1NDYuNTI3NzUgQyA1NTkuMzE3MzksNTQ2LjUyNzc1IDU2OC4wMDAyOCw1NjUuMDUxMjggNTY4LjAwMDI4LDU4My41NzQ3OCBMIDYwNy4zNjI3NCw1ODMuNTc0NzggTCA2MDcuMzYyNzQsNTU5LjI2MjY3IEwgNjIzLjU3MDgyLDU1OS4yNjI2NyBMIDYyMy41NzA4Miw2NjguMDg4MzQgQyA2MjMuNTcwODIsNzAxLjA4MzM2IDY0Mi42NzMyLDczNC42NTcyMyA2NzkuNzIwMjQsNzM0LjY1NzIzIEMgNzE3LjM0NjEyLDczNC42NTcyMyA3MzcuMDI3MzcsNjk1LjI5NDc0IDczNy4wMjczNyw2NjEuMTQyMDIgeiBNIDQ2MC4zMzIzNSw2MzYuODI5OSBDIDQ2MC4zMzIzNSw2MzUuNjcyMTkgNDU5Ljc1MzQ5LDYzMy45MzU1OSA0NTkuNzUzNDksNjMyLjc3Nzg4IEMgNDU5Ljc1MzQ5LDYzMC40NjI0MiA0NjAuMzMyMzUsNjI3LjU2ODE1IDQ2MC4zMzIzNSw2MjUuMjUyNjkgQyA0NjAuMzMyMzUsNTczLjE1NTMyIDQzOC4zMzU2NSw1MDYuMDA3NTUgMzc1LjIzOTkzLDUwNi4wMDc1NSBDIDM3MC42MDkwNiw1MDYuMDA3NTUgMzY2LjU1NzA0LDUwNi41ODY0NCAzNjEuOTI2MTYsNTA3LjE2NTMgQyAzMTYuMTk2MjMsNTEyLjM3NTAzIDI5My4wNDE4Myw1NzEuNDE4NzMgMjkzLjA0MTgzLDYxMy4wOTY2MyBDIDI5My4wNDE4Myw2MjQuMDk0OTggMjk0LjE5OTU3LDYzNy40MDg3NSAyOTUuMzU3MjgsNjUwLjE0MzY3IEwgMjY0LjA5ODgzLDY1MC4xNDM2NyBMIDI2NC4wOTg4Myw2NzQuNDU1NzkgQyAyNjQuMDk4ODMsNjgwLjgyMzI2IDI2MS43ODM0MSw2OTAuMDg1MDEgMjUzLjY3OTM3LDY5MC4wODUwMSBDIDI0NS41NzUzMyw2OTAuMDg1MDEgMjQyLjY4MTAyLDY4Mi41NTk4MiAyNDIuNjgxMDIsNjc2LjE5MjM4IEwgMjQyLjY4MTAyLDU2MC40MjA0MSBMIDI5Ny42NzI3LDU2MC40MjA0MSBMIDI5Ny42NzI3LDUxNC4xMTE1OSBMIDI0Mi4xMDIxNyw1MTQuMTExNTkgTCAyNDIuMTAyMTcsNDQ0LjY0ODQzIEwgMjA0LjQ3NjI2LDQ0NC42NDg0MyBMIDIwNC40NzYyNiw0NDguMTIxNTcgQyAyMDQuNDc2MjYsNDg0LjU4OTc1IDE4Ny42ODkzMyw1MTUuMjY5MzQgMTQ3Ljc0Nzk5LDUxNS4yNjkzNCBMIDE0Ny43NDc5OSw1NjEuNTc4MTIgTCAxODguODQ3MDQsNTYxLjU3ODEyIEwgMTg4Ljg0NzA0LDY2Mi44Nzg1OCBDIDE4OC44NDcwNCw3MDIuODE5OTIgMjAzLjg5NzQsNzM5LjI4ODEgMjQ5LjYyNzM1LDczOS4yODgxIEMgMjc4LjU3MDM1LDczOS4yODgxIDMwMi4zMDM2MSw3MTIuNjYwNTMgMzA0LjYxOTAzLDY4NS40NTQxMyBDIDMxNi4xOTYyMyw3MTQuOTc1OTggMzQ1LjEzOTIzLDczNC42NTcyMyAzNzcuNTU1MzksNzM0LjY1NzIzIEMgNDI3LjMzNzMzLDczNC42NTcyMyA0NTMuMzg2MDIsNjk0LjEzNzAzIDQ1OC4wMTY4OSw2NDguNDA3MSBMIDQxNC42MDI0Miw2NDguNDA3MSBDIDQxNC42MDI0Miw2NjUuNzcyODkgNDA0LjE4MjkzLDY4NS40NTQxMyAzODQuNTAxNjgsNjg1LjQ1NDEzIEMgMzcxLjc2Njc3LDY4NS40NTQxMyAzNjEuMzQ3MzEsNjc3LjM1MDA5IDM1Ny4yOTUyOSw2NjUuNzcyODkgQyAzNTQuNDAwOTgsNjYxLjE0MjAyIDM1Mi42NjQ0MSw2NTMuMDM3OTggMzUyLjY2NDQxLDY0OC40MDcxIEwgMzUyLjY2NDQxLDYzNi44Mjk5IEwgNDYwLjMzMjM1LDYzNi44Mjk5IgogICAgICAgICBzdHlsZT0iZmlsbDp3aGl0ZTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgaWQ9InBhdGgyNjM3IiAvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+\" width=\"400\" height=\"200\"/>\r\n"
        + "</body></html>";

final PdfRendererBuilder builder = new PdfRendererBuilder();

builder.withHtmlContent(content, null);
builder.useSVGDrawer(new BatikSVGDrawer());

com.openhtmltopdf.general WARNING:: Invalid integer passed as dimension for SVG: 782.61853
com.openhtmltopdf.general WARNING:: Invalid integer passed as dimension for SVG: 358.89313

SVG issue --------------------------------------