Table of Contents
- Overview
- Prerequisites
- Tutorial
3.1. Step 1: Setting up Blender for Importing
3.2. Step 2: Import Your SVG
3.3. Step 3: Rescaling the SVG
3.4. Step 4: Extrude the Curve(s)
3.5. Step 5: Exporting to OBJ (Mesh)
3.6. Step 6: Preparing the MeshPart
3.7. Step 7: Import the OBJ (Mesh)
3.8. Step 8: Mission Accomplished! - Conclusion
- Examples
- Additional Resources
- What’s next?
Overview
In this tutorial, you will be learning how to convert an SVG image into a mesh, which can then be used in your games.
Prerequisites
- Roblox Studio
- Blender 2.9
- An SVG image file
In this tutorial, I am using Blender v2.90.1. This process may differ in other versions, or in other 3D modelling software. Blender is free to download from the Blender website, or via the Microsoft Store on Windows 10.
The Tutorial
Step 1: Setting Up Blender for Importing
Upon opening Blender, you should see the Welcome Screen. To dismiss this, simply click anywhere in the viewport around it. You should be presented with a scene containing the “default cube,” a light and a camera. We don’t need the default cube, so we’ll be deleting it.
By default, the cube should already be selected. If not, click it and it should be surrounded by an orange outline. Next, press X on your keyboard, and press Enter or click “Delete”. You should now have a blank canvas (with the exception of the light and camera) to work in.
Step 2: Import Your SVG
To import an SVG file into Blender is really easy! Go to File -> Import -> Scalable Vector Graphic (.svg) and select the SVG you wish to import from your filesystem.
Step 3: Rescaling the SVG
Now it might look as though nothing’s happened, but if you look in the hierarchy panel on the right-hand side, you should see a new collection containing “Curves” (you may only have one, depending on your image). This is the elements that make up your SVG image.
The curves are actually there, but you’ll find that they’re really (really) small. Obviously, this is no good to us, so we need to make them bigger. Select all the “curve” objects in your hierarchy by left-clicking the first curve, and holding CTRL (or ⌘ on a Mac) while left-clicking the others in order to select multiple items.
To rescale them, we need to use the scale tool. With all your curves selected, press S on your keyboard. This will start the scale tool. Next, specify a size to rescale to. Press the number keys on your keyboard (both the number row and keypad work for this), until you get a size you’re happy with–I’ve used 3000 in this example, but it may vary for each SVG.
You can see how large it currently is in the top-left corner of the viewport. If you need to go back, just press Backspace to delete a number.
Step 4: Extrude the Curve(s)
Select your first curve and navigate to the curve properties panel. This can be found in the bottom-right panel. The icon is a green curve. This will bring up all options regarding the imported curves.
To extrude the curve, open up the “Geometry” section by clicking it, and look for the field named “Extrude.” Set this to the amount you wish to extrude by–I recommend a really small number like 0.001m.
You must repeat this process for each curve instance. The SVG I had downloaded contained a blank square, so I removed it, as it is not necessary.
Step 5: Exporting to OBJ (Mesh)
Reselect each curve instance of your SVG and navigate to the export dialogue. This can be found under File -> Export -> Wavefront (.obj).
On the right-hand side of the export dialogue, you will see a section named “Include.” Under the inclusion options, ensure you have “Selection Only,” “OBJ Objects,” and “OBJ Groups” checked. Give your file a name, and click “Export OBJ.”
Step 6: Preparing the MeshPart
We’re now done with Blender. You can exit out of the program (you don’t need to save the file), and open up a game in Roblox Studio.
Right click in the viewport and select “Insert Object…”
Select MeshPart from the insert menu.
You should now have a blank MeshPart in your game.
Step 7: Import the OBJ (Mesh)
From the Properties window in Roblox Studio, click on the yellow and green folder icon to the right of the MeshId field. This will allow you to select an OBJ to import. If you don’t see your properties window, right click the toolbar at the top of Studio, and select “Properties.”
Navigate to the OBJ file you exported from Blender, select it and press “Open.”
You will be presented with a confirmation dialogue asking if you’d like to move your mesh to its given location. You can click “No.”
Step 8: Mission Accomplished!
Your mesh should now be available in-game, to do as you please! If you need to reuse the mesh, you can find it in the Toolbox in your inventory at any time.
Conclusion
You’re now a pro at converting SVGs to meshes! Thanks for reading my tutorial, and I hope it’s been of some help. This is my first tutorial, so I hope it’s been explained well and you’ve enjoyed it. Don’t forget to show off how you’ve used SVGs in your own games below!
