How do I insert Animated SVG files?

Post reply

❤Follow Topic(4)

0 favourites

4 posts

From the Asset Store

Puzzle Game Template & Source File

$9 USD

Source code, art assets and music tracks to remake this game

xanderwood

- Microbex
- - Joined 6 Dec, 2016
  - 55 topics • 168 posts
- 1
- 19 Dec, 2022
- Quote
Hi,

How do I insert Animated SVG files? It says that 'Animated SVGs can be displayed with the HTML Element object.' - I just don't see how to do that?
Tagged:

svg
svg-animation
- DiegoM Construct Team Construct 3 Developer
- Moderator
- - Joined 24 Apr, 2015
  - 11 topics • 510 posts
- 2
- 19 Dec, 2022
- Quote
This is a small example showing how to load an animated SVG.

dropbox.com/s/w66ch2oks77qzl1/Animated%20CSS.c3p
The SVG is in it's own file and is loaded into the HTML element using the AJAX plugin. The animation is defined in a separate CSS file which is loaded automatically by setting it's purpose to "Stylesheet"

I haven't tried it, but you could also choose to define the SVG and CSS directly in the Content property of the HTML element instance.
Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.
Try Now Construct 3 users don't see these ads
- Ashley Construct Team Founder
- Moderator
- - Joined 21 May, 2007
  - 669 topics • 30,357 posts
- 2
- 19 Dec, 2022
- Quote
There is in fact a built-in animated SVG example. The Example Browser is always a good place to check!
- Microbex
- - Joined 6 Dec, 2016
  - 55 topics • 168 posts
- 1
- 19 Dec, 2022
- Quote
Thanks guys! I finally found out how to do it. I was using SVGator for the animation. I had to export the animation as 'CSS Only'. Good to know.

I think it is a bit of a hidden feature in CS 3, and I bet it could get more recognition with an insightful video tutorial. Just my cent. Cheers!