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="http://www.w3.org/2000/svg" width="150" height="150">
</svg>

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="http://www.w3.org/2000/svg" width="150" height="150" viewbox="0 0 300 150">
</svg>

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="http://www.w3.org/2000/svg" width="150" height="150" viewbox="0 0 300 150">
  <image xlink:href="some_svg_image.svg" width="25" height="25" />
</svg>

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.