How SVG helped me level up as a front-end developer

Learn how to use SVG (Scalable Vector Graphics) to scale and manipulate images so they look good on every screen from 4k, 6k, 8k, and beyond!

SVG has been around since 1999. Those were heady days. People had invented and were in love with XML - if you can believe that. If you picked up a trade magazine like Dr. Dobb's Journal - which in those days both existed and was printed on real paper - you saw how every single problem in computer science was being solved via the magic of XML.

Everything old is new again. SVG - which stands for Scalable Vector Graphics - is cool again. Why? Because of Apple, and a technology called Retina.

The Curse of Retina

Now that we have retina screens, and 4k displays, and tablets and phones with god-knows-how-many pixels per inch, we have a problem. You and I have a problem as web developers because we no longer know if images look good on every screen.

We can guess. We can save images at twice their normal size and let the browser sort it out. But what happens next year when displays go from 4k to 6k or 8k?

And if your image happens to have text in it, you're kind of screwed no matter what happens. Because scaling raster images with text almost always results in jaggedness or fuzziness.

SVG solves these problems. Since it's Scalable, it looks great on any display. And it's surprisingly concise.

File Size - SVG vs PNG

This SVG logo is only 2kb gzipped:


The PNG is 11kb.  This may depend on your browser, but in Chrome, the SVG above is much crisper:


SVG as an

You can treat SVG files like any image. The only difference is that the SVG will scale to fit its container. If you want to give it a different size, you need to specify it via CSS.

<img src="/images/2015/03/logo.svg?1717032816" style="width: 800px;">

The benefit of treating SVG like a normal image is that you can use CDNs and browser caching, plus it's easy.

The drawback is that you can't manipulate SVGs loaded this way via JavaScript or CSS.

SVG as an element

Since an SVG is just XML, you can embed it inside your HTML document. This is nice for elements like logos that you want to load immediately. Why else would you want to do this?

You can manipulate the SVG embedded like this with CSS:

  #my-circle {
    fill: red;
    stroke: black;

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" id="my-circle" />

You can get tricky and fragment-cache elements that are DB intensive like charts:

<% cache(chart) do %>
    <%= chart.points %>
<% end %>

SVGs can be manipulated with JavaScript

You can change any SVG element using JavaScript. This is much cooler than it sounds. Suppose you wanted to generate custom posters. You could have the designer export their Illustrator files to SVG. Then when the user enters their custom text or images, you use JS to add them to the original template. I've actually done that. :)

Here's an example:

<!DOCTYPE html>

<svg height="30" width="200">
  <text x="0" y="15" fill="red" id="myText">I love SVG!</text>

  document.getElementById("myText").textContent = "Yr SVG haz been hax0rd!";


You can manipulate raster images with SVGs

Not only can you embed PNGs, JPGs and GIFs into your SVG, you can manipulate them. I'm talking about clipping paths, scaling, blurring and other things you thought you needed Photoshop to do.

Here's an example where we show the same image in two places. But we use SVG to convert one of them to black and white.

<!DOCTYPE html>

<svg width="1400" height="500" version="1.1" xmlns:xlink="" xmlns="">
  <filter id="grayscale"><feColorMatrix type="saturate" values="0"/></filter>
  <image width="640" height="480" xlink:href="" />
  <image filter="url(#grayscale)" x="700" width="640" height="480" xlink:href="" />


This is what it looks like:


SVGs can be animated

You can animate SVGs using SMIL, CSS and JavaScript. The latter is by far the most flexible. There have been several libraries released recently to make it easy. A good one is Snap.

SVGs are cross-platform

At Honeybadger, we have some little graphs for server stats like RAM and CPU load. By generating server-side as SVG, we're able to re-use them in our mobile applications.


And it goes without saying, all modern browsers support SVG down to IE 9.

What to do next:
  1. Try Honeybadger for FREE
    Honeybadger helps you find and fix errors before your users can even report them. Get set up in minutes and check monitoring off your to-do list.
    Start free trial
    Easy 5-minute setup — No credit card required
  2. Get the Honeybadger newsletter
    Each month we share news, best practices, and stories from the DevOps & monitoring community—exclusively for developers like you.
    author photo

    Starr Horne

    Starr Horne is a Rubyist and Chief JavaScripter at When she's not neck-deep in other people's bugs, she enjoys making furniture with traditional hand-tools, reading history and brewing beer in her garage in Seattle.

    More articles by Starr Horne
    Stop wasting time manually checking logs for errors!

    Try the only application health monitoring tool that allows you to track application errors, uptime, and cron jobs in one simple platform.

    • Know when critical errors occur, and which customers are affected.
    • Respond instantly when your systems go down.
    • Improve the health of your systems over time.
    • Fix problems before your customers can report them!

    As developers ourselves, we hated wasting time tracking down errors—so we built the system we always wanted.

    Honeybadger tracks everything you need and nothing you don't, creating one simple solution to keep your application running and error free so you can do what you do best—release new code. Try it free and see for yourself.

    Start free trial
    Simple 5-minute setup — No credit card required

    Learn more

    "We've looked at a lot of error management systems. Honeybadger is head and shoulders above the rest and somehow gets better with every new release."
    — Michael Smith, Cofounder & CTO of YvesBlue

    Honeybadger is trusted by top companies like:

    “Everyone is in love with Honeybadger ... the UI is spot on.”
    Molly Struve, Sr. Site Reliability Engineer, Netflix
    Start free trial