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.

Comments

  1. User Avatar
    Jhonatan Cohen
    Permalink to comment#

    First of all great great series, learned a lot, already loved SVG, now i love it even more.
    one question though, when i opened the project in safari the 3 donuts are one on top of the other (like the xs version of them), why is that?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Hey Jhonatan,

      Good catch! Download the project again and it should be working.

      I noticed a couple of problems when I opened the version I supplied here in Safari. One was the “one on top of the other” issue. That was a result of Safari’s flexbox implementation. That wasn’t exactly our focus here, but I went ahead and fixed it by applying all the needed vendor prefixes for Flexbox to work there.

      The other problem was that, even when running a local server to view the project, Safari wasn’t displaying the CSS background-images properly. Through my MAMP, it was serving the wrong content type. So I dropped in an .htaccess file that forces the right one.

  2. User Avatar
    Nooteboom
    Permalink to comment#

    Great course and a very cool example using SVG’s in different ways on this project. I’m guessing the 39-project.zip file is no longer supported? (I get an ‘Access Denied’ error when I click on it). I’d like to check out the files for reference if possible! Thanks again.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      You probably need to refresh the page before that link works again. The download links time out, a relic of when this area used to be a paid area of the site.

  3. User Avatar
    Phil Houghton
    Permalink to comment#

    Its my understanding that “SVG with ‘use’ and external svg file” + gradients dont work in Chrome. Here’s plunker which demonstrates: http://plnkr.co/edit/F85plqSExAKEwMOTz5iY?p=preview

    Is that your understanding too? Any work arounds? Or does it mean once you introduce gradients, you have to go back to in-lining the whole file?

  4. User Avatar
    Phil Houghton
    Permalink to comment#

    I discovered that you can make Chrome and Safari work with external SVG’s + gradients by inlining just the gradient definitions in the parent html file. It should be noted that Firefox doesn’t need this inline workaround, it properly supports gradients in external SVG files.

    You can also uniquely style each clone using CSS variables. In this plunker demo, there are 12 clones of a single external SVG object with unique style/size/gradient combinations: http://plnkr.co/HvRiDR

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag