Create stunning 3D graphics from SVG icons in Blender - no experience necessary
Render a 3D model from any 2D SVG icon in minutes with no prior 3D modeling experience
In the ever evolving world of web design, keeping up to date with the latest skills and techniques is not just an advantage but a necessity. Attention is the lifeblood of the internet, but in an online environment oversaturated with flashy colors, bold text and colorful icons, simple flat graphics just don’t grab users’ attention anymore. The incorporation of 3D graphics into landing pages, promotional materials, and other areas of the web is a design trend utilized by many companies to stand out and make their content pop, and the relatively higher barrier to entry keeps it from becoming too common and losing its impact.
This article is a tutorial aimed at individuals with no 3D modeling experience that describes a workflow for turning flat, boring SVG icons into impressive and eye-catching 3D graphics. The tutorial assumes some basic familiarity with SVGs, and the entire process should not take more than 20–30 minutes, although subsequent attempts will be vastly easier and faster. Join the exclusive minority of web developers who can augment their products into three dimensions!
It should also be mentioned that this article is only an introduction, and that the SVG workflow is an incredibly powerful and extendable method for creating Blender models. Using an SVG as a starting point allows one to quickly go from drawing up a basic graphic in Figma to have a workable 3D model. The above image shows off a couple of 3D models I’ve personally created using the method described in this article for my mobile puzzle game Crates & Craters.
Necessary Software & Files
The first step is to download the necessary software. Blender can be downloaded from this link and is completely free under the GPL license. After signing up, Figma can be used in the browser or through a desktop app, and is free for personal use forever. Although Figma is not strictly necessary, and in theory any SVG icon from the internet can be made into a nice 3D model in Blender, the reality is that most icons will need some preprocessing to achieve the best results.
The recommended way to make use of this tutorial is to first follow it to fruition using this SVG file, in order to understand the process and get familiar with Blender before trying it with your own SVG. The provided SVG icon was adapted from this public domain icon found on SVG Repo, a great source for free SVG graphics. Then, once you’ve gotten your bearings with Blender you can do it over again with your own SVG icon.
Preparation Process
Although practically any SVG can be imported into Blender and transformed into a 3D model, most SVG graphics will need some slight tweaks in order to produce quality results. Specifically, we need to modify our SVG in order to avoid the following issues:
- Any stroke (outline) will not be visible in Blender
- 2D shading is unnecessary since Blender handles true lighting
- Overlapping vectors will cause visual artifacts
In order to address the stroke issue, we will use Figma’s outline stroke transform. Using this method on a vector with a stroke will remove its stroke and create a new vector which visually is identical to the stroke, but is actually a vector. To outline stroke, select the target vector first, then either right click and select “Outline stroke” from the context menu, or just use the shortcut Ctrl+Shift+O. Upon doing this nothing should visually appear different, but in the panel on the left side there should be a new vector with the same name as the original plus “stroke” in parenthesis.
Next, we need to remove 2D stylistic effects, since our 3D graphic will have actual lighting. The process of removing 2D shading and lighting-like effects will vary based on the specific SVG icon, but typically any highlight or shadow will be its own vector and can simply be deleted. In the event of a highlight or shadow effect created via a gradient fill, this can simply be replaced with a solid fill.
Lastly, if the icon contains multiple vectors which overlap these elements may need to be moved and resized, although this is not always necessarily the case. For example if a vector has a stroke set to “center” as opposed to “outside” and then this stroke is outlined, half of the stroke vector will overlap with the original parent vector, but it will not be necessary to edit the vector to fix this overlap. This is because we will extrude the outline more than the other vector. Another example is the cherry in the provided cupcake SVG file, which overlaps with two of the frosting vectors. The overlap does not need to be addressed however, since the cherry will be extruded more than the frosting so as to appear “on top” of the frosting.
To determine whether a vector overlap is allowable, imagine what the icon will eventually look like once it is 3D, with its different vectors having different thicknesses; if two overlapping sections should have different thicknesses, then they can overlap. If the two overlapping vectors should have the same thickness, the overlap needs to be removed. That said there is no reason to worry too much if your vector has overlap and you are unsure of whether to remove it, as you can always follow the rest of the tutorial, see if it works, and try again if the overlap is causing any issues.
Blender Basics
Now, let’s get acquainted with the basics of navigating Blender. Upon first opening Blender the countless buttons, settings and menus may leave you feeling overwhelmed. Don’t be! Even I don’t know what half of these do, and for the purposes of transforming our SVG most of what you see on screen is irrelevant. As you continue to use Blender you will slowly begin to get familiar with its workings, and everything necessary for this project is documented in this article.
In the top left corner we have our application-level menu bar (the first options being “File, Edit, Render…”), and underneath this we have the area-level menu bar (the first options being “View, Select, Add…”). At the moment we only have one area, but later we will split this area into multiple in order to be able to both see our camera view and edit the scene simultaneously.
From the startup menu, select “General” under the “New File” options. You should now have a mostly empty scene with a cube, a weird wireframe cone shape (this is the camera), and a wireframe line with a circle on the end of it (this is a light). You may go ahead and delete all of these items.
In order to look around the scene, hold down middle click and drag the mouse, or click and drag on the multicolored axes on the top right. To move the view, click the hand icon on the right, found underneath the previously mentioned axes widget. You can also use the scroll wheel to zoom in and out.
Sometimes, these three view movement options will not be enough. A very powerful method for controlling the view is called walk navigation. This can be activated by hovering “View” in the area menu bar, then hovering the “Navigation”, then selecting “Walk Navigation”, or preferrably with the shortcut Shift+`.
In walk navigation mode the orientation of the view will follow your mouse pointer, like in a first person video game. You can move the view around in 3D space relative to this orientation using the WASD keys, and up and down along the Z axis with Q and E. Using the scroll wheel will increase or decrease the movement speed. Then, once satisfied with the new view, left click to confirm or right click to cancel and return to the old view.
One last useful tidbit to know about Blender is that while the shortcut for undo follows the standard Ctrl+Z used in most applications, the shortcut for redo is actually Ctrl+Shift+Z, not Ctrl+Y.
Importing & Setup
Before we can import our icon, we need to enable the import of SVG files. Press f4 to bring up the file context menu, then click on “Preferences”. Under the “Add-ons” section, search for the “Import-Export: Scalable Vector Graphics” option and make sure it is enabled, as shown in the image below.
Once you’ve enabled SVG import, go ahead and import your SVG icon, which should be saved locally to your PC. The option for this will be under “File” in the application-level menu bar, then under “Import”, and should be titled “Scalable Vector Graphics (.svg)”.
At first after importing your SVG, it will appear as if nothing is there; don’t worry, this is normal and the SVG has been imported, it is just tiny. In order to scale up the model, select all with A, then scale up the selection by pressing S and dragging the mouse.
To make later work easier, an optional quality of life step I would encourage would be to click through the items in the Scene Collection Outliner (top right), and rename them to use more descriptive names. Alternatively, you can have Blender automatically preserve the names given to the vectors in Figma by setting an export property: under the “Export” section in Figma for your SVG icon, click on the three dots, then activate the option to include the “id” attribute.
Extrusion & Bevel
Once you’ve scaled up the SVG, it is time to extrude the model to bring it into three dimensions. Start by selecting one of the curves and click on Object Data Properties (the green line segment with two dots in the menu on the right).
Within the Object Data Properties menu, scroll down to the “Geometry” section and find the input labeled “Extrude”. Either click into the input to type a value or click and drag to change the property gradually. While dragging, hold Shift to have more fine grained control.
If there are multiple curves which should have the same value, instead of setting the extrude property on each individually you can select them all, then hold Alt as you click into the extrude input so that any changes (whether typing or dragging) apply to all selected curves.
If the icon includes a border, like the provided cupcake icon, it can also look nice to round the corners a bit. This is where the “Bevel” property comes in, also found under the “Geometry” section. This property is very sensitive, so even a tiny depth value will do. You will also want to increase the resolution from 4 to 10.
Positioning & Rotating
In order to move and rotate our model as a single unit, we can parent the curves together. Generally a good approach for SVGs is to parent all of the curves to the outline curve. Selecting elements in the Scene Collection Outliner (found in the top right) works similarly to selecting files with your PC’s native file explorer. By holding Shift and clicking on two elements, those two elements and all of those in between them will become selected. By holding Ctrl and clicking on elements, each element will be added to the selection individually.
When selecting multiple elements, one of the selected elements will be shown in a different color than the rest. This item will become the parent.
Once you’ve selected all of the curves which make up your model, press Ctrl+P to bring up the “Set Parent” menu, then select “Object”. Now that all the curves have been parented to the outline, you can simply move and rotate the outline and all of the rest of the curves should follow it.
The shortcuts to move and rotate any object in Blender are very simple. First, select the object you wish to move, and input a key for the movement type (use R for rotation and G for translation). Then, input an axis around which to rotate or along which to move (meaning one of the X, Y, or Z keys). Finally, move the mouse to rotate/move the selected object. Similarly to numeric inputs (such as the “Extrude” property from before), holding Shift while dragging the mouse will reduce the sensitivity to provide more precision.
You may find it difficult to rotate your model to just the right angle. One modification which can make this easier is to select the parent curve and click on “Object” from the area menu, then hover “Set Origin” and select “Origin to Geometry”. This makes it so that the object will rotate on its own center, rather than the world center.
You can also achieve a really nice rotation using the trackball rotation feature. By pressing R twice, we enter trackball mode. You can use this to easily rotate the model to just the right angle once we’ve set up our camera.
Camera & Lighting
We have a couple more settings to modify. First, under the Render Properties menu make sure that “Render Engine” is set to “Cycles”. Then, find the “Film” section and make sure the box next to “Transparent” is checked. Finally under the “Color Management” section, change the “View Transform” to “Standard”. This will really make the colors pop, although if you find that the final render looks a bit overexposed you may want to reduce the exposure setting here.
Next, it’s time to create our camera. Use Shift+A to bring up the add menu and select camera. The camera can be moved using the normal movement shortcuts just like any other objects, or you can snap it to your current view; align your view to the direction and position you wish for your camera to have, then select “View” from the area menu, hover “Align View”, then click “Align Active Camera to View”. Alternatively, use the shortcut Ctrl+Alt+Numpad0. The screen should now appear as though you are looking from the perspective of the camera. At this point you can also adjust the camera focal length by right clicking, although you likely won’t need to.
It is generally useful to have a view of what the camera sees, but we still want to be able to move around the world and freely manipulate our model, so it is time to set up a new area. Place your mouse cursor on the bottom edge of the area, right click, then from the context menu click on “Vertical Split”. Finally, click somewhere in the middle of your area to split it. We will make the right view the camera view, so select “Viewport Shading”, then turn off the overlays with Shift+Alt+Z.
Finally to finish off with the camera, select the camera and go to Output Properties to set it’s aspect ratio and X and Y resolution.
Once the camera is set up, we need to add some lighting. Like before, press Shift+A to bring up the add menu, but this time hover “Mesh” and select the “Plane” option. To turn this simple plane into a light, go to it’s Material Properties (the checkered sphere icon) and change the surface from the default value of Principled BSDF to emission. Then, adjust the strength, size and position of the light, using the camera preview on the right to judge any adjustments.
Materials
Lastly, we want to apply some materials to our model. The exact materials will depend on the particular model, for example if a curve is supposed to represent glass then it should use the “Glass BSDF” material node, while a curve that is supposed to represent metal might use the “Glossy BSDF” material. For more complex materials like wood you can use the node editor and follow this tutorial on procedural wood generation.
For our cupcake SVG, the only necessary material will be to change the black outline to use a glass material. As with the light from the previous step you will need to select the outline and open it’s Material Properties menu. Then, select “Use Nodes” and choose “Glass BSDF”. Lastly, tweak the roughness to a lower value (this makes the glass more transparent).
The only other change to be made is to add an “Edge Split” modifier. Depending on your particular SVG this may not be necessary, but for the cupcake SVG the “bottom fill_2” curve will need it in order to remove the small visual artifact which appears on the vertical stripes.
To fix this visual artifact, select the curve in question and go to it’s Modifier Properties (the little blue wrench). Click on “Add Modifer” and choose the “Edge Split” option.
Rendering & Results
At long last, it’s time to render! Click “Render” in the application menu bar and select “Render Image”, or press F12 to begin rendering your image. Depending on the resolution set for the camera and how powerful your device is, this step may take a while.
Below is what the final product should look like if you followed along using the cupcake SVG. The final Blender file can be found here, in case you are having trouble and wish to compare.
All in all, this SVG to 3D model workflow is a great starting point for beginners, but also genuinely continues to be a powerful tool as one learns and grows their 3D modeling skills. Adding a background, learning how to incorporate some simple materials, and tweaking the lighting can go a long way, and Blender’s FOSS nature and the massive online community around it make continuing this journey very easy.
Acknowledgements
This article was heavily inspired by this video by the YouTuber Polyfjord, which was one of the sources which originally helped me learn how to make my first models with blender. I highly suggest you check it out, as it is a highly engaging and thorough video tutorial on the same subject, and some find the video format easier to engage with. Personally, I prefer text materials since they are easier to search and reference when coming back for a specific piece of information, which is why I compiled this article.
Anyways, get out there and start making some stunning 3D graphics!
