Let’s build a robot
SVGs are typically made up of objects, like shapes and paths. Let’s start by building something simple like Ralph’s head. Here’s our full logo in SVG for reference:
Open your favorite text editor and create a new file. Start with an empty
<svg> element and define its XML namespace:
<svg xmlns="http://www.w3.org/2000/svg"> </svg>
To start creating a graphic, we can add a simple rectangle by specifying a height, width and fill color.
<svg xmlns="http://www.w3.org/2000/svg"> <rect height="60" width="100" fill="#B32317" /> </svg>
Save that file, open it in a web browser, and you should see something like this:
We can round the corners of the rectangle with
These attribute should always be the same if you want a circular corner.
... <rect height="60" width="100" rx="10" ry="10" fill="#B32317" /> ...
Just like the
<rect> element, SVG has a
<circle> element. We’ll use that
for the eyes.
... <circle cx="26" cy="26" r="10" fill="#000000"></circle> <circle cx="74" cy="26" r="10" fill="#000000"></circle> ...
As you can see, circles and rectangles have different attributes. The
cy attributes are the x and y coordinates of the center of the circle,
respectively. The coordinate system has the origin at the top/left with the
x-axis pointing to the right and the y-axis pointing down. The
r attribute is
the radius of the circle.
To keep your code more organized, SVG has a
<g> element, similar to HTML’s
<div>, that you can use for grouping. These elements are a great place to add
classes for styling or manipulating later.
While we’re at it, let’s change the
fill attribute on the circles to
so they will show up on the red rectangle better.
<svg xmlns="http://www.w3.org/2000/svg"> <g class="head"> <rect height="60" width="100" rx="10" ry="10" fill="#B32317" /> <g class="eyes"> <circle cx="26" cy="26" r="10" fill="#FFFFFF"></circle> <circle cx="74" cy="26" r="10" fill="#FFFFFF"></circle> </g> </g> </svg>
Starting to look more familiar…
Add a couple more circles, and we’ve got ourselves a robot head:
... <circle cx="26" cy="26" r="7" fill="#B32317"></circle> <circle cx="74" cy="26" r="7" fill="#B32317"></circle> ...
Working with SVG in the real world
Hand writing SVGs like this rarely makes sense. Exporting an SVG you’ve already made in a vector graphics application is much quicker. An example workflow using Sketch, an OS X-only vector graphics app:
- Select the shape or group you want to export as SVG.
- Click “Make Exportable” in the lower right corner.
- Find “SVG” in the dropdown and click “Export”.
Although Sketch doesn’t give you insight into the code it produces, it exports relatively clean SVG files. Next, you take the outputted code and paste it into the page you’re working on. Here is an example: