--- title: Building Ralph with SVG teaser: tags: design,svg author: Steven Harley published_on: 2014-08-18 --- 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 `` element and define its XML namespace: To start creating a graphic, we can add a simple rectangle by specifying a height, width and fill color. 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. ... ...

Just like the `` element, SVG has a `` element. We'll use that for the eyes. ... ...

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 `` element, similar to HTML's `
`, 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. Starting to look more familiar…

Add a couple more circles, and we've got ourselves a robot head: ... ...

## 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. ![''](https://images.thoughtbot.com/building-ralph-in-svg/select.png) - Click "Make Exportable" in the lower right corner. ![''](https://images.thoughtbot.com/building-ralph-in-svg/make-exportable.png) - Find "SVG" in the dropdown and click "Export". ![''](https://images.thoughtbot.com/building-ralph-in-svg/dropdown.png) ![''](https://images.thoughtbot.com/building-ralph-in-svg/export.png) 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](https://gist.github.com/smharley/b518c91fcd85e8212fca) 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.