Struggling with including text using SVG

During a video, I wish to display a page that has quite a lot of text. This is being prepared outside of ShotCut, in fact in Libre which can export the text as PDF, XAML, SVG and PNG. ShotCut claims to import two of these: SVG and PNG. The original video is shot in 1080p i.e. 1920x1080 and saved as an FLV.

I did one test where I put a PNG on the playlist, and it worked out OK. By OK, I mean I created a short .FLV and the text was readable. The graphics did look a bit pixelated, and that becomes significantly worse as I reduce the video resolution to the (project) ideal of 480x272. (Even 960x540 looks kinda '80s.) When I open the original PNG outside of Shotcut, the text is legible when the characters are big. However when the window is shrunk down, the pixelation occurs again and it looks pretty rough.

One way around this therefore would seem to be to use a chunkier font and perhaps emboldened characters. However that’s not really solving the problem, and getting resolution independence would be better. So the way around this would seem to be to use Scalar Vector Graphics i.e. SVG. I therefore exported the text from Libre into an SVG file. However when I attempt to display this in Shotcut, I get absolutely no text being displayed.

I understand that SVG, like PNG, has an alpha channel and all i.e. I do have those filters in there. However when I generate the video, and even in preview mode, I get a horizontal bar instead of the text. This leads me to believe that either the SVG generated by Libre is no good and/or the parsing of the SVG by Shotcut is questionable. Is there some particular format of SVG that Shotcut expects? Anybody have any experience with using SVG with Shotcut???


P.S. I realized by accident that in fact I can import a .txt file into Shotcut and it displays it sufficient for my requirement. This would seem to be the easier way to meet my requirement, however I’m still interested in doing other things with SVG.

The interpolation setting affects this. For the in-app player view, it is in the Settings menu. For Export, it is on the Video tab.

SVG is a risky format. It has a lot of interoperability issues between the tools and renders. Shotcut includes a SVG loader provided by Qt for all platforms. We do not make it, maintain it, or support it. I made some tests with Libre Draw using both a fancy Fontwork thing and a simple text box. Neither SVG would load into Shotcut on either Windows or Mac OS X. On my Linux box, it loads because Shotuct can also use something from a library named librsvg, which is on most Linux installs. (No, I cannot recommend how to get it for Windows.) In another test, I made a simple text and circle with Inkscape. That loaded into Shotuct using the Qt SVG loader on all platforms. Also, it looked very similar to what I saw in the tool.

I recommend using the Text or Overlay HTML filters that are in Shotcut instead of SVG. Shotcut includes a WYSIWYG HTML editor if you go that route. If you need a background for the text, use a video, image, or color clip (in menu File > Open Other > Color).

You can do almost anything in HTML nowadays. Heck, I almost forgot, you can include SVG too. There is another SVG renderer in the HTML filter. In the WYSIWYG editor, choose Edit > Insert Image…. At the bottom of the dialog, change the files filter to All Files (*) to choose an SVG. This loaded the Libre Draw SVG on Windows 10 for me.

Then I will struggle no more, and change over to HTML! Thanks for the guidance.

Hi ,

The attached HTML template results in a large block of text (40px in size) centred within a red box - with a purple background.

You might like to apply this as an Overlay HTML filter to your clip (or colour clip) and replace the text with yours, and change the colours to “transparent”. And tweak as required!

HTML template with block of (1.2 KB)

(oops, just noticed this thread is 3 years old! I’ll still post it though, in case any else can make use of the zip file).