How to use an animated SVG signature on your website
Try a real Live SVG export, add it to a website, and keep a static version for documents, printing and reduced motion.
See the file you will be using
A Live SVG draws a signature as a sequence of original pen strokes, then leaves the completed name on screen. The sample below is an actual download from our Live tool. It plays once and includes the same pen lifts and timing as the studio preview.
Create and check your signature
- Open Live SVG and enter your name. The tool supports English letters, spaces, periods, apostrophes and hyphens.
- Choose Classic, Flowing or Compact. Use Try another variation to change the handwriting shape, and open the settings to adjust clarity, ink and playback speed.
- Play the result, check each letter, then select Download animated SVG. Download the static SVG or transparent PNG as well if you plan to use the signature in documents.
- Open the downloaded SVG in a browser to check the actual file. If you have reduced motion enabled, it shows the full signature immediately.
Your preview background is not part of the file. Choose an ink color with enough contrast for the page where the signature will appear.
Add the SVG to a personal website
Upload the file to your website’s images folder and use it as an image. Replace the example path and alternative text below with your own. The export contains its own animation styles and does not need external fonts, scripts or images.
<img
src="/images/my-signature.svg"
alt="Your name"
width="360"
style="max-width: 100%; height: auto;"
>The width above controls the displayed size without stretching the letters. Test the published page on a phone as well as a larger screen.
If you use a website builder, upload the SVG through its image block if that builder supports SVG. Some platforms reject SVG or remove embedded styles when they process uploads. Preview the published page; if the animation is missing, use the static SVG or PNG and keep the animated original.
What about visitors who prefer less motion?
The exported file checks the browser’s reduced-motion preference and shows the complete signature. If animation styles are unsupported or removed entirely, the underlying paths also form a complete static signature.
Use the right format for each place
| Where it goes | Choose | What to check |
|---|---|---|
| Personal website or portfolio | Animated SVG | One-time playback, contrast and the published page. |
| Scalable artwork or print layout | Static SVG | That your design software imports SVG correctly. |
| Word, Google Docs or an email layout | Transparent PNG | Readability at the final size, without stretching. |
| Handwriting practice | Practice PDF | A4 or Letter, printed at actual size. |
An SVG is a vector image, not a video file. This tool does not export GIF or video. For Word or Google Docs, follow our transparent PNG insertion guide.
If the animation is not playing
- It is already complete: the animation plays once. Reopen the file or use Replay in the studio to watch it again.
- It never moves: check your device’s reduced-motion setting, then try opening the original download directly in a browser.
- It works locally but not after upload: your platform may have changed the SVG. Try the unmodified file, or use the static fallback.
- It appears blank: check whether the ink matches the page background. Export a contrasting color.