SVG import/export; gradient pixelization/banding

[arcticfox]

I have an SVG from WikiMedia Commons:

which when imported into Affinity Designer, displays significant color pixelization/banding:

To check that it is not just a problem with the internal renderer, I exported the imported SVG (with no changes) at default settings and the resulting SVG also displays the banding:

exported_CIE-1931_diagram_in_LAB_space.svg 

 

Can anyone tell me how to import the original SVG without any loss of color fidelity and also what settings to export at to preserve smooth gradation? Thanks a lot.

 

 

[lacerto]

(...)

 

[v_kyr]

Take a look also at the by Inkscape applied gaussian blur filter for the image bitmap part there ...

<filter
   inkscape:collect="always"
   id="filter12227">
   <feGaussianBlur
      inkscape:collect="always"
      stdDeviation="1.67083"
      id="feGaussianBlur12229" />
</filter>
     

... Affinity didn't applied a blur on SVG import/export. - If you apply in Affinity too an appropriate gaussian blur on the image (in image12187 group) it will too look much better here with no such banding!

[arcticfox]

1 hour ago, v_kyr said:

=Affinity didn't applied a blur on SVG import/export. - If you apply in Affinity too an appropriate gaussian blur on the image (in image12187 group) it will too look much better here with no such banding!

Ah, interesting. But why does the exported SVG from Designer look worse than the original?

If you look at the original SVG in a browser, the raster gradient appears smooth. If you look at the exported SVG (with no changes made after import) in the same browser, the colors appear less smooth. So it appears like color information is still being lost on import and export?

[v_kyr]

11 hours ago, arcticfox said:

Ah, interesting. But why does the exported SVG from Designer look worse than the original?

I've already told you, the original with Inkscape created one has on several parts of the drawing applied some slightly gaussian blurs, which do smooth the gradient and some other vector object parts. When you import this into Affinity those initial SVG blurs aren't taken into account and considered (they are not read/parsed in, just compare SVG codes in an editor), thus it looks overall worser inside Affinity and when exported from Affinity.

If you apply a gaussian blur in Affinity AD on the gradient image part layer and export it will look pretty similar here afterwards, since that filter influences the whole presentation also in terms of how the colors look then.

[arcticfox]

2 hours ago, v_kyr said:

When you import this into Affinity those initial SVG blurs aren't taken into account and considered (they are not read/parsed in, just compare SVG codes in an editor), thus it looks overall worser inside Affinity and when exported from Affinity.

Is there any way to get Designer to import the raw raster data, rather than generating a new downsampled bitmap?

[v_kyr]

Honestly I don't understand what your overall problem is here at all? - Affinity already did imported (when importing that "CIE-1931 diagram in LAB space.svg")  the raw image data!

Wikipedia also tells for that SVG image on their website:

Quote

English: This file is converted from PDF to SVG to allow better thumbnail rendering. The colour horseshoe has had a slight SVG blur applied to remove pixelation artifacts.

 

From the Wikipedia by Inkscape created SVG, when you open that original file let's say inside a text editor of your choice, you can see among the SVG code there the defined image portion...

...
<image
       clip-path="none"
       style="filter:url(#filter12227)"
       y="-376.75"
       x="48.083984"
       width="334.66599"
       height="333.66602"
       transform="matrix(1.25,0,0,1.25,129.07302,777.64723)"
       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdEAAAHQCAYAAAD+n1A+AAAABHNCSVQICAgIfAhkiAAAIABJREFUeJzsvd2247qONTZBuXZ3vpGrXOTB8o7fMybdp0zkggTxQ5CSllft2qdLGKNq2RJBUrLNqQnih8r//n8Yf7LQ+3fP4I+WSvvzVMr2PJf62QToZAKn+j/3p8/mTy+AzDVw/9ePEctBAIVA7QCoz/t//df/h6MQXseBgwpeBTio4OAK4ooXCATGixkFQAGDun7hilf5ASqtzwOtzwICert2rDodIhrv8a4gbq+JCKB+ngGgar/E47jMnYhR3j9RxrE6+qF+M0opKP24zs28r7p8aRs2r/XeFrJj9xFY9Qv8vT3GnP13TNoBACpDvkHjHqDqvTzkM+zXCz+H91vXH2q3ydwDuR9s7hHG51VA+Fnfpn+axiGSe9b07P2P908+ryKHqOKgAvn+kTku8td7/v3ZX1Qx3VOCNC94/Tu6BcBR/nvZpqyO237By76zfstJ20ceeeTvlgiggFtJ+Owhg+xrMgC207FK1x9C8gWEfH+rcSbRBdsCqMq9Z/sIjndFgNIC6CW9MP5XRdRHPyefywDOMM2v34cw3o3vxe+QCFwrAD2Tix/ ...
...

... that's the raw raster image data definition for the horseshoe (the gradient part) you see there inside the file (aka:  xlink:href="data:image/png base64,iVBORw0KGgoAAAANSUhEUgAA...). You can see additionally from there, that a filter style [ style="filter:url(#filter12227)" ] is applied to the whole, which above in code is defined as a gaussian blur (with a stdDeviation="1.67083").

Now when you import that original SVG from Wikipedia into Affinity Designer (or Photo) you will see, in the layers panel, how it has interpreted (parsed in) that SVG file ...

... you will see also through the Affinity layers panel that no gaussian blur has been applied to any curves.

If you look into the by Affinity generated SVG code when exported from Affinity as SVG you see ...

...
<g id="image12187" transform="matrix(0.89964,0,0,0.898885,189.178,306.71)">
    <use xlink:href="#_Image1" x="0" y="0" width="465px" height="464px"/>
</g>
...
...
<defs>
        <image id="_Image1" width="465px" height="464px" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAHQAdEDAREAAhEBAxEB/8QAGwABAQEBAQEBAQAAAAAAAAAAAAIDBAEFBwb/xAArEAEBAQEBAAEDAwMDBQEAAAAAAgMSBBEBEyIxMkIhYWIFQVIVIzNxgqL/ ...
...
</defs>
...                                                                     
                                                                     

... you see the same, that no gaussian blur has been applied to any curves or more concrete to the raw raster image data definition here.

So you can apply a gaussian blur to the horseshoe (the gradient part) yourself, or reuse the PNG pixel images from Wikipedia, in order to get a better and closer result.

The blur will be applied to the raw image data here, the (image) layer in AD!

• ad_CIE-1931_diagram_in_LAB_space.afdesign

[arcticfox]

3 hours ago, v_kyr said:

Honestly I don't understand what your overall problem is here at all?

I understand that you can use the in-app tools to recreate a smooth gradient for export. That is not the issue.

The issue is importing an SVG should be non-destructive (including the raster data). The original PNG raster data specifies a 1293 x 1343 bitmap, but the import process downsamples that to 418.3 x 417.1 (basically scaling down by the nominal SVG resolution of 469 × 487 px).

Consider other scenarios, where the embedded raster data is more complex and cannot be reproduced by applying a simple Gaussian blur. The downsampling is an issue, which is why I am asking if there is a way to preserve the original raster data on import.

Thank you for your help so far.

[v_kyr]

8 minutes ago, arcticfox said:

The original PNG raster data specifies a 1293 x 1343 bitmap, but the import process downsamples that to 418.3 x 417.1 (basically scaling down by the nominal SVG resolution of 469 × 487 px).

Nope, look into the SVG from Wikipedia there (that one you've downloaded and used), it cleary tells inside the width/height of that SVG file to be ...

Quote

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   ...
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="468.56631"
   height="487.36578"
   ...
   sodipodi:docname="Chromaticity_diagram_full.svg">

... so that Wikipedia SVG file there is already defined that way, to have a width of "468.56631" which Affinity rounded to 469 px and a height of "487.36578" which Affinity rounded to 488 px. - See also the Wikipedia entry ...

Quote

Size of this PNG preview of this SVG file: 469 × 487 pixels. Other resolutions: 231 × 240 pixels | 462 × 480 pixels | 578 × 600 pixels | 740 × 768 pixels | 986 × 1,024 pixels.

Original file ‎(SVG file, nominally 469 × 487 pixels, file size: 253 KB)

This image rendered as PNG in other widths: 200px, 500px, 1000px, 2000px.

... and the PNGs there were available as downloads in different rendered sizes, thus the size of the PNG depends more on which one (in which pre-rendered size) you've downloaded from there! - Further they also told that the initial PNG preview from there is (... Size of this PNG preview of this SVG file: 469 × 487 pixels).

 

 

 

 

[arcticfox]

1 hour ago, v_kyr said:

look into the SVG from Wikipedia there (that one you've downloaded and used), it cleary tells inside the width/height of that SVG file to be ...

I think you're misunderstanding, I know that the nominal resolution is ~469 × 487 px.

I am referring to the raw, embedded raster data in the original SVG:

xlink:href="data:image/png;base64,iVBORw0KG...

Convert that base64 URI into a regular PNG (eg. online tool), and you will see the original bitmap is 1293 x 1343. This is getting downsampled unnecessarily upon import.

Please could you address the basic question, is it possible to import the SVG while preserving the original raster data? If not, I will simply open a report thread to the devs. Thank you.

[v_kyr]

1 hour ago, arcticfox said:

Convert that base64 URI into a regular PNG (eg. online tool), and you will see the original bitmap is 1293 x 1343. This is getting downsampled unnecessarily upon import.

I've looked with several tools on that (as I did before), so I rechecked now with ...

• https://base64.online/decoders/decode-base64-to-svg
• https://www.base64decode.org/
• MacSVG
• Webbrowser Debuggers (Firefox & Chrome debuggers on the org SVG)
• ... etc...

... and none tells me that the extracted orig SVG base64 data is 1293 x 1343 px!

 

So I don't know where your raster data which specifies 1293 x 1343 does stem from (?), I've used the base64 from inside the original Wikipedia SVG file.

 

[v_kyr]

1 hour ago, arcticfox said:

Please could you address the basic question, is it possible to import the SVG while preserving the original raster data? ...

Depends on the above said, that you can prove that the base64 data isn't preserved. I for my part haven't seen that the original base64 encoded bitmap data is 1293 x 1343 px here as you state.

BTW, the SVG there on Wikipedia is created from a PDF file also available there, and that Original PDF file ‎(has 825 × 825 pixels, file size: 88 KB) so where do your 1293 x 1343 px stem from?

[v_kyr]

In the meantime I've also tried with that tool you have referenced (online tool), and it tells me the same as those I've used before ...

 

Then I opened the original PDF file from Wikipedia and checked the image part inside that with AD and Acrobat, also the same. - From Acrobat I even copied just the image portion over to inspect just that then size wise, the result is ...

 

 

[arcticfox]

2 hours ago, v_kyr said:

I don't know where your raster data which specifies 1293 x 1343 does stem from (?), I've used the base64 from inside the original Wikipedia SVG file.

Sorry, I was quoting the dimensions of an incorrect PNG. The original base64 raw data is indeed a 465x464 bitmap. Thank you for spotting my error.

I have one last question regarding the px setting for the Guassian Blur within Designer. You previously recommended 3.7px to approximate the original SVG:

<feGaussianBlur
         inkscape:collect="always"
         stdDeviation="1.67083"
         id="feGaussianBlur12229" />

Did you get the 3.7 value through a conversion factor or just eyeballing the gradient smoothness?

 

 

[v_kyr]

I've just eyeballed the gradient smoothness, since in SVG feGaussianBlur uses a stdDeviation which defines the bell-curve and Affinity uses a radius value here.