# StampAnnotation quality image, svg support **URL:** \ **Category:** Technical Support\ **Created:** [November 18, 2022, 1:26pm UTC](https://pdfjs.community/t/stampannotation-quality-image-svg-support/2178 "2022-11-18T13:26:50Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![julio](https://avatars.discourse-cdn.com/v4/letter/j/7ba0ec/32.png) [@julio](https://pdfjs.community/u/julio)\ **Post date:** [November 18, 2022, 1:26pm UTC](https://pdfjs.community/t/stampannotation-quality-image-svg-support/2178/1 "2022-11-18T13:26:51Z")
I’m having some difficulty importing an image into pdf.js and maintaining the quality of the image because I need to resize it, is there any way I can import an svg. I’m using the method **StampAnnotation** ```javascript const {width, height} = document.getPageInfo(1); const ratio = height / width; const stampAnnot = new this.annotations.StampAnnotation(); stampAnnot.PageNumber = 1; stampAnnot.X = 100; stampAnnot.Y = 250; stampAnnot.Width = 275; stampAnnot.Height = 275 * ratio; const keepAsSVG = true; stampAnnot.setImageData(imageData, keepAsSVG); stampAnnot.Author = this.annotManager.getCurrentUser(); stampAnnot.Rotation = 0; this.annotManager.addAnnotation(stampAnnot); this.annotManager.redrawAnnotation(stampAnnot); ``` ---
**Author:** ![zserviss](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zserviss](https://pdfjs.community/u/zserviss)\ **Post date:** [November 18, 2022, 9:06pm UTC](https://pdfjs.community/t/stampannotation-quality-image-svg-support/2178/3 "2022-11-18T21:06:42Z")
Hi Julio, I just tried with the code provided to import an SVG and it looks look in the Express viewer. Could you provide screenshots to show the quality of the image and the URL for the SVG you’re using for the stamp image data? Best Regards, Zach Serviss Web Development Support Engineer PDFTron Systems, Inc. Share how you are using PDF.js Express in your organization you could win a **$500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free**. Learn more [here](https://utm.guru/ueQNw) ---
**Author:** ![julio](https://avatars.discourse-cdn.com/v4/letter/j/7ba0ec/32.png) [@julio](https://pdfjs.community/u/julio)\ **Post date:** [November 22, 2022, 3:07pm UTC](https://pdfjs.community/t/stampannotation-quality-image-svg-support/2178/4 "2022-11-22T15:07:17Z")
zone.js:1063 Unhandled Promise rejection: File extension svg is not supported. Please see [PDFTron Systems Inc. | Documentation](http://r.pdftron.com/fileformats) for a full list of file formats supported by WebViewer. ```javascript const stamp = 'https://votuporanga.prefeitura.rlz.com.br/carrimbo.svg'; const document = await this.instance.CoreControls.createDocument(stamp, {extension: 'svg', l: 'licence'}); const imageData = await new Promise(resolve => { document.loadCanvasAsync({ pageNumber: 1, drawComplete: (canvas) => { const url = canvas.toDataURL(); resolve(url); } }); }); const {width, height} = document.getPageInfo(1); const ratio = height / width; const stampAnnot = new this.annotations.StampAnnotation(); stampAnnot.PageNumber = 1; stampAnnot.X = 100; stampAnnot.Y = 250; stampAnnot.Width = 275; stampAnnot.Height = 275 * ratio; const keepAsSVG = true; stampAnnot.setImageData(imageData, keepAsSVG); stampAnnot.Author = this.annotManager.getCurrentUser(); stampAnnot.Rotation = 0; this.annotManager.addAnnotation(stampAnnot); this.annotManager.redrawAnnotation(stampAnnot); ``` ---
**Author:** ![zserviss](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zserviss](https://pdfjs.community/u/zserviss)\ **Post date:** [November 22, 2022, 11:12pm UTC](https://pdfjs.community/t/stampannotation-quality-image-svg-support/2178/5 "2022-11-22T23:12:50Z")
Hi Julio, Thanks for the code snippet. I was having some issues on my local host with fetching the URL you sent so I uploaded the image to our AWS. Was able to get the stamp to use that SVG using the PDFTron AWS link. ```javascript stampAnnot.setImageData('https://pdftron.s3.amazonaws.com/custom/test/tyler/carrimbo.svg', keepAsSVG); ``` Best Regards, Zach Serviss Web Development Support Engineer PDFTron Systems, Inc. Share how you are using PDF.js Express in your organization you could win a **$500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free**. Learn more [here](https://utm.guru/ueQNw) ---
**Author:** ![julio](https://avatars.discourse-cdn.com/v4/letter/j/7ba0ec/32.png) [@julio](https://pdfjs.community/u/julio)\ **Post date:** [November 23, 2022, 5:57pm UTC](https://pdfjs.community/t/stampannotation-quality-image-svg-support/2178/6 "2022-11-23T17:57:02Z")
I managed to make it work, but I needed to launch a loading screen, as the function that loads the image stampAnnot.setImageData file takes a while to be processed, and does not display anything in the system during loading the command didn’t work this.instance.openElements([‘loadingModal’]); ```javascript this.instance.openElements(['loadingModal']); const stampAnnot = new this.annotations.StampAnnotation(); stampAnnot.PageNumber = 1; stampAnnot.X = 100; stampAnnot.Y = 250; stampAnnot.Width = 275; stampAnnot.Height = 275 * 0.359; const keepAsSVG = true; stampAnnot.setImageData('http://localhost/image.svg', keepAsSVG); stampAnnot.Author = this.annotManager.getCurrentUser(); stampAnnot.Rotation = 0; this.annotManager.addAnnotation(stampAnnot); this.annotManager.redrawAnnotation(stampAnnot); this.instance.closeElements(['loadingModal']); ``` ---
**Author:** ![zserviss](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zserviss](https://pdfjs.community/u/zserviss)\ **Post date:** [November 23, 2022, 8:17pm UTC](https://pdfjs.community/t/stampannotation-quality-image-svg-support/2178/7 "2022-11-23T20:17:34Z")
Have you tried wrapping this code in an event listener like ‘documentLoaded’? ex ```javascript documentViewer.addEventListener('documentLoaded', async () => { ... ``` Best Regards, Zach Serviss Web Development Support Engineer PDFTron Systems, Inc. Share how you are using PDF.js Express in your organization you could win a **$500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free**. Learn more [here](https://utm.guru/ueQNw) ---
**Author:** ![julio](https://avatars.discourse-cdn.com/v4/letter/j/7ba0ec/32.png) [@julio](https://pdfjs.community/u/julio)\ **Post date:** [November 24, 2022, 11:53am UTC](https://pdfjs.community/t/stampannotation-quality-image-svg-support/2178/8 "2022-11-24T11:53:06Z")
I couldn’t make it work ```javascript this.instance.docViewer.addEventListener('documentLoaded', async () => { this.instance.openElements(['loadingModal']); const stampAnnot = new this.annotations.StampAnnotation(); stampAnnot.PageNumber = 1; stampAnnot.X = 100; stampAnnot.Y = 250; stampAnnot.Width = 275; stampAnnot.Height = 275 * 0.359; const keepAsSVG = true; stampAnnot.setImageData(this.stamp + '/svg', keepAsSVG); stampAnnot.Author = this.annotManager.getCurrentUser(); stampAnnot.Rotation = 0; this.annotManager.addAnnotation(stampAnnot); this.annotManager.redrawAnnotation(stampAnnot); this.instance.closeElements(['loadingModal']); }); ``` ---
**Author:** ![zserviss](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zserviss](https://pdfjs.community/u/zserviss)\ **Post date:** [November 25, 2022, 8:28pm UTC](https://pdfjs.community/t/stampannotation-quality-image-svg-support/2178/9 "2022-11-25T20:28:45Z")
Thank for the code sample. The issue I think is not await the `setImageData` call. If you await that line it should open the loading modal. Best Regards, Zach Serviss Web Development Support Engineer PDFTron Systems, Inc. Share how you are using PDF.js Express in your organization you could win a **$500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free**. Learn more [here](https://utm.guru/ueQNw)