Converting SVGs to Meshes

Table of Contents

  1. Overview
  2. Prerequisites
  3. 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!
  4. Conclusion
  5. Examples
  6. Additional Resources
  7. 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

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.

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.

image

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.

image

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…”

image

Select MeshPart from the insert menu.

image

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.”

image

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.”

image

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!

19 Likes

Examples

Just some examples of how I've used SVGs in my own game:

image

image

Additional Resources

There’s some fantastic free software available for creating and exporting SVG graphics available online. If you’re looking for software to create vector graphics, I highly recommend Figma. About 99% of my graphics are now created using Figma, ranging from UI components to icons and logos.

And if you’re just looking for some free, open source SVG images to download, give Iconify a try! There’s literally thousands of free SVGs from several different foundries to download (just be aware, that like the star used in the tutorial, that they usually contain an invisible bounding box you may need to delete).

https://iconify.design/icon-sets/

What’s Next?

You could also use this tutorial to create custom 3D fonts, as you can with @XAXA’s amazing ThreeDText 2 plugin. Simply convert your text to outlines and import each letter to Studio following the tutorial.

4 Likes

Can this also be used as models for my game? SVG’s to Model’s?

Using this method alone won’t give you a full 3D model, only a “popped out” version of the 2D image (see my examples in the post above) due to the fact that you’re only extruding a flat 2D image. However, I suppose there’s nothing stopping you from using an SVG as the base of a 3D model and (if you’re good with Blender), turning it into a smooth 3D model using the tools provided.

1 Like

Great tutorial! Just one note.

For Mac users, do not use the CTRL key. Use COMMAND.

1 Like

Thanks! That was an oversight on my part, although not being a Mac user I wasn’t sure if it was a direct substitute.

1 Like