Copy SVG with the Clipboard API
Copying SVG to the clipboard has two distinct paths — as raw markup text, or as a renderable image — each with different use cases.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Copying SVG as Markup Text
`navigator.clipboard.writeText(svgString)` copies the raw SVG markup as plain text, ideal for a 'copy code' button on a documentation site or icon library — the user pastes the actual editable `<svg>...</svg>` source rather than a rendered image.
- writeText() copies raw SVG markup as plain, editable text
- Ideal for 'copy code' buttons in icon libraries and documentation
- The pasted result is source code, not a visual image
Copying SVG as a Renderable Image
To copy an SVG so it pastes as an actual image (into a design tool or email client), convert it to a `Blob` with `image/svg+xml` type and use `navigator.clipboard.write([new ClipboardItem({...})])` — support for this image-copy path varies more across browsers than the simpler text-copy method.
- ClipboardItem with a Blob enables image-style pasting behavior
- Support for image clipboard writes varies more than text writes
- Test target applications (design tools, email clients) for paste compatibility
Frequently Asked Questions
Which copy method should an icon library documentation site use?
writeText() with the raw SVG markup — developers copying from icon documentation want the editable source code, not a rendered image, to paste directly into their own codebase.
Why does pasting a copied SVG into some apps fail?
The receiving application may not support the image/svg+xml clipboard MIME type or vector paste generally — some apps only accept raster clipboard images, requiring a PNG conversion as a fallback.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG