This tutorial may seem rather long, but once you understand the process it can be done in just 1 minute every time you need it. It's recommended if you're working with a lot of text in one project. If that's not the case, a simpler alternative would be to just copy-paste the text.
Note: although Krita supports some vector graphics, there are compatibility issues between Krita and Inkscape's SVG rendering algorithms, so it's not possible to just include an Inkscape file as a file layer in Krita and have it look exactly the way it looks in Inkscape. That's why we need to use an intermediary step and make Inkscape render a PNG of the SVG which we will then import in Krita.
1: create a new document in Krita and draw a simple stickman character in one paint layer, create a second paint layer and draw a text bubble in it. If you already have a project with multiple layers, you can open that instead.
2: click on Select -> Select All on the menubar (Ctrl+A). This should select the entire area of the canvas.
3: click on Edit -> Copy merged on the menubar (Ctrl+Shift+C). This should copy everything you see on the canvas. Note that if a layer is hidden, it won't be copied, so make sure to make all layers that you need for laying out the text visible before copying.
4: switch to Inkscape, and create a new document in Inkscape by selecting the "Video" template so that our units will be pixels. By default, they will be in millimeters. If you can't figure out how to do that: create a new document any way you can; click on File -> Document Properties on the menubar; on the "Front page" section, click on the "Format" button to change the format to something in pixels; or manually change the units in "Front page" and "Display" to px; finally, change the scale to 1.0.
5: click on Edit -> Paste on the menubar (Ctrl+V). This will paste the copied Krita's canvas at a random position.
6: use the selector tool from the toolbox to select the pasted image. On the toolbar under the menubar, you should see four textboxes labelled X, Y, W, and H. These are the coordinates of the position and size of the object, respectively.
7: change the values of X and Y to 0. This should move the image to the top-left corner in Inkscape.
8: click on File -> Document Properties... on the menubar.
9: On the Display tab, in the Front page section, there's a button with a page icon and a label at its left that reads "Resize to content." Click on it. This should resize Inkscape's canvas to the pasted Krita's canvas size.
Technical Note: if you have used Inkscape before, you may be aware that clicking on this button will make the canvas fit all objects inside the document, which means we don't need to set X and Y to zero since the canvas will be adjusted automatically anyway. However, if you click on Edit -> XML Editor..., you'll see that "Resize to content" adds a translate transform to the layer instead of moving all elements inside of it. Ideally, this shouldn't be a problem, but this translation is going to rational number (e.g. 85.700508), and I've had issues with clipping masks in Inkscape before because the mask or the image didn't have perfectly integer coordinates, so I'm not trusting Inkscape with math again.
10: using the text tool, add a single text object to the text balloon. Write the text you want, add a stroke perhaps, or some other Inkscape filter, like text along path, or drop shadow.
11: add a second text object, such as a simple semi-transparent watermark, signature, or date.
12: click on Object -> Layers and Objects... on the menubar. This will make a docker panel appear where you can work on Inkscape objects just as if they were layers in Krita. There should be one layer, labelled "Layer 1," and 3 objects: "text1," "text2," and "image1."
14: on the top left part of the Layers and Objects docker, you'll see an unlabeled button with an icon that is a few layers and a black "+" you can't actually see in Inkscape's default theme in Windows 11. This is the button to add a new layer. Click on it to add a new layer. Name it "Image Layer."
15: drag "image1" into the new "Image Layer." You should see your image on the canvas now. Observe that different layers and their contents are displayed in different colors in the panel.
16: click on "Layer 1" and drag it above "Image Layer."
Beware: you can drag layers inside other layers, but we don't want to do that. If the layers change colors, it's because you placed them inside another layer. Make sure the layers remain in different colors.
16: place your mouse cursor over the "Image Layer." This will make 3 icons appear on the right side. Click on the padlock icon to lock the layer. While a layer is locked, we can see it, but we won't be able to select objects in it or modify them. If you want to update the image from Krita's canvas later, unlock this layer, paste the new image, move it to 0, 0 coordinates, and delete the old image object.
What we're going to do now is that we're going to export the Inkscape image as PNG, and then import it in Krita. While this sounds very simple, there's something important to know about.
When we import a file layer in Krita, the file layer will be imported with a filepath relative to where the Krita's document is saved. This means if we save our Krita file as C:\artwork\page1.kra, and then we import C:\text.png, Krita is going to store this filepath not as C:\text.png, but as ..\text.png. This text code means that the file is "one folder above "(..\), and has the filename text.png.
This algorithm for linking external files can lead to unexpected behavior.
If we move page1.kra to C:\artwork\cool-project\page1.kra, then the relative path ..\text.png won't resolve to the same filepath as before.
C:\artwork\..\text.png
is the same as
C:\text.png
C:\artwork\cool-project\..\text.png
is the same as
C:\artwork\text.pngThis means that when we move our .kra file, we need to move all the external files that we're linking together with it, or we will end up with broken links. We'll end up with file layers that point to filepaths that don't exist, and we'll end up having to update those filepaths manually to fix them.
In this case, it's a good idea to create a separate folder for the project, so we can place all files the project needs inside of it. Then if we want to move the project to another hard disk or an USB stick, we copy the whole folder instead of just the .kra file. In this strategy, we could have our files look like this:
cool-project\krita-file.kracool-project\inkscape-file.svgcool-project\text.png
If you don't want to create a whole folder for every single project, an alternative would be to organize them like this:
projects\cool-project.kraprojects\cool-project (inkscape).svgprojects\cool-project (text).png
In other words, use the name of the .kra file as a prefix for the other files so that when you sort them alphabetically they will appear one next to the other.
Now that we understand what we're going to do, let's do it. This tutorial will follow the folder-per-project method, and it assumes you created a new project at the start of the tutorial.
17: create a folder where the we're going to save our project.
18: save the Inkscape SVG file in the project folder we just created.
19: save the Krita file in the project folder we just created.
20: in Inkscape, click on File -> Export... on the menubar. This will make the export docker appear.
21: on the top of the export docker, you'll see a horizontal bar of buttons labelled Document, Page, Selection, and Custom. These control what parts of the Inkscape canvas we want to export. More specifically, the "canvas" we see in Inkscape is actually called a "page," because Inkscape supports multi-page features (we'll learn more about them below). Since we made the page exactly the same size as our Krita canvas, we want to export the page area exactly. Click on "Page" to select it. You should see that the Width and Height fields match our canvas resolution.
22: at the bottom of the export panel, you'll see an export button, a text box to enter the filename of the exported file with a folder icon at its right which opens a dialog to choose where to export if you click on it, a dropdown list button to select the image format of the file, a button with a gear icon to configure the image format, a button to change the background color, and a checkbox to export only the selected objects. Configure them the following way:
- Export Selected Only: check it.
- Background Colour: make sure it has 0 alpha, so the exported background is transparent.
- Format: Portable Network Graphic (*.png).
If we export the image now, Inkscape is going to export everything, including our merged copy of the Krita canvas that we pasted in it. We want to export only the text objects that we had in "Layer 1." So we need to make sure Export Selected Only is checked and then we select the objects that we want to export.
To do this, there are a few methods.
In our case, since everything is in one layer, we could simply go to the Layers and Objects panel and select Layer 1. Then both text1 and text2 would be exported as a single image.
However, if you have multiple layers, Inkscape doesn't support selecting multiple layers. A workaround in this case is to keep the image that we don't want to export in a locked layer, and then use Edit -> Select All in All Layers to select everything that's not locked.
Of course, a problem of that is that if you have something locked that you want to export, then it won't appear. In this case, an easier workaround is to just hide the Image Layer by clicking its eye icon on the Layers and Objects panel and then uncheck Export Select Only.
By the way, in Clip Studio Paint there is something called a "draft" layer that doesn't get exported even when it's visible. I wonder why none of these applications have something similar.
23: click on Edit -> Select All in All Layers in the menubar (keyboard shortcut: Ctrl+Alt+A) to select everything that's not locked.
24: in the export panel, click the small folder icon next to the filename and navigate to our project folder. Give the exported file a name and click the Save button in the file chooser dialog. This should export the image. If it hasn't, click the Export button in the export panel.
25: open your file manager and navigate to the project folder, then drag the exported PNG into Krita. A context menu will appear. Select "Insert as New File Layer." This will add a file layer to Krita that displays the contents of the page we exported from Inkscape.
Alternatively: you can also add a file layer by clicking on the arrow next to the "+" button in the Layers docker, in which case you will have to browse with a file chooser dialog from Krita..
26: make sure the file layer is above the other layers so you can see the text. It should be aligned perfectly with the canvas. If it isn't, make sure that it was exported with the correct size. If the size is right but it's not aligned. Select the move tool (T) in Krita, and in the tool options docker, make sure the position of the layer is set to x: 0, y: 0.
Updating the Text
Now you should have a file layer in Krita that comes from an image exported from Inkscape. Krita's file layers automatically update if they detect the source file changes. If we want to update the text, all we need to do is change the text in Inkscape, and export the exact same thing again.
1: switch to Inkscape.
2: press T to select the text tool, and click on a text.
3: type something else in the text.
4: press Ctrl+Alt+A to select everything in all layers.
5: press Ctrl+Shift+E to open the export panel.
6: make sure everything is the same way as last time and click export. Krita's file layer should have updated automatically in moments after you do this.
If you have to monitors, it's a good idea to keep each application in one monitor so you can see if Krita has correctly updated the text.
Using a Single SVG for Multiple Pages
If you're working with comics, for example, it's possible that you have several pages that need text, and you keep all of them in a single Krita file. It would be a hassle to create a separate SVG file for every single one of them. Inkscape does provide a way to address this.
On the toolbar, there is a tool called the "Pages Tool" that lets you create new pages on a single Inkscape document. All pages share the same "canvas" and layers. The pages are merely areas of the document that can be exported individually.
So you would create a second page for your second comic page, for example. Then in Krita you would use the copy merged function to copy what the second page looks like. Go back into Inkscape; paste this new image in the Image Layer (after unlocking it, and then lock it again); adjust the second page to fit your second comic page; add the text in Layer 1; repeat all this process for each page, including using the "Select All in All Layers" function; and then when you go export, there will be a page selector, so you can select which page to export. Naturally, you'll need to give a different name to each page exported PNG, and you'll need to import multiple file layers into Krita, one for each page, but it should work pretty well.
One issue you may run into is if you have too many objects in Inkscape it may start lagging. But that's unlikely to happen with just text unless you have many, many pages. If this happens, your only choice realistically is to separate your work into multiple SVG files. Changing the interpolation method of the images in Inkscape to nearest neighbor may help a bit, so maybe try that first.
Using Effects on Text
Both Krita and Inkscape have all sorts of effects that can be applied non-destructively to all sorts of things. In general, it's probably a better idea to add these effects in Krita than in Inkscape.
The reason is that if you are working with resolutions for print, your exported PNGs are going to be immense. PNG compression is pretty good at handling large transparent areas, and things that are mostly solid colos, but if you add a blur effect, for example, the file size is going to increase pretty quickly.
Note that Krita supports importing WebP files and Inkscape supports exporting WebP files. WebP has lossless compression that can be better than PNG sometimes, so it could be worth trying it.
If you want to apply effects to only one piece of text and not to the whole thing, the easiest method would be to just split your texts in Inkscape into different layers, and then the contents of each layer as a different PNG file, and link those as separate file layers in Krita.
It's technically possible to keep it as one PNG file and preform the masking in Krita using clone layers to "cut out" part of the file layer into a separate layer group where you apply the effect you want to that part of the file layer specifically, but this is rather complex to do.
- See How to Create Complex Non-Destructive Effects in Krita for details. It's the same method as the displacement technique
Smaller Black and White Text
If you're working strictly with fully black or white text, you can reduce your PNG file sizes by disabling transparency on the exported PNG so it becomes an opaque black and white image instead. Then, on the linked file layer in Krita, set the blending mode to "Darken" for black text or "Lighten" for white text.
It's technically possible to use both black and white in a single file if your background is an exact share of gray and you use the "Overlay" mode, but this sounds error-prone.
Auto-Updating Krita's Image in Inkscape
This step is probably unnecessary in most cases, but if your project requires you to adjust the text in Inkscape to match small changes in Krita very often, then you would need to keep copy-pasting the merged image and readjusting it every time. A workaround in this case to save a bit of time would be to export Krita's image as PNG and then link the exported image into Inkscape. To do this:
1: on Inkscape, after dragging an image into the canvas, right click on it to make its context menu appear, then click on Image Properties.... This will make a panel with the image properties appear.
2: click on the folder icon to browse the source of the file. Select the file you exported from Krita. The text on image properties should change from saying "Embedded" to saying "Linked."
Now every time you export the image in Krita, it should change automatically in Inkscape without you having to copy-paste or adjust it.
If you have a complex setup in Krita where you only want to export some layers, I suggest learning how the compositions feature works. Unfortunately, I haven't made a tutorial on that yet.
Note: in many cases an application only updates its linked resources after its window gets focused, so if you have Krita and Inkscape side by side, Inkscape might not update the linked image until you click on its window.
Leave a Reply