Category Archives: Web Design

How to Get SVG Images to Cooperate

Recently I was converting a mocked up webpage to an actual webpage and was using the <svg> element to handle some image resources. If you don’t know what SVG is, it stands for Scalable Vector Graphics. Its all in the name.

This element has not been common in most sites I have come across but is pretty powerful for handling the scaling of images and maintaining their resolution.

However, it is a little tricky and I could not find documentation that clearly explained how to work with them effectively so I will attempt to do that here.

The Image Tag

This is specifically about the <image> element inside of the <svg> element.

There are several tutorials on how to use svg to draw what you want in your webpage but none sufficiently explained how to handle an svg image that was already created.

Adding the image to the page is easy enough, just put it in an image element inside an svg element.

Sizing On The Page

Since the <image> element is contained within the <svg> element, to determine how large the area it will display in on the page, you set the width and height attributes of the <svg>:

<svg xmlns="" width="150" height="150">

Using the Viewbox

<svg> has an attribute called the viewbox. This is like a little window that you can set for which part of the image you want to see.

It gets set to a string of 4 numbers separated by spaces, like “0 0 300 150” or something like that.

<svg xmlns="" width="150" height="150" viewbox="0 0 300 150">

The first number is the x offset of the viewbox which controls where we start viewing the image from the left hand side.

The second number is the y offset of the viewbox which controls where we start viewing the image from the top.

Both of these can be negative, which moves the viewbox off the image.

The third number is the width of the viewbox. If your image is 300px wide and your viewbox width is only 100, then you will only see about 1/3 of the image horizontally when you display it.

The fourth number is the height of the viewbox. It behaves just like the width. If your image is 300px high, and your viewbox height is 150, you will only see about 1/2 of the image vertically.

I would recommend that you play around with these values on JSFiddle to get a solid understanding of what is happening. On this particular fiddle I put the Mozilla Developer Network example of an svg image.

Image Element Width and Height

The width and height attributes of the image element are where you start seeing why svg’s are useful. You can scale the image pretty much as large as you want or as small as you want while still maintaining resolution.

<svg xmlns="" width="150" height="150" viewbox="0 0 300 150">
  <image xlink:href="some_svg_image.svg" width="25" height="25" />

This is great for logos and icons, especially when viewing on mobile devices compared to desktops. It allows you to reduce the number of viewable assets you have to make.

Note About Browser Compatibility

One of the reasons that I even did this post was because of the various behaviors across browsers. Initially I was not messing around with viewboxes and the various x and y attributes, but when I started testing my work in different browsers, I found that if some of these values are not set, certain browsers render the images differently.

If you want consistent display across browsers you should make sure to set all of these attributes correctly.

Additional Resources

Although not exactly what I was looking for, the following still have many useful details about working with SVG images in html.

Web Design – the Skeleton Framework

This week we are taking a small break from our regular theme of games and looking at web design, specifically at using the Skeleton framework. Something that I learned from The Art of Game Design is that learning better design principles from any kind of design will help your game design.

Why Are We Talking Web Design?

I had my phone out and was looking up a certain kind of local businesses around my area and found that there were only a couple. When I clicked the link to their websites I found that they were not ready for phones. I had to pinch and zoom and scroll around the page. The information was there and the navigation was clear but it was just not designed to work on a phone.

Since I had been meaning to learn better responsive web design in an effort to increase my value as a web based programmer (my current day job), I decided I would take one of the sites on as a project. So I completely redesigned the whole site and made it mobile responsive. I was proud of my work and asked the opinion of a coworker who is very good at design.

He made a simple suggestion that took the redesign to another level.

Adding a Skeleton

My coworker suggested that I add a CSS Grid system to the site and recommended Skeleton. I had never heard of it before and decided to check it out.

One of the most common CSS grid frameworks is Bootstrap. Many people who have looked into modern web design can pretty quickly identify a site that uses one of its templates or something like it. I have tried learning more about Bootstrap in the past but always found it a little murky and never made much headway in understanding what it was trying to do.

Skeleton is a very light CSS framework that allows you to get started applying a grid system to your website design with just a few classes. It is pretty clear what it is trying to do, and it sort of self documents by example on their site. I found it extremely easy to get started with.

The grid is basically rows and columns. You then use these 2 building blocks to create a cohesive design that is more aesthetically appealing. Additionally it helps organizes the information that is being displayed to be more easily consumed by the user.

After applying Skeleton to the site, it looked 1000% better (in my personal opinion).

Lessoned Learned

Many of the principles of grid systems, such as cohesion, can apply to games and most importantly to the part of the game that the player interacts with, the interface.

Every game has some sort of interface that the player uses to play the game. We as game designers should take things like grid systems and learn to use the principles that they are based on to improve our games and their interfaces.

Don’t forget to look for inspiration in all design.