SVG (Scalable Vector Graphic) is a graphic format, similar to PNG or JPEG, that’s great for icons, charts and supporting high-DPI displays. They’re vector-based, so you won’t lose visual fidelity or see any pixelation, no matter what size your graphic is. Because it’s written in XML, you can mark it up just like HTML and modify it with other languages like Javascript or CSS.
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 rx and ry attributes.
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 cx and
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 #FFFFFF
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:
Here’s a gist of that code, so you can see what it will look like when you’ve exported a more complex shape. Now that you can export SVGs from an application and have a basic understanding of how the attributes work, you can start to modify them with Javascript or CSS.
