In this tutorial, I will show you how to create this “photo-realistic” cutaway Saturn illustration in pure SVG. We will use the open source 3D graphics software Blender to produce a physically shaded render of the planet, which we will use as a base to reproduce the image entirely in SVG vector. You will learn how to replicate 3D shading and bounce lighting with SVG gradients in Inkscape, draw the planet’s transparent rings with colors sampled from NASA images, create an aurora effect over the planet’s north pole, and much much more.
1. Modeling Saturn in Blender
Step 1
If you don’t already have it, download Blender from blender.org (current version at the time of writing is 2.73a). Blender is an incredibly powerful 3D app which we will be using to render a bitmap image of the Saturn illustration we will be creating.
This tutorial will assume some basic knowledge of the workings of Blender, as well as Inkscape. If you need a refresher, check out these Blender tutorials, or these Inkscape ones.
You will also need the Blender SVG export script, which you can download here. (The export script was written by a member of the Blender community and allows us to export the 3D vector geometry in Blender to 2D SVG vector geometry.) Copy the script into the 2.73/scripts/addons directory in your Blender install.
Step 2
Activate the script from within Blender in the Preferences window by checking the box next to the script (the script will be found under the Import-Export tab).
Step 3
Modeling the interior layers of Saturn involves creating concentric spheres of different sizes in Blender. Use smooth-shaded UV spheres with a radius of 1, and a high UV resolution (128 segments × 64 rings is probably sufficient). The scaling is dictated by how big the layers in the actual planet are. There are two ways this can be done. If you know the actual mile radius of the layer, you can just input that into the sphere’s scaling factor (here 0.063 corresponds to 6,300 kilometers, the radius of the Saturn core).
You might also set the scaling of the sphere to the Saturn radius (60,268 km) and then use the Delta Scale to set the size in terms of planet radii, given below.
| Liquid hydrogen layer | 0.890 planet radii |
| Helium rain | 0.553 |
| Metal hydrogen | 0.483 |
| Icy core | 0.225 |
| Rocky core | 0.104 |
Step 4
Next we parent all the inner spheres to the main Saturn sphere.
This is important because if we squish or squash Saturn, or rotate it or something, the insides will go along with it. We need to do exactly this because Saturn is not actually a sphere—it’s an oval, as its polar radius is only 54,364 km, compared to 60,268 km for its equatorial radius. If you set the Z Scale of the Saturn object to 0.54364, then the rest of the planet will conveniently scale by that amount too.
Step 5
Next we create the cube which will outline the cutaway section in the image. Move it so that its corner sits on the origin. You might find it helpful to set the cube to a wire display so that you can see Saturn inside.
Then just go through each sphere and cut away the section inside the cube with a Boolean modifier.
Step 6
After color-coding each layer with the colors you want each layer to be in the final image, you might notice a problem. The layers overlap each other.
Fix this by creating copies of each sphere (except for the largest and the smallest) without the Boolean modifiers. (You might want to move them to a different Blender layer so that they don’t clutter your view). Then, give each original sphere a second Boolean modifier against the next smallest copy sphere. This creates hollow, disjoint planet layers that don’t bug out in the viewport.
Finally give each original sphere an Edge Split modifier to give the corners sharp edges.
Sometimes the Boolean modifiers will simply refuse to work properly (3D Booleans are notoriously fussy), in which case you might just want to perform the cutaway operation on the mesh manually (this should be possible if you set the UV resolution of your spheres to a multiple of four).
2. Rendering Saturn in Blender
Step 1
The next step is to texture Saturn. Making sure that you’re in the Cycles Render mode, create the following node setup.
For the image texture, use the image which can be found here, courtesy of Björn Jónsson.
Step 2
The texture will show up as a homogenous yellow in the viewport (Material mode). This is because we need to UV map Saturn so that Blender knows which parts of the texture to apply to which parts of the 3D sphere. Enter XZ orthogonal view (1 5 on the number pad) in edit mode, select all the faces (A), and unwrap the mesh under Sphere Projection mode. Set Direction to Align to Object and Align to Polar ZY.
The hard part is scaling the UV map (found in the UV/Image Editor) to the rectangular region overlaying the image texture. Scale to Bounds in the Sphere Projection panel will handle the vertical dimension, and for the horizontal you'll have to spend some time adjusting it until it looks right.
Once you’ve completed the UV unwrap, you should see a textured Saturn in the viewport.
Step 3
The next step is drawing all the guidelines for the rings and moon orbits. Create a bunch of Bezier Circles and scale them according to your scale scheme to mark out important transitions in Saturn’s rings, as well as its moons’ orbits, if you want. The radii are listed below.
| D–C ring border | 74,500 km |
| Colombo gap | 77,870 |
| Maxwell gap | 87,491 |
| C–B ring border | 92,000 |
| B–Cassini | 117,580 |
| Cassini–A | 122,200 |
| A ring border | 136,780 |
| F ring | 140,220 |
| Janus and Epimethius | 151,500 |
| Mimas | 185,400 |
| Enceladus | 237,900 |
| Tethys | 294,600 |
| Dione | 377,400 |
| Rhea | 527,100 |
| Titan | 1,221,900 |
| Hyperion | 1,481,000 |
Step 4
The rings are simple to model, just a flat mesh formed from two circles. Add a UV seam between two arbitrary panels in the ring object.
The texture I used I modified from a public domain NASA image. Just take a 1px-high cross crop of the bottom of the ring and scale it vertically to some arbitrary height so you can see the pattern.
The rings are tricky to UV unwrap, but there are many ways to get it right. All you need to do is make sure each face spans some vertical part of the radial texture, in its horizontal entirety. Personally I used the Follow Active Quads option and straightened out the sides with S X 0, but you could also unwrap each face individually and have them each take up the entire image space, overlaid on each other. Take care that the texture is oriented in the right direction.
Then scale the inner and outer circles until the features on the texture agree with the guidelines we marked out earlier.
Step 5
Create a material for the rings. The node setup here will make the dark parts of the rings transparent, which will allow them to cast shadows (we need to know where the shadows will land when we convert to SVG).
Step 6
Now we set up our Blender scene to render Saturn. Add a sun lamp to provide illumination (a Strength of 3 and a Size of 0.01 is recommended).
And position the camera to capture the scene. This is the most important step because it will set in stone the angle that Saturn will be drawn from in our SVG illustration. I used a Focal Length of 45 and some shift to position Saturn within the camera frame for a more pleasing composition. Make sure Depth of Field is turned off (Size = 0).
Step 7
You might want to add a fresnel atmospheric effect to Saturn (this gives the edge of the planet a blue tinge). You do this by duplicating the Saturn object, removing any Boolean modifiers and manually deleting the cutout sector. Give it a slight Delta Scale to keep it from overlapping the Saturn mesh, and set it to a wire display.
Here’s the node setup I used. The Light Path node is there to prevent the atmosphere from casting unsightly shadows.
This should yield you a nice render of the planet. While we’re going to use it as a base for an SVG drawing, you could also use the 3D model itself in a 3D animation project if you want.
Step 8
There are several other images we need to generate. We need to make Open GL (viewport) renders of the various guidelines we laid down (Render > Open GL Render Image).
We also need to generate a plain texture render of Saturn, without any Booleans or other elements (make sure you saved the original file though). Change the material shader to Emission (Strength = 1.0) to make the Saturn object shadeless and render it at the same size as the full-scene render.
Step 9
Finally we have to create an SVG render of the interior layers. Remove all the Booleans and other modifiers from the interior spheres, except the first ones, which cut the spheres away from the cube object. The layers should overlap one another again. Then select the interior faces and delete the round exteriors (Control-I, Delete).
Then select all the layer objects and export them to SVG geometry with the Export SVG script we downloaded at the beginning. The plugin lives in the 3D viewport N-panel.
3. Texturing and Modeling Saturn in SVG
We now exit Blender and move to another piece of open source software, GIMP, to process the Saturn texture we rendered in Step 2.8. GIMP can be installed in many different ways, and comes pre-installed with some operating systems; this tutorial will not cover how to install it.
Step 1
The only thing we actually need GIMP for is to produce a negative of the Saturn texture render (Colors > Invert). Save and export the negative to a .png file.
Step 2
Next we import the negative into Inkscape. Inkscape will probably import the image at the wrong size, so in the SVG source code panel, set its width and height to whatever the image was originally.
Fit an SVG ellipse around the Saturn in the negative. This will serve as our clipping mask.
Step 3
To turn the negative texture into vectors, we use Inkscape’s Trace Bitmap function. Set it to Colors; 8 scans is probably sufficient.
Inkscape will trace from lightest to darkest, stacking the scans. This is why we inverted the texture, so that the black background (now white) would become the bottommost scan.
Turn the scans back to their true color by reinverting them: Extensions > Color > Negative.
Step 4
You might want to optimize the scans a bit to reduce the number of stacked objects near the edges, which can cause aliasing problems. Many parts of the lower-level scans are covered by higher scans, redundancy that ought to be reduced if possible.
Step 5
Next we import the Saturn Blender render we made, in the same manner as with the texture render. Drag and drop the SVG rendering of the layers into your workspace, over the Saturn render. (Here, the bitmap render is above everything except the ellipse from Step 3.2 and the SVG planet layer render).
The planet layers will almost certainly come in at the wrong size, so we have to scale them to match the bitmap render.
Then we ungroup the layers completely, and run Path > Object to Path on all of them to make them editable in Inkscape. It helps to run Path > Simplify to turn the polygonal shapes into smooth wedges. Finally, turn all of their opacities up to 100% (they will probably come in at 90%), remove strokes, and color them.
4. Shading Saturn
We will also be relying on the Blender render of Saturn we made to tell us how to shade the planet in SVG.
But wait! Isn’t that cheating?
Of course not. It’s just like an acrylic painter laying down a grisaille layer, or a 3D artist modeling from reference images. It helps us achieve a much better result than we ever could free-drawing by eye or memory. Blender’s raytracer will tell us exactly how to shade the planet so that it makes sense when we look at it; surely that’s easier and better than simply guessing how the light falls.
Step 1
The highlit faces—the ones perpendicular to the sun in this image—are more or less shaded completely flat. You can just use the eyedropper tool to retrieve their colors from the render.
Step 2
The shadow faces are more complexly shaded. For the very thin layers, we can get away with just using a linear gradient, sampling colors from the corresponding spots in the render. Avoid sampling by simply clicking with the eyedropper. The render will likely be very grainy, and sampling by clicking only takes color from a single pixel, so the color you get might vary wildly. Instead, hold and drag the eyedropper over the region you want to sample—doing this makes the tool average out all the pixels within a certain radius.
In the thicker faces, the color varies in two-dimensions—arc-wise and radially. Here we shade the face radially only, sampling from the middle of the arc in the render. Accordingly, we use a radial gradient to accomplish this shading.
Step 3
We will create the arc-wise shading by overlaying the base objects with transparencies. These transparencies are a faint white at one edge, and transparent elsewhere, lightening the shadow faces where they meet the other two faces (bounce lighting).
Note that the pink face gets tinted a brighter shade of pink at the edges, not white. Try to avoid muddy gradients—the transparent stop still needs a color too. Also pay attention to z-ordering; all of the transparencies are underneath the next-highest layer.
Step 4
The tangent faces (parallel to the direction of lighting) are simpler to shade. The thinner layers can take linear gradients, just like in the shadow faces.
The thicker faces are shaded conically, which we can fake with a radial gradient, centered off the face. Because the gradient needs to be steeper on one side than the other, we shift the gradient focus (Shift-drag the square part of the gradient) closer to the steep side to make an asymmetrical gradient.
Step 5
The core is simple enough to shade—just a radial gradient.
Step 6
As polish, add underneath each set of three faces a triangular shield of an intermediate color (or an approximate gradient).
This fills in the “seam” between the three faces that make up each layer, preventing anti-aliasing artifacts from showing up in the SVG.
Step 7
Next we shade Saturn itself. First group all the texture scans and clip them with a copy of the bounding ellipse (Object > Clip > Set).
Step 8
Then we duplicate the ellipse and fill it in with a soft radial gradient that’s a faint blue on the outside and transparent on the inside (remember that the transparent stop still has to be blue!). This recreates the fresnel (inverted halo) atmospheric effect around Saturn. Make sure it’s underneath the various cutaway shapes. Because the left side of Saturn in the render appears to be bluer than the right, we shift the transparent center of the gradient a little to the right to reflect this.
If you look closely at the render, you’ll notice that the planet appears to be ringed by a sharper blue fresnel. We recreate this with a second ellipse, this one shaded by a steeper fresnel gradient, and centered on the planet core (we couldn’t just add stops to the first fresnel ellipse because its gradient wasn’t centered).
Step 9
Finally, take the last remaining ellipse and use a radial gradient to make it into a shadow shader (black on the outside, transparent on the inside). Play around with the stops to create a smooth falloff similar to the one in the render.
Consider making the radius of the shadow ellipse one or two pixels wider than those of the underlying ellipses—this prevents the yellow edge of the planet from peeking out from behind the shadow ellipse on the dark side of the planet.
However, since that still might happen at small sizes (faintly visible in the image below), you should create a thin black collar around the disk of the planet to cover the artifact up. The black collar will also help prevent aliasing on the lit side.
5. Creating Saturn’s Rings
At last, we come to the most spectacular part of this tutorial—creating Saturn’s rings.
Step 1
Using the Open GL render we made earlier, fit SVG ellipses around all the visible transitions in the ring system. (Pictured below is a semi-transparent version of the Open GL render overlaid on our SVG Saturn, with one ellipse fitted.)
This step is probably the most tedious part of this tutorial, because you will have to fit probably two dozen ellipses. Consider color-coding them to distinguish different parts of Saturn’s rings.
Step 2
Next, we use the ellipses to produce filled regions. To make a filled region, select two ellipses, combine them into one object (Path > Combine) and reverse the direction of the inner path (Path > Reverse) to make a hole. Use your artist’s judgment as to whether the regions should be disjoint or stacked—areas with different hues should probably be disjoint, while a region that is a brighter part of an adjacent region should probably be stacked on that region. Most of your regions will probably be disjoint.
Step 3
Here comes the fun part—coloring Saturn’s rings.
How did I get the rings like that? I’ll show you.
First we need a good source to glean the colors of the rings from, as the ring texture we used in Part II isn’t as attractive as some other photographed-textures of the planet’s rings. I chose this NASA image as my source.
But you can’t just grab the eyedropper tool and pick from the reference image. That would only give you an opaque color and part of the beauty of Saturn’s rings is their partial transparency. So what we do instead is take the color from the ring reference, then brighten them in color while simultaneously reducing them in transparency. This yields the same color when viewed over black, but partial transparency over other backgrounds (like Saturn’s planetary disk).
Do the same thing for every ring region you carved out.
In some regions, like the heavily banded B-ring, it makes sense to use an SVG stroke outline to add additional complexity, but use stroke sparingly in the rings because it does not get thinner at the top or bottom as it should.
The rings become very faint close to Saturn, creating beautiful transparency effects over the planet.
Finally, we tune the opacity of the rings as a group by tweaking their group opacity (I used 63% opacity).
Step 4
We need to make the rings disappear behind the planet. We do this by combining the inner edge from a copy of the black collar object with a rectangle the size of the page to make a filled rectangle with a hole in it for Saturn.
Since the rings only disappear behind Saturn (not in front of it, obviously), we fill in the bottom half of the hole.
Then set it as a clipping mask for the rings.
Step 5
The black collar might exacerbate the “seam” between the lit side of the planet and the clipped rings.
Fix this by punching a “hole” in the black collar with a small transparency gradient (black around the gradient, transparent inside it).
Step 6
Saturn casts a shadow on its rings. We create this shadow by adding a circle object to the ring group, and using it as a canvas for a black–transparency radial gradient.
Step 7
The rings also provide illumination to the dark side of Saturn. As you can see in the render, the bounce lighting casts two faint bands of light on Saturn, separated by a gap (from the Cassini division, probably). First we make a single light patch with a radial gradient on a copy of one of the blue fresnel ellipses. This gradient will have a very low opacity given the faintness of the bounce lighting.
Then we make the dark gap with another gradient on an identical ellipse. This gradient is transparent on both ends, but a faint black in a narrow band in the middle (shown below on top of the cutaway sector, though it should actually be underneath). The ellipse the gradient lives on should be reduced to an segment covering the left half of the planetary disk, to prevent the dark band from showing up on the lit side of the planet.
This creates a subtle bounce lighting effect on our vector Saturn.
Step 8
Finally, just as Saturn shades its rings, the rings also shade the planet. Roughly trace the ring shadows seen in the Saturn render, and color them accordingly with transparencies of black.
Then give the shadow group a 1% gaussian blur and tuck it underneath the ring group.
6. Auroras and Moon Orbits
According to some sources, Saturn has some lovely pink auroras, which we can recreate in SVG.
Step 1
First draw the surface footprints of the auroral rings.
Step 2
Then draw vertical sheets emanating from the rings. Give them gradients that make them red at the bottom and purple at the top. The trick to making ray effects is overlapping these sheets.
Step 3
Then just give the auroras a slight gaussian blur (3%).
Step 4
The auroras might not look that great at this point. That’s because they are not being overlaid on the image with the right blend mode. Create a new SVG layer, and move the aurora objects into it (right click > Move to layer…).
Then set that layer’s Blend mode to Screen. That makes it so that the light from the auroras gets added to the colors underneath them, rather than replacing them.
Step 5
If you want to include moon orbits in your drawing, you can produce another Open GL render, this time with a wider field of view (decrease the focal length), and fit ellipses to that.
Step 6
You might notice that the area around the aurora is acting funny. That’s because the Screen blend filter bugs out over transparent areas of the image.
We can fix that by simply adding in a black opaque background underneath the drawing.
Awesome Work, You’re Now Done!
In my final image, I added annotations, as well as small circles representing the moons. You can see the finished SVG at Wikimedia Commons, where it now lives.
I hope you’ve enjoyed this tutorial! Check out some other planets I’ve drawn, including Jupiter, Uranus, and Neptune, as well as the Moon. If you have any questions or comments, please don’t hesitate to leave a comment below!
