Resolution issue in SVG files

Technical Support WebViewer
, , , ,
1

WebViewer Version: latest

I have included a svg image into Standard stamps as shown below

const svgxml = ‘{NAME} {ID}’;

const base64 = btoa(svgxml);
const svgBase64DataUrl = ‘data:image/svg+xml;base64,’ + base64;
stampTool.setStandardStamps([svgBase64DataUrl]);

But looks like the image resolution is not maintained properly.

image
image933×795 46.2 KB

So I tried to setImageData() with kepSVG as true. This made the resolution better but there is a limitation that when the flag is true then the image is not visible in other pdf tools.
instance.Core.annotationManager.addEventListener(“annotationChanged”, (annots, action) => {
for (const annot of annots) {
if (annot instanceof instance.Core.Annotations.StampAnnotation && action === ‘add’) {
annot.setImageData(annot.image.src, true);
instance.Core.annotationManager.redrawAnnotation(annot);
}
}
});
Is there any solution to improve the resolution of the svg image?

2

Hello Priya,

Thank you for contacting WebViewer Forums.

There are a couple options to maintain resolution of the SVG file:
We can convert it to an image format like PNG or rasterize the SVG to a higher resolution.

To investigate further, can you please provide the original SVG file?

Regards,
Luke

3

svgviewer-output

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 124 124" fill="none">
<rect width="124" height="124" rx="24" fill="#F97316"/>
<path d="M19.375 36.7818V100.625C19.375 102.834 21.1659 104.625 23.375 104.625H87.2181C90.7818 104.625 92.5664 100.316 90.0466 97.7966L26.2034 33.9534C23.6836 31.4336 19.375 33.2182 19.375 36.7818Z" fill="white"/>
<circle cx="63.2109" cy="37.5391" r="18.1641" fill="black"/>
<rect opacity="0.4" x="81.1328" y="80.7198" width="17.5687" height="17.3876" rx="4" transform="rotate(-45 81.1328 80.7198)" fill="#FDBA74"/>
</svg>
4

Hello Priya,

After running the code below and changing the width/height of the xmlns, I was able to improve the resolution:

const svgxml = `<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 124 124" fill="none">
<rect width="124" height="124" rx="24" fill="#F97316"/>
<path d="M19.375 36.7818V100.625C19.375 102.834 21.1659 104.625 23.375 104.625H87.2181C90.7818 104.625 92.5664 100.316 90.0466 97.7966L26.2034 33.9534C23.6836 31.4336 19.375 33.2182 19.375 36.7818Z" fill="white"/>
<circle cx="63.2109" cy="37.5391" r="18.1641" fill="black"/>
<rect opacity="0.4" x="81.1328" y="80.7198" width="17.5687" height="17.3876" rx="4" transform="rotate(-45 81.1328 80.7198)" fill="#FDBA74"/>
</svg>`
const base64 = btoa(svgxml);
const svgBase64DataUrl = `data:image/svg+xml;base64,` + base64
const tool = documentViewer.getTool('AnnotationCreateRubberStamp');
tool.setStandardStamps([svgBase64DataUrl])

This is how it looked for me:

Screenshot 2024-07-15 at 10.34.09 AM
Screenshot 2024-07-15 at 10.34.09 AM1232×1196 68.2 KB

Regards,
Luke

5

Hello,

This looks very big in size.
Is there any way to improve the resolution for the svg xml with small size (width=“100” height=“100”)

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 124 124" fill="none">
<rect width="124" height="124" rx="24" fill="#F97316"/>
<path d="M19.375 36.7818V100.625C19.375 102.834 21.1659 104.625 23.375 104.625H87.2181C90.7818 104.625 92.5664 100.316 90.0466 97.7966L26.2034 33.9534C23.6836 31.4336 19.375 33.2182 19.375 36.7818Z" fill="white"/>
<circle cx="63.2109" cy="37.5391" r="18.1641" fill="black"/>
<rect opacity="0.4" x="81.1328" y="80.7198" width="17.5687" height="17.3876" rx="4" transform="rotate(-45 81.1328 80.7198)" fill="#FDBA74"/>
</svg>

Currently it looks like this:

image
image1161×796 20.9 KB

And if we drag the stamp, it looks like this

image
image1163×813 36.1 KB

The resolution is not at all maintained.

Is there any way to improve the resolution for the stamp?

Thanks,
Priya K

6

Hello Priya,

There is currently no way to improve resolution on WebViewer as it depends on the image source. Setting the resolution high and then resizing the annotation to 100x100px does show improvement however. You can force a resize:

annotationManager.addEventListener("annotationChanged", (annots, action, { imported }) => { 
        if (!imported) { 
          for (const annot of annots) { 
            if (annot instanceof instance.Core.Annotations.StampAnnotation && action === 'add') { 
              annot.Width = 100; 
              annot.Height = 100; 
              instance.Core.annotationManager.redrawAnnotation(annot); 
            } 
          } 
        } 
      });

Regards,
Luke