Making a Realistic Cog using SVG

D

DevynCJohnson

Guest
When making detailed SVG images, it is easier to make complex graphics with Inkscape than designing it using a text editor. Designing graphics using only a text editor is difficult, time-consuming, and may not provide the results the graphic-designer is wanting. An interesting graphic to discuss and make is a metal cog. This is helpful because many people may find it interesting to learn some of Inkscape's tools and features and get a very basic understanding of SVG. The metal cog will be made in Inkscape and some minor tweaks will be performed in a text editor or IDE. To make things more interesting, we will apply a hyperlink to the cog which is a path, not an object. This article will not discuss a lot of detail about Inkscape or SVG. The point of this article is to give readers a general idea about SVG and Inkscape and show that Inkscape and SVG are both great choices for graphic design.

NOTE: The graphics discussed in this article were tested in Opera, Firefox, and the GNOME Image Viewer (which supports SVG). If the graphics do not work in other web-browsers, then download and install Opera or Firefox.


Basic Info

Inkscape is a free, open-source SVG graphics designer. SVG images can be made and edited just like a graphic designer (like GIMP) would make a raster image (Jpeg, Gif, PNG, Bitmap, Tiff, etc. - all of these are pixel-based images). Inkscape can be obtained here (http://inkscape.org/download/). The installation instructions will vary on your system and operating system. The Inkscape website provides sufficient documentation on installing the application onto several operating systems.

SVG is a markup language that defines an image. Users can open an SVG file (*.svg) in a text editor and see HTML/XML-like plain text. SVG is a vector image in contrast to a raster/bitmap image. SVG can be scaled without losing quality. Since the source code is plain text, these images are small in size and compress very well, unlike raster images.


Making a Cog

Making a cog as detailed as we are about to make is nearly impossible to make via a text editor. Inkscape will quicken and ease the process. To begin, make a star by clicking the star button in the toolbox. In the tool settings, click the star icon and select the number of desired cog teeth by making the same number of star points. Remember to hold down the CTRL key when selecting the star's area/size. This keeps the star symmetrical. Step-by-step, we are going to turn this star into a cog. The points will later be the teeth of the cog. Next, make a circle by clicking the circle tool and select a different color (this makes our task easier). When making the circle, hold CTRL to keep the circle symmetrical. Otherwise, the circle will not have the same radius all around.

NOTE: Your cog will look a little different from mine, but that will not negatively effect the outcome.

Next, we need to combine these two shapes to make a cog. Select the two shapes while holding the shift key (making the shapes different colors does help). Now, we can click "Object -> Align and Distribute" in the menu bar. This causes a window to appear. In the "Align" box, choose to “align relative by page”, click the icon "Center on Vertical Axis", and then "Center on Horizontal axis". This will place our two paths on the center of the canvas and they will be centered with each other. This will help make a symmetrical cog.

NOTE: A path is a group of points and lines that make up an item. An object is one piece. So, in this article, I will call the shapes paths, not objects, because that can cause confusion.

Once finished, click "Path -> Union" to join the two paths into one. This almost looks like a cog, but we still have some tweaking to do. Next, make another circle that is almost as large as the cog and then, center it along both axises. Be sure that the points of the star are still visible because what you see will be cut. Now, select both paths and click "Path -> Intersection". This will remove any portions of both paths that do not overlap. This makes the teeth square, like a cog. We now have the outline of a cog, but we want a realistic looking cog.

All cogs have an axle hole in the center. This can be added by making a small shape. I will use a triangle for this example, but use whatever you wish. To make a triangle, click the polygon/star tool and, in the settings, select the polygon and make it have three points/corners. Remember, hold CTRL to keep the shape symmetrical. Like before, align the shapes. Now, select both paths (the triangle and cog) and click "Path -> Difference". This will subtract the shape from the cog making a hole where someone would normally stick an axle. Currently, we have a cog-shaped silhouette.

REMEMBER: Save your work as a plain SVG because plain SVG is more widely supported than our other “save as” choices. Plus, Inkscape-SVG contains Inkscape specific commands and various meta-data which we do not want. Saving as a plain SVG reduces the file's size without harming the image.


Texturing

Next, we will make the cog look real. We will select "Path -> Inset" to make the cog look a little better. Now, we will select "Filters -> Bevels -> Pressed Steel". This will change the path to make it look like steel. The bevel gives the cog-shaped silhouette some color and a 3D-look. The cog still has a cartoon-like appearance. This is because the cog is too perfect, evenly uniform, and lacks shadows. To fix this, click "Filters -> Distort -> Roughen Inside". This makes the cog look like the teeth and axle hole have suffered some wear and tear.

At this point, you have many options depending what look you are wanting for the cog. For a rough-looking cog, click "Path -> Textures -> Rough and Glossy". For a rough old look, click "Filters -> Textures -> Cracked Glass" - this does not really make the cog look like cracked glass. For a rusty look, click "Filters -> Materials -> Eroded Metal". For a more 3D-look, try "Filters -> Shadows and Glows -> Glow" or use "Filters -> Shadows and Glows -> Drop Shadow". There are many tools under "Filters" that users can try out.

The last step in making the cog is to click "File -> Properties" and make the SVG image square. This can be done by making the height the same as the width. After that, realign the cog with the center of the page like we did with the shapes. Save the file as a "plain SVG".


Minor Tweaks to the Src

Although we now have a metal cog with a 3D texture, we are not quite done. Open the SVG file in a text editor or IDE. We need to make the SVG more compliant with the SVG standards by removing the header that Inkscape created (example below). We only need the SVG header, not the XML header. The header seen below is the code that needs to be removed from your SVG file.

Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) -->

Now, the cog is done. However, if you wish to give the cog a hyperlink to your favorite website, it is not as easy as adding an <a> tag with href. First, add this line (a namespace) to the SVG header.

Code:
xmlns:xlink="http://www.w3.org/1999/xlink"

This is needed to make the <a> tag work. Without it, we cannot use the "xlink" parameter in the <a> tag's parameters. Loading namespaces in markup languages is similar to including headers in C/C++ or importing modules in Python. Next, add the line (seen below) before the "path" tag in th SVG file.

Code:
<a xlink:href="http://www.linux.org/">

Lastly, place the ending tag (</a>) after the path tag (</path>). Now, you have created a realistic-looking cog in SVG code. Yes, you made a detailed image out of plain text.


Uses for the SVG file

With this SVG image of the cog, we can save the image in Inkscape as a raster image. By doing so, the SVG image that is now a raster (like a PNG) can be used in other applications like GIMP.

cog-image.png



Bonus!

I will not spend a lot of time explaining this since this is just bonus material.

SVG also supports animation. Adding the code seen below to the SVG file after the "</a>" tag (that we just added) will make the cog spin. Depending on the size of your cog, you may need to change some of the numbers I have used in the tag. The "0" and "360" will not need to be changed because those are the angle changes. The code states that the cog will start (from="0 372 372") at 0 degrees and spin (type="rotate") from its starting position to its ending coordinates (to="360 372 372"). The cog starts at zero degrees and completes its cycle in thirty seconds (dur="30s") ending at 360 degrees. This means the cog will spin at a steady rate so a change of 360 degrees will take place in that time frame. The other numbers that are seen four times (372) are the X and Y coordinates. Since the image is square and the cog is in the center, the X,Y coordinates are located in the center of the image. So, if you have a square image that is 1000 by 1000, divide the dimensions in half (1000 / 2 = 500) and those are the center's coordinates.

Code:
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 372 372" to="360 372 372" dur="30s" repeatCount="indefinite"/>


So, now you have seen for yourself that Inkscape is a powerful graphics tool that uses SVG. SVG is just plain-text that looks like XML. This makes the files small and easy to compress to shrink the size further. Even an animated SVG is very small. Again, animation is the form of plain-text. SVG has a lot of potential as a common image format and substitute for GIF files. Manipulating and creating SVG files is not more difficult than the raster images we are accustomed to using.

Below this article are some attachments. Included are my SVG files. Rename the file-extension from "txt" to "svg".
 

Attachments

  • slide.jpg
    slide.jpg
    75.8 KB · Views: 43,080
  • animated-cog.txt
    8.2 KB · Views: 1,019
  • gear-shape.txt
    3.6 KB · Views: 1,087
  • metal-cog.txt
    8.1 KB · Views: 998

Members online


Latest posts

Top