How To Add Animated SVG to PageCloud
To add your SVG animation to PageCloud just pick the method fitting your use case the best from the list below.
If you want your animation to start on user action, export your SVG animation using Javascript as the animation type. (We also recommend using the external player option).
I.) Using an Object Tag:
We recommend this solution for interactive animations except the ones starting on scroll into view. For that case see Method II.
Import the SVG
a. Export the animation from SVGator;
b. Import the SVG file to your PageCloud account as an image:
To be noted that the final animation will sit in an object tag, yet the image added at this step will be deleted. Given phase is needed only to find the URL of the uploaded file (see further points).
Select “Images” from the PageCloud menu, and click on the “Upload Image” button:
![Image Upload option from PageCloud](https://cdn.svgator.com/media/2023/04/select-images.png)
First, make sure you set the Format to “All files”, then choose the SVG animation you exported from SVGator.
You can also simply drag and drop the SVG file to the PageCloud project.
![Drag-and-Drop the image functionality from PageCloud](https://cdn.svgator.com/media/2023/04/drag-and-drop-images.png)
After uploading the SVG will show up static in the editor, which is normal at this stage (end result will be animated & working well). It should look similar to this:
![Example of a placed image](https://cdn.svgator.com/media/2023/04/placed-image.png)
Obtain Image URL
a. Save your PageCloud project, then click on “Preview”:
![Previewing your project in PageCloud](https://cdn.svgator.com/media/2023/04/preview-pagecloud-project.png)
b. Right-click on the image, and copy its address to your clipboard:
![Copy the image address option](https://cdn.svgator.com/media/2023/04/copy-image-address.png)
Replace Image with Object Tag
a. Go back to the PageCloud editor, delete the image, and drag a Generic EMBED in its place:
![Dragging a generic emebed in PageCloud](https://cdn.svgator.com/media/2023/04/drag-generic-embed.png)
b. After you place it, click on the “Edit HTML” button, add an object tag as in the example below and paste the image link between the quotation marks, then click on “SAVE & CLOSE”.
![Edit the HTML code in PageCloud](https://cdn.svgator.com/media/2023/04/edit-html-code.png)
Check Result
a. Once saved the animation will work as desired both in the PageCloud editor as well as on the final page & preview.
![Animation that was placed and is working in PageCloud](https://cdn.svgator.com/media/2023/04/animation-running.png)
II.) Using Inline SVG
Export the SVG Animation
Export your animation with JavaScript as the animation type, and chose the player to be External:
![Export the image using the external player option](https://cdn.svgator.com/media/2023/04/external-player-javascript.png)
Edit the SVG File
a. Open your download file in a code editor tool (e.g: Visual Studio Code) or in any other text editor.
Cut the whole code between <script><![CDATA[ and ]]></script> tags, to your clipboard, as highlighted below:
![The source coude that will be copied](https://cdn.svgator.com/media/2023/04/code-editor.png)
Go to the link below to convert HTML entities:
Paste the code from your clipboard into the “Decoded” input, then copy the generated code from the “Encoded” to your clipboard.
![HTML encoder](https://cdn.svgator.com/media/2023/04/encoded-code.png)
b. Paste the code from your clipboard back in the SVG file, between <script><![CDATA[ and ]]></script> tags.
![Paste the encoded code back in the SVG file](https://cdn.svgator.com/media/2023/04/paste-encoded-code.png)
c. Save the file & copy the whole code from it to your clipboard.
Embed Inline SVG
a. Go back to the PageCloud editor
b. Drag a Generic EMBED app on your page, where you want to place your animation.
![Drag a generic embed in PageCloud](https://cdn.svgator.com/media/2023/04/drag-generic-embed-1.png)
c. Click on Edit HTML and paste the SVG code from your clipboard, then click on “SAVE & CLOSE”.
The SVG will look static in the PageCloud editor, but it will be animated in the Preview and on the live site.
![Paste the SVG code in the generic embed from PageCloud](https://cdn.svgator.com/media/2023/04/paste-svg-code.png)
III.) Using SVG animations with CSS only:
Recommended for animations as background images or other CSS animations starting on load.
Export the SVG animation using CSS Only as the animation type, and set the animation to start on load.
![Option to export CSS-only animation that starts on-load in SVGator](https://cdn.svgator.com/media/2023/04/export-css-only-animation.png)
Add the animation to your PageCloud project as an image:
Select “Images” from the PageCloud menu, and click on the “Upload Image” button:
![Option to upload an image in PageCloud](https://cdn.svgator.com/media/2023/04/upload-image.png)
First, make sure you set the Format to “All files”, then choose the SVG animation you exported from SVGator, with Java Script as the animation type.
You can also simply drag and drop the SVG file to the PageCloud project.
![Drag-and-Drop images option for PageCloud](https://cdn.svgator.com/media/2023/04/drag-and-drop-images-1.png)
After uploading, the SVG will appear animated, as desired both in the editor and on the live site & preview.
![Animation that was placed in the PageCloud editor](https://cdn.svgator.com/media/2023/04/placed-image-1.png)
Check similar posts:
![](https://cdn.svgator.com/assets/og-images/help-center-og.png)
![](https://cdn.svgator.com/assets/og-images/help-center-og.png)