Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SVG images are not rendered with right size #592

Closed
DanielWulfert opened this issue Nov 2, 2020 · 3 comments
Closed

SVG images are not rendered with right size #592

DanielWulfert opened this issue Nov 2, 2020 · 3 comments

Comments

@DanielWulfert
Copy link

DanielWulfert commented Nov 2, 2020 •
edited
Loading

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.
DanielWulfert added a commit to DanielWulfert/openhtmltopdf that referenced this issue Nov 2, 2020
@DanielWulfert
Extended support for absolute CSS units
a267a4b 
Some changes to BatikSVGImage parseLength method, so that it supports
absolute CSS units and fractional measurements as mentioned in danfickle#592.
This was referenced Nov 2, 2020
Merged
Closed
danfickle added a commit that referenced this issue Nov 4, 2020
@danfickle
#592 Render linked SVG images with unit (px, cm, em, etc) sizes.
1e7e5d6 
We do this by firing up the CSS parser for values of the width and height attributes that are not plain numbers.

With test proof (output identical to Chrome).
@danfickle
Copy link
Owner

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.

@DanielWulfert
Copy link
Author

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

@danfickle danfickle mentioned this issue Nov 30, 2020
Open
@kiranduba kiranduba mentioned this issue Oct 4, 2023
Closed
@kiranduba
Copy link

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 --------------------------------------

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@danfickle @DanielWulfert @kiranduba