Git Product home page Git Product logo

Comments (9)

carlosame avatar carlosame commented on June 17, 2024

Thank you for reporting this.

In order to fix this issue, I would appreciate if you could provide a sample SVG (paired with the obtained render) showing the problem so I can reproduce it (I do not easily see it in the opacity tests that EchoSVG has).

You could provide a SVG file of your own, or something based on the files in samples/tests/spec/rendering (the rendered PNGs are in test-references/samples/tests/spec/rendering).

from echosvg.

iocoker avatar iocoker commented on June 17, 2024

Thanks, here are the files.
sample - opaque
sample - opacity

opaque sample.pdf
opacity sample.pdf

Sorry the SVGs have a transparent background, so the effect could be seen better in white theme.
It's actually a relic from Batik, so not unique to Echosvg, I'm just thinking perhaps there's a way to enable some flags or so to make it retain crisps vector even with opacity. A way out was to use fill-opacity but the same issue plaques images, as they are drawn to a Graphics2D very poorly once they have any opacity or any filter.

Here's a reference to the same issue: rototor/pdfbox-graphics2d#30 (comment)

We're using the GraphicsNode.paint method to draw the content unto a Graphics2D canvas and that gets rendered into PDF. It retains the vector state until the opacity is set to anything less than 1.

Thank you

from echosvg.

carlosame avatar carlosame commented on June 17, 2024

I tested drawGlyphVectorWorks = true as suggested in the pdfbox thread, but the results are bad. For example the Font1 test produced the following Font1_cmp.png comparison image (reference image is at left, drawGlyphVectorWorks = true at right):

Font1_cmp

And the diff image Font1_diff.png:

Font1_diff

In case you want to experiment yourself, you can find these comparison images under echosvg-test/build/reports/tests/test/images after running the tests with Gradle or Eclipse.

It should be possible to fix this issue (leveraging the fact that, unlike Batik, EchoSVG supports colors with an alpha channel), but it is not so easy as just changing a setting.

from echosvg.

iocoker avatar iocoker commented on June 17, 2024

Thanks for checking this out; Indeed it's so much work tracing the issue. I'll give it a try.

from echosvg.

carlosame avatar carlosame commented on June 17, 2024

Actually, I'm not sure that I reproduced the problem. I rendered the following SVG, which comes from your sample:

<svg width="243.78" height="153.07" xmlns="http://www.w3.org/2000/svg">
<g>
<text xml:space="preserve" font-family="Arial" font-size="40" font-weight="bold"
 style="stroke:none;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#000;fill-rule:nonzero;opacity:.5;white-space:pre"
 transform="matrix(.558 0 0 .558 121.83 76.484)"><tspan x="-116.338" y="12.566">Sample Test</tspan></text>
</g>
</svg>

and here is the resulting PNG:

textAliasing

which is what I'd expect. Perhaps you are overscaling the image?

I've created another (more complex) test where I checked putting the opacity in several different ways (inherited from another style, as an attribute in the text and g elements,...) and still do not see the issue.

In case I'm missing something, would appreciate more information.

from echosvg.

carlosame avatar carlosame commented on June 17, 2024

Let's add that the sample image that you provide (in the "opacity sample" PDF) was apparently rendered without anti-aliasing, and in the normal EchoSVG rendering process, anti-aliasing is enabled (it is SVG's default) unless one disables it explicitly.

More information is clearly required.

from echosvg.

iocoker avatar iocoker commented on June 17, 2024

@carlosame, thanks again for looking into this further.

So, here's a sample of our code:
Screenshot 2022-08-03 171923
Basically we load an SVG string using echosvg, then get a graphicsNode and pass it a graphics2d canvas (we get that from pdfbox-graphics2d) and paint the graphics unto the g2d. Then from there it's encoded into a PDF via ApachePDFBox.

With opacity = 1, this is what the PDF comes to:
Screenshot 2022-08-03 171335

With opacity less than 1, this is what we get:
Screenshot 2022-08-03 171259

The first retains vector mode, the one with opacity just turns to raster image. I think it has to do with the compositing, as even it treats opacity the same way it does filters, which is, just turn it into bitmap.

We did try SVGSalamanda, just to be sure it's not pdfbox-graphics2d and came out fine with opacity. But SVGSalamanda isn't as mature or feature complete as echosvg, especially when it comes to fonts handling

So, it's not something that can be deduced outputting to a PNG, even if we did increase the resolution, it's still a raster and not that good for print.

I hope this sheds more light into the issue.

from echosvg.

carlosame avatar carlosame commented on June 17, 2024

@iocoker would you mind checking the latest 0.3-SNAPSHOT? It may fix this issue or at least be a mitigation.

Unfortunately I have no repository for snapshots, so the idea would be to run:

./gradlew build publishToMavenLocal

and then using the library from your Maven local repository.

from echosvg.

carlosame avatar carlosame commented on June 17, 2024

This issue has been pending a response for more than two months. Lacking a reproducer, it is unclear whether it has been fixed or not, so I'm closing it.

If the problem described in this issue persists, please open a new one with a unit test that reproduces it.

from echosvg.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.