39: Bringing It All Together – A Real World Project with SVG

In this video we try and bring a bunch of what we learned together by creating a website that makes use of SVG in a variety of different ways. We make our way through creating a site for the fictional “Dreamy Donuts” online donut shop. This is the process we take.

We create a local development domain to work with in MAMP. This is always a good step because it makes the website behave much more like a website on a live server will (as opposed to a file:// URL kinda thing). Specifically, in our case, the local domain will make the <use> stuff we do work properly.

We use Grunt on the project. We’re using it to build the defs.svg file for our icon system (which includes the logo). And we’re also using it to optimize the SVG images.

The logo is just an SVG file called logo.svg in our project. Grunt squishes it together with the other image we’re going to use in our system and drops that into `includes/defs.svg`. That makes it super quick and easy to use it. Our entire header becomes:

<header class="main-header">
  <a href="/" class="logo">
    <svg>
      <use xlink:href="includes/defs.svg#logo"></use>
    </svg>
  </a>
</header>

The header itself we designed to have this angled, wavy, pink background. That’s great for SVG as well. It would be hard to do any other way, and with SVG, it’s a measly 800 byte file that scales perfectly.

.main-header {
  background: url(images/header-bg.svg) -20px top no-repeat;
  background-size: 1000px;
}

In the main content of the site, we show three different types of donuts. Technically, these could be background images or they could be part of our icon system, but really I think of them more as content images. I imagine a CMS having a “donut” page type and a publishing these as individual pages themselves. Like a little blog post or whatever. The image is part of the content of that post. It’s not an icon, it’s not a background, it’s content.

So, we use <img>.

<div class="donut-type">
  <header>
    <img src="images/glazed.svg" alt="">
  </header>
  <h2>Glazed Donut</h2>
  <p>Our classic recipe; since 1948.</p>

  ...

Each of these areas for a donut also has an Add to Cart button. We use a little cart icon there to embellish the button. It’s just as easy as what we did with the logo. So that chunk of donut HTML finishes like this:

  ...
  
  <div class="add-to-cart">
    $1.99
    <a href="#" class="button">
      Add to Cart
      <svg class="icon icon-cart">
        <use xlink:href="includes/defs.svg#cart"></use>
      </svg>
    </a>
  </div>
</div>

The footer also had a wavy pink background, which we do the same way as the header.

All in all, a pretty decent little site. It should look sharp everywhere and the whole thing weighs in under 60 KB, with the custom fonts being the largest chunk of that.

There would be plenty more to do on this site. We didn’t deal with fallbacks. We didn’t animate anything and the site has a fun enough vibe that that would be neat. We didn’t optimize everything we could have. But we’ve covered all that in this series, so feel free to download this project (Bear only) and use as an experimentation playground and practice improving it.

Files

39-project.zip