--- title: "Export PDF ink annotation as image | Nutrient" canonical_url: "https://www.nutrient.io/guides/web/knowledge-base/export-ink-annotation-image/" md_url: "https://www.nutrient.io/guides/web/knowledge-base/export-ink-annotation-image.md" last_updated: "2026-05-18T15:18:35.785Z" description: "Ink annotations are rendered as SVG elements on the DOM. To export an image from an ink annotation, retrieve the SVG and then either download it." --- Ink annotations are rendered as SVG elements on the DOM. To export an image from an ink annotation, retrieve the SVG and then either download it with an `image/svg+xml` MIME type, or render it to a canvas as a PNG: ```js // "annotation" is a reference to our ink annotation. const svgSelector = `.PSPDFKit-Ink-Annotation[data-annotation-id="${annotation.id}"] svg`; // Wait until the SVG is rendered. const observer = new MutationObserver(async () => { const svgEl = instance.contentDocument.querySelector(svgSelector); if (svgEl) { observer.disconnect(); // We need to set the first "g" element to transparent. svgEl.querySelector("g").style.fill = "transparent"; // Apply 'round' `strokeLinecap` and `strokeLinejoin` styles to all // 'path' elements in 'svgEl' for smooth line endings and joints. const paths = svgEl.querySelectorAll("path"); paths.forEach((path) => { path.style.strokeLinecap = "round"; path.style.strokeLinejoin = "round"; }); // Serialize to XML. const svg = new XMLSerializer().serializeToString(svgEl); // Download the SVG. const link = document.createElement("a"); link.href = `data:svg+xml; charset=utf-8, ${svg}`; link.download = `${annotation.id}.svg`; link.click(); // Instead of downloading the SVG, we can instead // render it to a canvas and export the blob // as a PNG. } }); observer.observe(page, { subtree: true, childList: true }); ``` If you’d like to export it as a PNG instead, we can continue from the previous snippet by — instead of downloading the SVG — taking the `svg` reference, rendering it to a canvas, and then exporting the blob: ```js const img = new Image(); img.src = `data:image/svg+xml; charset=utf-8, ${svg}`; img.onload = () => { const canvas = document.createElement("canvas"); canvas.width = img.naturalWidth; canvas.height = img.naturalHeight; const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); canvas.toBlob( async (blob) => { // We can process the blob as we'd like here. }, { type: "image/png" } ); }; ``` This has been tested with Nutrient Web SDK 2020.2.6. --- ## Related pages - [Add Custom Keyboard Shortcuts](/guides/web/knowledge-base/add-custom-keyboard-shortcuts.md) - [Add Listener Toolbar Item](/guides/web/knowledge-base/add-listener-toolbar-item.md) - [Add Signature Initials](/guides/web/knowledge-base/add-signature-initials.md) - [Add Listener Text Note Annotation](/guides/web/knowledge-base/add-listener-text-note-annotation.md) - [Listen to an annotation’s hover event](/guides/web/knowledge-base/annotations-hover-event.md) - [How to add a custom toolbar item to display current zoom percentage](/guides/web/knowledge-base/add-custom-zoom-perentage.md) - [Automatic Annotation Field Tab Ordering](/guides/web/knowledge-base/automatic-annotation-field-tab-ordering.md) - [Change Default Line Width Ink Annotations](/guides/web/knowledge-base/change-default-line-width-ink-annotations.md) - [Blurry Print Resolution](/guides/web/knowledge-base/blurry-print-resolution.md) - [Check Password Protected Files](/guides/web/knowledge-base/check-password-protected-files.md) - [Keep widget annotation dimensions consistent across devices](/guides/web/knowledge-base/consistent-widget-annotation-dimensions.md) - [Customize Page Indicator](/guides/web/knowledge-base/customize-page-indicator.md) - [Check Document Contains Annotations](/guides/web/knowledge-base/check-document-contains-annotations.md) - [Default To Cloudy Border](/guides/web/knowledge-base/default-to-cloudy-border.md) - [Delete All Annotations](/guides/web/knowledge-base/delete-all-annotations.md) - [Control Appearance Of Delete Button On Ink Annotations](/guides/web/knowledge-base/control-appearance-of-delete-button-on-ink-annotations.md) - [Create Highlight Annotations From Text Extraction Technology](/guides/web/knowledge-base/create-highlight-annotations-from-text-extraction-technology.md) - [Deselect Text](/guides/web/knowledge-base/deselect-text.md) - [Disable Context Menu](/guides/web/knowledge-base/disable-context-menu.md) - [Determine Current Layout Mode](/guides/web/knowledge-base/determine-current-layout-mode.md) - [How to disable text annotation movement in web apps](/guides/web/knowledge-base/disable-text-annotation-movement.md) - [Detect Pspdfkit Ui Loaded](/guides/web/knowledge-base/detect-pspdfkit-ui-loaded.md) - [Download Exported Document](/guides/web/knowledge-base/download-exported-document.md) - [Disable Resize Of Annotations](/guides/web/knowledge-base/disable-resize-of-annotations.md) - [Focus the delete button in a confirm dialog](/guides/web/knowledge-base/focus-delete-button-in-confirm-modal-component.md) - [Focus Widget Annotation](/guides/web/knowledge-base/focus-widget-annotation.md) - [Focus Viewer After Loading](/guides/web/knowledge-base/focus-viewer-after-loading.md) - [Extracting text and cursor position in annotations](/guides/web/knowledge-base/extract-annotation-text-and-retrieve-cursor-position.md) - [Find Ink Annotation For Signature Form Field](/guides/web/knowledge-base/find-ink-annotation-for-signature-form-field.md) - [Fix errors with unsupported form field actions](/guides/web/knowledge-base/handle-unsupported-form-field-actions.md) - [Get Entered Document Password](/guides/web/knowledge-base/get-entered-document-password.md) - [Handling Clicks On Custom Overlays](/guides/web/knowledge-base/handling-clicks-on-custom-overlays.md) - [Get Visible Annotations](/guides/web/knowledge-base/get-visible-annotations.md) - [How Do I Limit The Number Of Annotations](/guides/web/knowledge-base/how-do-i-limit-the-number-of-annotations.md) - [How Do I Disable Scrolling On Page Edges](/guides/web/knowledge-base/how-do-i-disable-scrolling-on-page-edges.md) - [How Do I Prevent Printing Annotations](/guides/web/knowledge-base/how-do-i-prevent-printing-annotations.md) - [Highlight required form fields](/guides/web/knowledge-base/highlight-required-fields.md) - [How Do I Toggle The Theme](/guides/web/knowledge-base/how-do-i-toggle-the-theme.md) - [How Do I Zoom To A Specific Value](/guides/web/knowledge-base/how-do-i-zoom-to-a-specific-value.md) - [How Do I Rotate A Page](/guides/web/knowledge-base/how-do-i-rotate-a-page.md) - [How To Create Bookmarks From Outline Elements](/guides/web/knowledge-base/how-to-create-bookmarks-from-outline-elements.md) - [Resize multiline text fields to avoid overflow](/guides/web/knowledge-base/how-do-i-resize-form-fields.md) - [Iterate over form fields and widgets](/guides/web/knowledge-base/iterate-over-form-fields.md) - [License Registered Different Bundle Id](/guides/web/knowledge-base/license-registered-different-bundle-id.md) - [Load Pdf As Arraybuffer](/guides/web/knowledge-base/load-pdf-as-arraybuffer.md) - [Load Pdf From Stream](/guides/web/knowledge-base/load-pdf-from-stream.md) - [Link Text](/guides/web/knowledge-base/link-text.md) - [Image Attachments Lost Stamp Annotation Templates](/guides/web/knowledge-base/image-attachments-lost-stamp-annotation-templates.md) - [Load Pdf Stub From String](/guides/web/knowledge-base/load-pdf-stub-from-string.md) - [Disabling automatic synchronization in Nutrient Web SDK](/guides/web/knowledge-base/manual-instant-sync.md) - [Observe Document Editor Visibility](/guides/web/knowledge-base/observe-document-editor-visibility.md) - [Loading Multiple Files](/guides/web/knowledge-base/loading-multiple-files.md) - [Override Ink Signature Dialog](/guides/web/knowledge-base/override-ink-signature-dialog.md) - [Override User Agent](/guides/web/knowledge-base/override-user-agent.md) - [Nutrient Size Optimization](/guides/web/knowledge-base/nutrient-size-optimization.md) - [Prevent Editing Content Text Annotation](/guides/web/knowledge-base/prevent-editing-content-text-annotation.md) - [Overview](/guides/web/knowledge-base/overview.md) - [Place Annotation At Visible Center](/guides/web/knowledge-base/place-annotation-at-visible-center.md) - [Persist Ink Signatures Across Instances](/guides/web/knowledge-base/persist-ink-signatures-across-instances.md) - [Persist Currently Edited Note Test](/guides/web/knowledge-base/persist-currently-edited-note-test.md) - [Programmatically Navigate To Page](/guides/web/knowledge-base/programmatically-navigate-to-page.md) - [Prevent Shortcut Printing](/guides/web/knowledge-base/prevent-shortcut-printing.md) - [Read-only forms](/guides/web/knowledge-base/read-only-forms.md) - [Render Document Full Height](/guides/web/knowledge-base/render-document-full-height.md) - [Render Night Mode](/guides/web/knowledge-base/render-night-mode.md) - [Process Currently Rendered Pages](/guides/web/knowledge-base/process-currently-rendered-pages.md) - [Programmatic Comment Annotations](/guides/web/knowledge-base/programmatic-comment-annotations.md) - [Render Page Black White](/guides/web/knowledge-base/render-page-black-white.md) - [Render Watermark When Printing](/guides/web/knowledge-base/render-watermark-when-printing.md) - [Rotate Ink Annotation](/guides/web/knowledge-base/rotate-ink-annotation.md) - [Save Modified Pdf To Document Engine](/guides/web/knowledge-base/save-modified-pdf-to-document-engine.md) - [Render Page Without Annotations](/guides/web/knowledge-base/render-page-without-annotations.md) - [Render Visible Area In Current Page](/guides/web/knowledge-base/render-visible-area-in-current-page.md) - [Show Annotations Properties As Tooltip](/guides/web/knowledge-base/show-annotations-properties-as-tooltip.md) - [Restore Last Seen Page](/guides/web/knowledge-base/restore-last-seen-page.md) - [Wait For Element Appear](/guides/web/knowledge-base/wait-for-element-appear.md) - [Submit Ink Signatures With Form](/guides/web/knowledge-base/submit-ink-signatures-with-form.md) - [Web Sdk Vs Dws Viewer](/guides/web/knowledge-base/web-sdk-vs-dws-viewer.md) - [Show Focus Ring Read Only](/guides/web/knowledge-base/show-focus-ring-read-only.md) - [Easily zoom to specific annotations in PDF](/guides/web/knowledge-base/zoom-to-specific-annotation.md)