Animations using SVGs, Inkscape, OBS and Shotcut

Thanks!! This is super cool!

This photograph of Galileo II (taken in 1983) is from an AMT-ERTL plastic model :vulcan_salute:.
I have many models mounted and painted that due to lack of space (space the final border, hehe) are inside cardboard boxes inside a closet. :pensive:
I have many hobbies, so I am an apprentice in many and a master in none. :wink:

I’m afraid it will take a bit longer than I anticipated. I cannot get my screen recorder to work. I’ve tried OBS and Sharex, both have worked OK in the past, but now both of them will only record 25% of the screen.

I have a Surface Pro, which has a high DPI screen, with twice as many pixels per inch as usual, which is why It is only recording one quarter of the screen. I’ve spent the last 3 hours trying to get round the problem, but to no avail. Techniques I’ve used in the past to get round these types of problems no longer seem to work.

I’ll look into it a bit more tomorrow, and if I still can’t get it to work I’ll move over to my old desktop system and see if I can do the work on there.

No problem, no commitment either :vulcan_salute:.
I was just commenting that it will be more comfortable for me if at some point there is a tutorial than to be failing in my attempts.
But I also think that I should keep trying to learn.

Unfortunately, I will not be able to try much because I will be playing golf all week. :rofl:

1 Like

I have just found a workaround. I change my display to a lower resolution (1280 x 720), with 100% scaling and the screen capture now works. It’s 11pm in Cyprus, so I’ll look into doing the tutorial tomorrow.

I played golf today (33 stableford points), but it looks as if tougher lockdown procedures will be introduced on Friday and golf may be curtailed because of it. I still have some work to do on the golf apps I am creating and I need to update the website http://mhgcmembers.com/ I created for the club, so at least I’ll keep busy.

1 Like

The golf thing, in my case… is only in my mind.
I never played (except in a computer game under DOS 5.0)
many years ago.
I managed to remember that game.

In fact, two weeks ago I had a period of nostalgia and with an emulator (Launchbox) and my copies of my old games, I am remembering those games (Wing Commander, Star Trek 25th Anniversary, Chaos Control, MadDog Mcree, EcoQuest, Hearth Of China and many others)
I will add this golf game.

1 Like

Those were the days… You never had monitor resolution problems, because there was only 1 resolution - terrible. At least with a video golf game you’re unlikely to be prevented playing it with the latest restrictions. My son has a Playstation, so perhaps I’ll get him to download a golf game on that so I can practise until I can get on the real course again.

2 Likes

I’ve put a tutorial together. that shows the procedure: how to create the SVG in Inkscape, how to animate it using my HTML/javascript, how to record the animation using OBS. It is not intended to be an introduction in depth to these applications. There are lots of useful introductory videos on them on the web, e.g.

 OBS:       https://www.youtube.com/watch?v=ySENWFIkL7c
 Inkscape:  https://www.youtube.com/watch?v=pa6a7oz7vEE
            https://www.youtube.com/watch?v=qq7HsMvEVmU
 SVG:       https://www.w3schools.com/graphics/svg_intro.asp

Unfortunately it was a bit rushed as I am busy with other things at the moment, and it’s not up to the standard I would like. I will tidy it up and put it on my channel on Vimeo. In the meantime you can view it here:

https://vimeo.com/500176281

2 Likes

I had a very small 2-line bug in the HTML file on my website that creates the animation. It is now fixed if you want to download the new version. The problem was that it didn’t close the paths, so in most cases a 1 pixel space could be seen.

I also did a shotcut logo animation using the SVG files provided by Dan - here it is, enjoy:

2 Likes

This is the second SVG I created in my early days with vector graphics (2005).
I made four configurations and combined and edited them in Shotcut.
The big jump to get copy-paste html, for me was to see that you use notepad++. That was it that was looking for. It’s much more comfortable to see the numbered edit lines and multiple tabs with each file created.
Although most of my SVGs are not paths, it’s great to know that I can create a path-based SVG graphic and animate it this way (even using its original color). Thanks a lot, @Elusien. :+1:

1 Like

The Jet Engine animation I did earlier had only a few paths in it. Quite a bit of it was comprised of shapes. So in Inkscape I highlighted everything on the canvas and selected “Path -> Object to path”. That way even the shapes became paths that could then be animated.

Another problem is that you don’t see the path animation if the stroke is the same colour as the background, which is why I added the option to set a different background colour. I suspect this is why your animation is not as good as it could be, because you have a lot of black, or dark, strokes on a black background.

1 Like

This video was just a quick test of an old SVG graphic. I did it to, in a way, show that I had managed to make the thing work. I tried four different settings and did not spend much time on the small details.
Many of my SVG designs have textured filters. :grinning:

Hi @elusien - that is REALLY great. Love all the animations, especially the Shotcut animated logo. Thanks for the tutorial as well. Look forward to experimenting!

Jon, unfortunately the tutorial came at a time when I was busy with other things, then I wasted a day trying to get OBS and Sharex to record the screen on my Surface Pro. They definitely used to work, but don’t any more. Then I found Microsoft’s Xbox Game bar had a record feature, but that would only record a window, not the whole screen. Eventually I had to decrease the resolution of my screen to do it. I intend to try and see if I can sort the original problem out though.

I’m glad you like this new SVG path animation tool. As I said, compared to other utilities it was reasonably simple to do.

2 Likes

Have you tried to run 2 instances of OBS to record?
I’ve used this several times and it works well for me.

You’ll get this warning as you start up another instance.
obs64_2021-01-10_16-23-01

Thanks for that. I’ve seen a video in the past for doing this, but haven’t tried it myself. However, I HAVE FIXED MY PROBLEM. It was Kevin Stratvert on YouTube who mentioned that he uses OBS to record all his OBS tutorials.

I have a Surface Pro with a High DPI screen. Its resolution is 2736x1824, which I view at 200% scaling, so text is not too squidgy to read. When applications like OBS and Sharex query for the screen size they get the response 1368x912 (i.e. the height and width are divided by 2(00%)). Consequently the OBS setup wizard will say I have this smaller screen size. When I went into “settings” to change the Base (Canvas) Resolution I was given a drop-down list that did not offer the correct value. What I didn’t realise was that you can edit directly the drop-down list. I did this (see below), et voila, all my problems are gone.

I still cannot get SHAREX to work, as it obtains the same (incorrect) resolution and there is no option to change it.

I was asking about the function of OBS - Virtual Camera. If you need ShareX for GIF recording or something else, you can indicate as a video source for ShareX, the OBS Virtual Camera option.
That implies that you must have OBS active and with what you want to record ready.

For those less comfortable with coding SVG and animations, another option is to create your animation bits with SynfigStudio (open source for Linux, Windows and Mac), export to video (opt. with transparent background) and import in Shotcut.

For more text-based animations some examples:

… and you can export your (static non animated) svg to animate it with the keypoints approach you alreaddy know from shotcut.

hope this helps.
B.

2 Likes

forgot the link to the software, sorry: https://www.synfig.org/

1 Like

Thanks for introducing Synfig Studio. The video on the Synfig website was quite instructive, but I found the first tutorial a bit difficult to follow, since the producer didn’t explain what he was doing or why as he went along.

When I have a little time I’ll have a look at playing around with it.