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:
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.
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:
Obtain Image URL
a. Save your PageCloud project, then click on “Preview”:
b. Right-click on the image, and copy its address to your clipboard:
Replace Image with Object Tag
a. Go back to the PageCloud editor, delete the image, and drag a Generic EMBED in its place:
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”.
Check Result
a. Once saved the animation will work as desired both in the PageCloud editor as well as on the final page & preview.
II.) Using Inline SVG
Export the SVG Animation
Export your animation with JavaScript as the animation type, and chose the player to be External:
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:
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.
b. Paste the code from your clipboard back in the SVG file, between <script><![CDATA[ and ]]></script> tags.
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.
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.
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.
Add the animation to your PageCloud project as an image:
Select “Images” from the PageCloud menu, and click on the “Upload Image” button:
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.
After uploading, the SVG will appear animated, as desired both in the editor and on the live site & preview.
Check similar posts:
GitHub