SVG Contours

Version . Copyright © By Ben Whisman. All Rights Reserved.


These SVG 1.1 images are rough drafts. This page is a discussion on achieving the desired look in SVG using Inkscape or other programs. The page will remain on site.

See Also: Puffy 3D effect, advice please on the Inkscape Forum.

Here we have two sample drawings that show a first attempt at doing a contour gradient or contour blend.

The vector art was originally produced in Macromedia Freehand 11 using its standard “contour gradient.” The file was then imported into Adoe Illustrator CS4. However, AI cannot do contour gradients and interprets the FH feature as a blend with a clipping path over a set of concentric objects with varying stroke-widths and stroke-colors.

When exported (saved) from AI to an SVG 1.1 file, this produces a very large (304 KB) file with all those objects grouped in the blend. However, we want a solution that is simpler, smaller, and more elegant. So we got rid of the blend or clipping path and went back to the original outlines.

From there, we used Offset Path to create a second, inner path in front of the original outer path in back. This gets us almost what we want. However, note the thin, knife-edge peaks that remain connecting the hilltops. Ideally, we want the hilltops to become separate, independent, non-continuous shapes. Probably the best way to do this is to Knife apart the inner path for the star shape and rejoin it by hand into an irregular round pebble or egg shape.

It would be very useful to be able to create a blend or gradient or filtered effect using Inkscape. However, at this writing () I’m not yet familiar enough with Inkscape to know the best methods to try. So I'm seeking advice.

Note how, as we create the inner offset path, we get a continous path. This is unlike what we’d see in an isobar contour map or in the smooth, rounded bevel of an actual object in 3D. As we take a 2D object up into 3D in doing a bevel like this, we should get that attenuation, and then finally the path should break into one or more separate paths, forming islands or blobs or hilltops to the valleys below. When doing this with text fonts for type effects, the glyphs often develop arches and ridges and blobs, as seen in the asterisk (star) shape.

Advice will be appreciated on how best to proceed and what techniques to use.

—Ben W. | BlueCatShip

This page may later be updated or revised to include further discussion and answers.